Estoy tratando de mostrar una respuesta AJAX en una ventana emergente que se muestra con un icono (un componente personalizado de Vue que escribí) cuando se hace clic en él. Hay varias instancias de este componente, que se representan dinámicamente mediante la directiva v-for en una tabla:

ParentComponent.vue

 ... <tr v-for="(table, index) in tables" :key="index"> <th scope="row">{{ index + 1 }}</th> <td scope="row"> {{ table }} </td> <th scope="row"> <Popover :popoverData="popoverData" @on-click="previewTable(table)" /> </tr> ... async previewTable(table) { const response = await axios.get(RestApi + `/${table}`); this.popoverData = response.data; }

Popover.vue

 <template> <button class="btn" ref="button" aria-describedby="tooltip" @click='this.$emit("onClick")'> <i class="fa-solid fa-magnifying-glass"></i> </button> <div id="tooltip" ref="tooltip" role="tooltip"> {{ popoverData }} </div> </template> <script> import { createPopper } from "@popperjs/core"; export default { data() { return {}; }, props: { popoverData: String }, mounted: ...

El problema es que cuando hago clic en uno de estos componentes (que debería mostrar una ventana emergente con texto proveniente de una llamada API) y luego hago clic en un segundo sin cerrar el primero, los datos parecen compartidos y no asignados de forma exclusiva a ese instancia específica del componente. También adjunto una imagen para expresar las cosas de una manera más clara (la respuesta de la API se reemplaza aquí por el nombre de la tabla). Gracias por el apoyo.