使用vue js首次单击时未打开bootstrap 4 modal

Question

当我按下按钮时，我的bootstrap 4模态没有显示，但是我的计算属性是被触发的（从控制台）

这是我的模板代码

<form>
    <!-- button that triggers the modal -->
    <div id="btnBereken">
      <a
        class="btn btn-success btn-lg"
        data-target="#exampleModal"
        v-on:click="Vali"
        v-bind:data-toggle="Validation"
      >Bereken</a>
    </div>
  </div>
</form>
<!--modal itself-->
<div
  class="modal fade"
  id="exampleModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
  v-show="Ok"
></div>

这是我的脚本代码，我有一个方法和一个计算的属性，它们链接到我的按钮的data-toggle

Vali: async function(){
  this.Ok =true;
}

和我的计算属性

Validation() {
  if (this.Ok) {
    console.log("getriggerd");
    return "modal";
  }
}

当我按下按钮一次时，弹出窗口不会触发，但是第二次会触发，并且this.Ok的值会在控制台和VueJS开发工具中更新