我有一个v-for循环，它遍历一系列会议（二手汽车卖家和潜在买家之间的会议），并为每次会议打印一张卡片，基本显示会议的参加者、会议的主题和预定日期。现在，我实现了一个按钮，当单击该按钮时，将打开一个带有Google Maps组件的对话框，显示商定的会议地点的标记。
我的问题是，无论我点击哪张卡片，对话框总是显示最后一张卡片的位置，而不管我点击了哪张卡片。我认为既然我在v-for循环中调用了组件，它就会在每次迭代中为每张卡片动态传递属性，但事实似乎并非如此。
下面是HTML：

<div
      v-for="meeting in meetings"
      :key="meeting.did"
      class="col-12 col-md-6 col-lg-3 q-pa-md q-mx-xl"
    >
      <q-card class="my-card homeCard q-pa-md">
        <q-dialog class="mapDialog flex column" v-model="mapDialog">
          <MeetMapComponent
            :key="componentKey"
            :mapDiv="mapDiv"
            :mapData="meeting.address"
            :buyerName="meeting.name"
          />
        </q-dialog>
        <q-card-section
          class="tipCardImage flex row justify-end"
          :style="`background-image: url(${meeting.car.carImg})`"
        >
          <router-link
            :to="`/user/meet/edit/${meeting.did}`"
            style="text-decoration: none"
          >
            <q-icon
              @click="fetchMeeting(meeting.did)"
              name="fa-solid fa-pencil editNameIcon q-mb-sm q-ml-sm"
            ></q-icon>
          </router-link>
          <q-icon
            name="fa-solid fa-trash editNameIcon q-mb-sm q-ml-sm"
            @click="triggerDelete(meeting.did)"
          ></q-icon>
        </q-card-section>

        <q-card-section>
          <div class="cardTitle">
            <span>Encuentro Con</span> {{ truncateString(meeting.name, 30) }}
          </div>
          <div class="tipCardText">
            <span>Agendado para el </span>
            <p>{{ truncateString(meeting.date, 120) }}</p>
          </div>
          <div class="flex row justify-end">
            <q-btn
              @click="mapDialog = true"
              class="text-white cardButton"
              :class="{ cardButtonMobile: $q.screen.lt.md }"
              >Ver Ubicación</q-btn
            >
          </div>
        </q-card-section>
      </q-card>
    </div>

下面是MeetMapComponent的代码：

<template>
  <div class="meetMapContainer">
    <div ref="mapDiv" style="width: 100%; height: 500px" />
    <h5 class="text-center text-white">{{ props.mapData.address }}</h5>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useAuthStore } from "stores/auth";
import { storeToRefs } from "pinia";
import { Loader } from "@googlemaps/js-api-loader";

const props = defineProps({
  mapData: Object,
  buyerName: String,
});

const GOOGLE_MAPS_API_KEY = "...";
const loader = new Loader({ apiKey: GOOGLE_MAPS_API_KEY });
const mapDiv = ref(null);
async function mapRender() {
  await loader.load();
  const map = new google.maps.Map(mapDiv.value, {
    mapTypeId: "roadmap",
    center: props.mapData.coordinates,
    zoom: 13,
  });
  console.log(map);
  new google.maps.Marker({
    position: props.mapData.coordinates,
    map,
    title: `Encuentro con ${props.buyerName}`,
  });
}

mapRender();
</script>