boostrap模态框无法用vue绑定点击事件

//绑定的点击事件的位置
 <div class="modal-footer">
          <button type="submit" class="btn btn-secondary" data-dismiss="modal"   v-on:click="sub" id="sub">提交</button>
          <button type="button" class="btn btn-primary" id="cancel" >取消</button>
        </div>
     $(function(){
//使用jquery点击事件可以执行
    // $('#sub').click(function(){
    //     alert("dafjlh");
    // });
    axios.defaults.baseURL = "http://rbac/index/index";
    new Vue({
       el:"#box",
        data(){
           return{
               tds:[]
           }
        },
//绑定点击事件输出的位置
        methods:{
            sub(){
                alert("dfsf");
            },
}

用这种方式解决还是不行
.modal-dialog{
pointer-events: auto;
}

是方法不执行，还是其他啥情况