使用v-b-modal指令和@click

Question

我是Vue和Bootstrap的新手，我有一个像这样的按钮：

<button
    type="button"
    class="btn btn-warning btn-sm"
    v-b-modal.book-update-modal
    @click="editBook(book)">
Update</button>

@click绑定到方法editBook()

export default {
  data() {
    return {
      books: [],      
      editForm: {
        id: "",
        title: "",
        author: "",
        read: []
      },
      message: "",
      showMessage: false
    };
  },
methods: {
  function editBook(book){
      this.editForm = book;
  }
}

问题是，当我单击此button时，除非再次单击，否则不会显示模式。当我从@click元素中删除button绑定时，它很好用。

我不知道哪里出了问题。任何帮助将不胜感激。

----编辑----

我删除了v-b-modal.book-update-modal并将this.$refs.editBookModal.show();添加到editBook(book)方法中，单击该按钮效果很好。但是我仍然很好奇为什么设置v-b-modal.book-update-modal时需要双击按钮才能显示模型。