vue 数据刷新后，页面没有联动更新

vue 数据刷新后，页面没有联动更新

因为vue有个就近原则，只会刷新部分内容而不更新整体，这时可以给容器加一个key去动态获取，
如下加了一个key=getTime，通过watch去监听

//表格自定义列顺序
Vue.component('table-cols-sort', {
    data: function(){
        return{
            getTime: new Date().getTime()
        }
    },
    props: ['data'],
    template: `<div class="cols-sort layui-form" lay-filter="cols-sort" :key="getTime">
                <div class="">
                    <div class="col-sort-save" @click="colSortSave">保存</div>
                    <div class="layui-icon layui-icon-close col-sort-close" @click="colSortClose"></div>
                    <div class="clear"></div>
                </div>
                <div class="col-sort selected" v-for="(item,index) in data.cols[0]" :key="index">
                    <input type="checkbox" lay-filter="colSort" :data-index="index" :name="item.field" lay-skin="primary" :title="item.title" checked="">
                </div>
            </div>`,
    watch:{
        data: {
            handler:function(val,oldval){
                this.getTime = new Date().getTime()
            },
            deep: true//对象内部的属性监听，也叫深度监听
        }
    },
    mounted: function() {

    },
    updated: function() {
        console.log("updated");
    },
    methods: {
        
    }
})