как мне получить продукт по id и вывести информацию об этом продукте в отдельной карточке(странице)

глупый наверно вопрос но, я не могу разобраться как мне получить продукт по id и вывести информацию об этом продукте в отдельной карточке(странице). Реализация на vue composition api.

router

{
  path: '/product/:id',
  name: 'CartProduct',
  component: () => import('@/pages/product/ui.vue'),
}

CardList.vue

<template>
<div class="cards">
  <RouterLink :to="{name: 'CartProduct', params: {id: id.id}}" >
    <Card
          v-for="item in items"
          :key="item.id"
          :id="item.id"
          :title="item.title"
          :imageUrl="item.imageUrl"
          :price="item.price"
          :onClickAdd="() => emit('addToCart', item)"
          :isAdded="item.isAdded"
      />        
  </RouterLink>
</div>      
</template>

<script setup>
  import Card from './Card.vue';

  defineProps({
      items: Array
  });
  
  const emit = defineEmits(['addToCart'])
  
 </script>

Product.vue

<template>
<div class="product">
    <h1>{{ id }}</h1>
        <img class="card__img" :src="imageUrl" alt="Flowers">
      <p style="font-size: 20px; padding: 10px 0;" class="card__title">{{title}}</p>
      <div class="desc">
        <div>
          <span class="desc__price">Цена:</span>
          <p class="desc__money">{{price}} руб.</p>
        </div>
      </div>
      </div>
      <CardList :items="items" />
      <routerVue></routerVue>
</template>

<script setup>
  import { ref } from "vue"
  import CardList from '@/components/CardList.vue';


  defineProps({
      id:Number,
      title: String,
      imageUrl:String,
      price: Number,
  })

  const items = ref([])