如何在vue.js组件中激活另一个模态时打开引导模式？

Question

我有3个vue组件

我的第一个组件（MultiplePhoto.vue）：

<template>
    <div>
        <table class="table table-bordered table-thumb">
            <tr>
                <template v-for="item in items">
                    <td data-target="#modal-option" data-toggle="modal"> 
                        ...
                    </td>
                </template>
                <option-modal id="modal-option" :product="product"></option-modal>
            </tr>
        </table>
    </div>
</template>
<script>
    import OptionModal from './OptionModal.vue'
    export default {
        name: 'MultiplePhoto',
        props: ['product'],
        components: { OptionModal },
        data() {
            return {
                items: [1,2,3,4,5]
            }
        },
        ...
    }
</script>

如果我点击td标记，它会成功显示模态（OptionModal组件）

我的第二个组件（OptionModal.vue）：

<template>
    <div class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <div class="col-sm-9">
                                <a data-target="#modal-edit-photo" data-toggle="modal">Edit</a>
                            </div>
                        </div>
                        ...
                    </div>
                </div>
            </div>
        </div>
        <edit-image-modal id="modal-edit-photo" :id-product="product.id"></edit-image-modal>
    </div>
</template>

<script>
    import EditImageModal from './EditImageModal.vue'
    export default{
        name: 'OptionModal',
        props: ['product'],
        components: { EditImageModal},
        ....
    }
</script>

在OptionModal组件中，如果我单击a标签，它标签不显示模态（EditImageModal组件）

我的第三个组成部分（EditImageModal.vue）：

<template>
    <div class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                ....
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'EditImageModal',
        ,,,
    }
</script>

没有错误。我仍然对如何解决问题感到困惑。

我该如何解决这个问题？

请帮帮我