模态窗口未激活

我使用这个例子创建了一个模态窗口：

提琴手

在模态中，我从表中发送数据。我的代码：

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
        <!--begin modal  -->
        <div id="my-modal" class="modal fade">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Item Clicked!</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        Text:{{text}}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary">Save changes</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
  <!--end modal -->


    <table class="table table-condensed">
        <thead>
        <tr>
            <th>id</th>
            <th>task</th>
            <th>date</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="row in tasks">

            <td span @mouseover="showButtonFunction"  @mouseleave="hideButtonFunction">    {{row.id}}</td>
            <td span @mouseover="showButtonFunction"  @mouseleave="hideButtonFunction">
                {{row.text}}
                <a data-toggle="modal" :data-target="'#myModal' + row.id" @click="itemClicked(row)">Edit from git</a>
            </td>
            <td span @mouseover="showButtonFunction"  @mouseleave="hideButtonFunction">    {{row.date_current}}</td>

        </tr>
        </tbody>
    </table>
</div>

但由于某种原因，模态窗口未激活：在此处输入链接描述

如何解决？由于某种原因，该窗口未处于活动状态。脚本文本她，仅部分用于 modal ：

Script:
<script type="text/javascript">
    //send post and open menu
    new Vue({
        el: '#app6',
        data:{
            tasks:[],
            fields:[
                'id','text','date',
            ],
            text:'',
            id:'',
            active: true,              
        },
        methods: {

            itemClicked: function(item) {
                this.id = item.id;
                this.text = item.text;
              //  console.log(item.id);
                $("#my-modal").modal('show');
            }
               //open edit windows
        }
    })

文本雾得到最小限制。