Как динамически передавать данные из бэкенда в модальное окно vue.js?

Только начала изучать vue, решила закрепить базовые знания на практике и столкнулась со следующей проблемой. Есть карточки о различных фильмах, информация передается из бэкенда через axios, сами карточки рендерятся корректно. К кнопке "подробнее" привязано модальное окно, которое должно показывать более детальную информацию о фильме. Соответственно у каждой карточки должно быть свое модальное окно с информацией. Если при открытии модального окна просто отправляю запрос на бэкенд и так же как и в карточке с помощью директивы v-for передаю данные, то при нажатии на разные карточки появляется одна и та же информация. Если кто знает как решить данную задачу, помогите пожалуйста. Ниже представлен код карточки, в которой находится кнопка и код модального окна

//Card
<script setup>
import { ref, watch } from 'vue';
import axios from 'axios';
import Modal from './Modal.vue';
const showModal = ref(false);
const items = ref([]);
watch(showModal, async () => {
  const { data } = await axios.get('https://2f805f19f5528046.mokky.dev/items');
  items.value = data;
});
defineProps({
  raiting: Number,
  imgUrl: String,
  title: String,
  subtitle: String,
  country: String,
});

</script>

<template>
  <div class="transition flex flex-col justify-between items-center hover:-translate-y-4 mb-10 hover:opacity-70">
    <div class="relative">
      <div class="absolute top-6 -left-36 px-3 py-1 rounded-full bg-gray-950 border border-yellow-500">
        <span class="leading-10 text-white text-xl text-center">{{ raiting }}</span>
      </div>
    </div>
      <img :src="imgUrl" alt="img">
    <div class="text-center">
      <div class="text-white text-2xl font-bold">{{ title }}</div>
      <p class="text-base text-yellow-400">{{ subtitle }}</p>
    </div>
    <button @click="showModal = true" class="flex items-center justify-center gap-2 mt-2 cursor-pointer">
      <p class="text-white">Подробнее</p>
      <img src="/public/arrow-right.png" alt="">
  </button>
  <Teleport to='body'>
    <Modal
    :show="showModal" @close="showModal = false"
    v-for="item in items"
    :key="item.kinopoiskId"
    :title="item.nameRu"
    :genre="item.genre"
    :img="item.posterUrlPreview"
    :country="item.country"
    :year="item.year"
    :text="item.description"
    >
    </Modal>
    
    </Teleport>
  </div>
 
</template>

    ```
//Modal

<script setup>
 defineProps({
  show: Boolean,
  title: String,
  genre: String,
  year: Number,
  text: String,
  country: String,
  img: String
});

</script>

<template>
  <transition name="modal">
    <div v-if="show" class="rounded-xl fixed z-50 top-32 left-52 h-4/5 w-4/5 transition bg-neutral-700 uppercase">
      <div class="w-11/12 m-auto transition pt-10" >
        <div class="mb-10">
             <button class="btn" @click="$emit('close')">
              <img src="/public/close (2).png" alt="close">
             </button>
        </div>

        <div>
          <div class=" flex flex-start gap-20">
              <img :src="img" alt="img">
            <ul>
              <li>Название: {{ title }}</li>
              <li>Cтрана: {{ country }}</li>
              <li>Жанр: {{ genre }}</li>
              <li>Год выпуска: {{ year }}</li>
              <li class="mt-20">
                <p class="mb-5">Описание</p>
                <p class="lowercase w-11/12 p">{{ text }}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </transition>