Vue.js Vue Js Composition Api 未定义(读取名称)

当我try 使用组合API时，我有未定义的(estination.name)，但当我使用Options API时，代码或计算(computed)属性正在工作，并且我没有收到任何错误.有人能帮我吗？谢谢

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

误差率

Uncaught (in promise) Type误差率: 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个