Vue.js 2でBootstrapのmodalを開閉する方法

SampleModal.vue

<template lang="pug">
  .modal(v-show="value")
    .modal-dialog
      .modal-content
        .modal-header
          button.close(type="button", @click="close"): span &times;
          h4.modal-title サンプルモーダル
        .modal-body
          ハローワールド
        .modal-footer
          button.btn.btn-default(type="button", @click="close") 閉じる
</template>

<script>
export default {
  name: 'sample-modal',
  props: {
    value: {type: Boolean, required: false, default: false} // 開閉状態
  },
  methods: {
    close: function () {
      // 開閉状態をfalseにする
      this.$emit('input', false)
    }
  }
}
</script>

SamplePage.vue

<template lang="pug">
  div
    button(type="button" @click="openSampleModal")
    sample-modal(v-model="SampleModaiIsOpen")
</template>

<script>
import SampleModal from @/SampleModal
export default {
  name: 'sample-page',
  components: { SampleModal },
  data: function () {
    sampleModalIsOpen: false
  },
  methods: {
    openSampleModal: function () {
        this.sampelModalIsOpen = true
    }
  }
}
</script>

valueという名前が嫌なら任意の名前に変えてもOK。
以下2つは同じことなので。

input(v-model="sampleModalIsOpen")

input(
  :value="sampleModalIsOpen"
  @input="sampleModalIsOpen = $event.target.value"
)

↓

input(
  :isOpen="sampleModalIsOpen"
  @input="sampleModalIsOpen = $event.target.value"
)