Vue Sortable数组未正确更新

Question

我有一个带有简单列表的可排序列表。 当我尝试对列表进行排序时，控制台上的数组输出是正确的，但是组件上的ul没有正确更新。 如果我注释行以新顺序更新数组，则组件上的列表看起来正确。 有人可以帮帮我吗？我坚持了两天！ 您可以在这里查看发生了什么： https://jsfiddle.net/vq1ghbs0/5/

Vue.directive('sortable', {
twoWay:true,
        inserted: function (el) {
            var sortable = new Sortable(el, options)
            if (this.arg && !this.vm.sortable) {
                this.vm.sortable = {}
            }

            //  Throw an error if the given ID is not unique
            if (this.arg && this.vm.sortable[this.arg]) {
                console.warn('[vue-sortable] cannot set already defined sortable id: \'' + this.arg + '\'')
            } else if( this.arg ) {
                this.vm.sortable[this.arg] = sortable
            }
        },

        bind: function (el, binding) {
            this.options = binding.value || {};
        }
    })
Vue.component('stages-component', {
data: function () {
    return {
        list: [
                {
                    "name" : "A",
                },
                {
                    "name": "B",
                },
                {
                    "name": "D",
                    },
                    {
                    "name": "C"
                },
        ]
    };
},
methods: {
    onUpdate: function (event) {
    this.list.splice(event.newIndex, 0, this.list.splice(event.oldIndex, 1)[0]);
    console.log(this.list);
    },
}


});

new Vue({
el: "#app",
})

谢谢！