vue+bootstrap 把Modal抽成组件，data-dismiss失效

Question

代码用的vue+bootstrap 把Modal抽成了组件，但是data-dismiss失效了，
点击弹窗的X和取消都没有效果，又不想每次都写个方法，
请问是什么没引入吗？有什么解决方案呀？

X和取消点击都没反应

Modal.vue

<template>
    <div class='modal fade' :class="{'show': modal.show}" :style="{display: modal.show ? 'block' : 'none'}" id='successModal' tabindex='-1' role='dialog' aria-labelledby='exampleModalLabel' aria-hidden='true'>
      <div class='modal-dialog modal-dialog-centered' role='document'>
        <div class='modal-content'>
          <div class='modal-header'>
            <h5 class='modal-title' id='exampleModalLabel'>提示</h5>
            <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
              <span aria-hidden='true'>&times;</span>
            </button>
          </div>
          <div class='modal-body'>
            {{modal.contain}}
          </div>
          <div class='modal-footer'>
            <button type='button' class='btn bg-blueButton' @click="modalClickHandler">确定</button>
            <button v-show="modal.cancel" type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          </div>
        </div>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: ['modal'],
    methods: {
      modalClickHandler() {
        this.$emit('modalClick');
      }
    }
  };
</script>

<style scoped>
</style>

index.vue

template：

<v-modal :modal="modal" @modalClick="modalClickHandler"></v-modal>

js

import modal from '../../components/modal/modal';

  export default {
    data() {
      return {
        modal: {
          contain: '确定要退出登录吗？',
          cancel: true,
          show: false
        }
      };
    },
    methods: {
      logoutModalHandler() {
        this.modal.show = true;
      },
      modalClickHandler() {
        this.modal.show = false;
        axios.get(this.NET.API_HOST + '/v1/user/logout')
          .then(response => {
              console.log(response);
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    components: {
      'v-modal': modal
    }
  };