What are some good ways to handle undefined errors in vue 3?

So I’m working on a basic news site using Vue3, and when content is not found I would like to show an indicator for this

  <main class="bg-black">
    <div v-if="!article.loading && article.data[0] == undefined">
      Not Found
    <section class="secondary-ft">
      <div class="relative w-full" style="height: 32rem">
          class="animate-pulse absolute h-full w-full bg-white bg-opacity-40 rounded-3xl"
          class="absolute h-full w-full object-cover border-none"
          :src="article.data[0].mediaLink" <---- The error is thrown here

export default {
  name: "Article",
  setup() {
    const route = useRoute();
    const article = useFullArticle(route.params.id);
    const suggestions = useSuggestions(4);
    return {
  methods: {
    redirectTo(route) {
    checkIfGotData() {
      if (this.article.data[0] == undefined) {
        this.$router.push({ name: "NotFound" });
  watch: {
    "article.loading": "checkIfGotData",

article is reactive, and article.data[0] is a Javascript object.

When I request a non existing article id, it should show the “Not found” message, yet it throws at me this error:

Uncaught (in promise) TypeError: $setup.article.data[0] is undefined

But after this the page doesn’t update, even if article.loading is false, and the “Not Found” is not shown.

The question is, how can I handle this, so it won`t error out.

So far my solution is to watch the loading state, and redirect the user to a NotFound page, but my goal is just to show a component when article is not found.

Internally the loading state is updated, but the error prevents the page from updating I guess.

Here is the code for useFullArticle():

import { reactive } from "vue";

export default function useFullArticle(arid) {
  const articleState = reactive({
    loading: false,
    error: "",
    data: [],

  async function loadData() {
    try {
      articleState.loading = true;

      let { data, error } = await myDb...;
      articleState.data = data;
      articleState.error = error;
    } catch (error) {
      articleState.error = error;
    } finally {
      articleState.loading = false;


  return articleState;


you can just do this

<div v-if="!article.loading && !article?.data[0]">

then add v-else

<section v-else class="secondary-ft">


if (!this.article?.data[0]) {

you don’t need to validate if article.data[0] == undefined because javascript if/else will evaluate it as false if the condition is undefined, null, 0, ''. the question mark ? is optional chaining to evaluate if article is exist, if it does not exist the code will stop there