如何将同一个弹出框用于多个目标？

Question

我正在尝试将vue bootstrap弹出框用于vue js 2.x中的多个目标。我能够动态更改目标属性，但它始终始终以最后一个目标为目标。弹出控件是否可以实现？示例代码如下：

JSFiddle Sample is here

我的示例代码如下：

new Vue({
  el: '#app',

  data: {
    name: '',
    email: '',
    popover: {
      target: '',
      show: false,
      message: ''
    }
  },
  methods: {
    callPopover() {
      setTimeout(() => {
        this.setPopover()
      }, 3000)
    },
    setPopover() {
      this.popover.target = 'txtName'
      this.popover.show = true
      if (!this.name) {
        this.popover.message = 'please enter your name to register!!'
      } else if (this.name === 'John') {
        this.popover.message = 'Hey John!!'
      } else if (!this.email) {
        this.popover.target = 'txtEmail'
        this.popover.message = 'email example is xx@yy.com'
      } else {
        this.popover.target = 'txtEmail'
        this.popover.message = 'thanks for entering details!!'
      }
    },
    onClosePopover() {
      this.popover.show = false
    }
  },
  mounted() {
    this.callPopover()
  }
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
  <b-row class="mb-2 mt-4 ml-4">
    <b-col cols="6">
      <b-form-input id="txtName" v-model="name" type="text" placeholder="Enter your name"></b-form-input>
    </b-col>
    <b-col cols="6">
    </b-col>
  </b-row>
  <b-row class="mb-2  ml-4">
    <b-col cols="6">
      <b-form-input id="txtEmail" v-model="email" type="email" placeholder="Enter your email"></b-form-input>
    </b-col>
    <b-col cols="6">
       <b-btn @click="setPopover"> Show popover</b-btn>
    </b-col>
  </b-row>


  <b-popover :target="popover.target" :show.sync="popover.show" triggers="" placement="topright">
    <div class="popover-body">
      <p>{{popover.message}}</p>
      <div class="d-flex justify-content-center">
        <b-btn @click="onClosePopover" size="sm"> gotcha!!</b-btn>
      </div>
    </div>
  </b-popover>
</div>