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

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

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

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;
      console.error(error);
    } finally {
      articleState.loading = false;
    }
  }

  loadData();

  return articleState;
}

Answer

you can just do this

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

then add v-else

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

and

...
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