element el-popover 使用v-if 控制显示/隐藏，当条件变化时，里面有部分内容无法显示

先上效果图：

贴上我的代码：

 <span v-if="!isBin" class="chat-btn">
        <el-popover
          v-if="!isBin"
          v-model="popoverVisable"   // 通过改变 v-model 绑定的属性值，来控制显示隐藏
          placement="right"
          width="181"
          popper-class="bind-card-popover"
          trigger="manual"
        >
          <div v-if="!isBin" class="con">点击这里尽快绑定学员名片哦~</div>
          <el-button
            v-if="!isBin"
            slot="reference"
            type="primary"
            size="mini"
            @click="(popoverVisable = true), (show = true)"
          >
            绑定名片
          </el-button>
        </el-popover>
        <!-- <el-button slot="reference" type="primary" size="mini" @click="show = true">
          绑定名片
        </el-button> -->
      </span>

这里是使用 el-popover 来写的，我们要根据条件来渲染图片中的内容，但是发现 当v-if条件变化时，虽然 v-if绑定的值已经拿到了，但是像我的代码中的button就是不渲染。
解决办法： 使用 v-model来控制渲染，就能解决button 不渲染的问题。
在data中定义一个属性 popoverVisable:false,然后去改变这属性，来控制显示。
贴上我的写法：

   popoverhiddleToShow() {
      this.popoverVisable = false;
      setTimeout(() => {
        this.popoverVisable = true;
      }, 200);
    

可以使用watch监控判断的条件，当条件变化时来调用这个函数，改变这个属性，以达到是否渲染显示的效果。
如果一开始就要判断是否渲染可以在 mounted这个生命周期中来改变属性值。

  mounted() {
    setTimeout(() => {
      this.popoverVisable = true;
    }, 200);
  },