Vue Js Composition Api undefined (reading 'name')

Question

I am having undefine (destination.name) when I am trying to use the Composition API but when I used the options API the code or computed property is working and I don't get any error. can someone help me? thanks

<template>
  <section class="destination">
    <h1>{{ destination.name }}</h1>
  </section>
</template>

<script setup>
/*
  import
*/
import { useRoute, useRouter } from "vue-router";
import { computed } from "vue";
import sourceData from "@/travel-data/data.json";

/*
  use params from vue-router
*/
const route = useRoute();
const router = useRouter();

const destinationId = computed(() => {
  return parseInt(route.params.id);
});

const destination = computed(() => {
  return sourceData.destinations.find(
    (destination) => destination.id === destinationId
  );
});
</script>

Error

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')
    at Proxy._sfc_render (DestinationView.vue:3:24)
    at renderComponentRoot (runtime-core.esm-bundler.js:896:44)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5580:57)
    at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)
    at instance.update (runtime-core.esm-bundler.js:5694:56)
    at setupRenderEffect (runtime-core.esm-bundler.js:5708:9)
    at mountComponent (runtime-core.esm-bundler.js:5490:9)
    at processComponent (runtime-core.esm-bundler.js:5448:17)
    at patch (runtime-core.esm-bundler.js:5038:21)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5660:17)

enter image description here

Answer 1

Add a conditional rendering with v-if and access destinationId property with value field in the comparison :

<template>
  <section class="destination">
    <h1 v-if="destination">{{ destination.name }}</h1>
  </section>
</template>

<script setup>
/*
  import
*/
import { useRoute, useRouter } from "vue-router";
import { computed } from "vue";
import sourceData from "@/travel-data/data.json";

/*
  use params from vue-router
*/
const route = useRoute();
const router = useRouter();

const destinationId = computed(() => {
  return parseInt(route.params.id);
});

const destination = computed(() => {
  return sourceData.destinations.find(
    (destination) => destination.id === destinationId.value
  );
});
</script>