I am trying to show an AJAX response in a popover displayed by an icon (a custom Vue component which I wrote) when it is clicked. There are multiple instances of this component, which are rendered dynamically using the v-for directive in a table:

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: ...

The problem is that when I click on one of these components ( which should show a popover with text coming fron an API call) and then I click on a second one without closing the first, the data looks like shared and not uniquely assigned to that specific instance of the component. I am also attaching an image to express things in clearer way (the API response is here replaced by table name) . Thanks for the support.