Vuejs - Vue router : Pass data from one component to another and fetch data

Question

I found a tutorial that allowed me to pass the objects through routers, but when I click on the last element of my json database, nothing is displayed and I get an error ''Uncaught (in promise) TypeError: can't access property "title", _ctx.projectInfo is undefined". I use "vue": "^3.0.0", and "vue-router": "^4.0.0-0",

Here is my code:

<template>
  <div class="container" style="padding: 6rem 0px">
    <div class="card">
      <div class="row">
        <!-- <h2>{{ projectIndex }}</h2> -->
        <h2>{{ projectInfo.title }}</h2>
        <p>{{ projectInfo.description }}</p>
        <h2>{{ projectInfo.price }}</h2>
        <!-- <h2>{{ $route.params.id }}</h2> -->
      </div>
    </div>
  </div>
</template>

<script>
import projects from '../../data/locations';
export default {
  name: "ProjectsDetail",
  data () {
    return {
      projectIndex: this.$route.params.id,
      projectInfo: projects [this.$route.params.id],
    }
  },

  // computed: {
  //   projectInfo () {
  //     return projects [this.$route.params.id];
  //   }
  // },
  // props: {
  //   id: {
  //     required: true,
  //     type: String
  //   }
  // },
  }
    </script>

Thank you in advance for your help.

---

Here is the parent component

<template>
    <router-link :to="{ name: 'projects-detail', params: { id: project.id, project: project }}">
        <div>
            <img
                :src="project.img"
                :alt="project.name"
                class="rounded-t-xl border-none"
            />
        </div>
        <div class="text-center px-4 py-6">
            <p
                class="font-general-semibold text-xl text-ternary-dark dark:text-ternary-light font-semibold mb-2"
            >
                {{ project.title }}
            </p>
            <span class="font-general-medium text-lg text-ternary-dark dark:text-ternary-light">
                <i class="text-indigo-600 dark:text-indigo-300 lni lni-map-marker mr-2"></i>
                {{ project.location }}
            </span>
            <p
                class="mt-4 font-general-semibold text-base text-ternary-dark dark:text-ternary-light font-semibold mb-2"
            >
                {{ Number (project.price).toLocaleString() }} {{currency}} / {{ project.period }}
            </p>
        </div>
    </router-link>
</template>

<script>

export default {
  data () {
    return {
      currency: 'FCFA',
    }
  },
    props: ['project'],
};
</script>