如何访问组件内有重复名称的popover元素？

<template>
  <div>
    <button @click="showPopover('popover1')">Popover 1</button>
    <button @click="showPopover('popover2')">Popover 2</button>
    <div ref="popover1" class="popover">Popover 1 Content</div>
    <div ref="popover2" class="popover">Popover 2 Content</div>
  </div>
</template>

<script>
export default {
  methods: {
    showPopover(refName) {
      this.$refs[refName].show();
    }
  }
}
</script>

<template>
  <div>
    <button @click="showPopover('.popover1')">Popover 1</button>
    <button @click="showPopover('.popover2')">Popover 2</button>
    <div class="popover1 popover">Popover 1 Content</div>
    <div class="popover2 popover">Popover 2 Content</div>
  </div>
</template>

<script>
export default {
  methods: {
    showPopover(selector) {
      const popover = document.querySelector(selector);
      popover.style.display = 'block';
    }
  }
}
</script>

<template>
  <div>
    <button v-for="(item, index) in popovers" :key="index" @click="showPopover(index)">{{ item }}</button>
    <div v-for="(item, index) in popovers" :key="index" class="popover">{{ item }} Content</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      popovers: ['Popover 1', 'Popover 2']
    };
  },
  methods: {
    showPopover(index) {
      const popover = this.$refs.popovers[index];
      popover.show();
    }
  }
}
</script>