javascript - vue jsでb-popoverターゲットを動的に設定するにはどうすればよいですか?

Question

ユーザーが1つのポップオーバーコンポーネントを使用してクリックした各状態の詳細を表示したい。すべてのデータは、状態 ID を使用して動的に設定されます。

今私の問題は、ターゲットを動的に設定できないことです。ユーザーがクリックしたポップオーバー ターゲットを設定したい。

私は以下のこのコードを試しました

<template>
  <div class="d-flex flex-column text-md-center">
    <div class="p-2">
      <b-btn id="texas" variant="primary" @click="onOpen">Details</b-btn>
      <b-btn id="california" variant="primary" @click="onOpen">Details</b-btn>
      <b-btn id="florida" variant="primary" @click="onOpen">Details</b-btn>
      <b-btn id="ohio" variant="primary" @click="onOpen">Details</b-btn>
    </div>

    <b-popover ref="popover" target="{{id}}" title="Popover">
      Hello <strong>{{id}}</strong>
    </b-popover>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        id:  ''
      }
    },
    methods: {
      onOpen(e) {
        this.id = e.target.id;
        this.$root.$emit('bv::show::popover',e.target.id);
      },
    }
  }
</script>