javascript - Update array order in Vue.js after DOM change -

i have basic vue.js object:

var playlist = new vue({     el : '#playlist',     data : {         entries : [             { title : 'oh no' },             { title : 'let out' },             { title : 'that\'s right' },             { title : 'jump on stage' },             { title : 'this remix' }         ]     } }); 

html:

<div id="playlist">     <div v-for="entry in entries">         {{ entry.title }}     </div> </div> 

i using drag , drop library (dragula) allow users rearrange #playlist div.

however, after user rearranges playlist using dragula, change not reflected in vue's playlist.entries, in dom.

i have hooked dragula events determine starting index , ending index of moved element. what correct way go updating vue object reflect new order?

fiddle: https://jsfiddle.net/cxx77kco/5/

vue's v-for not track modifications dom elements creates. so, need update model when dragula notifies of change. here's working fiddle: https://jsfiddle.net/hsnvweov/

var playlist = new vue({     el : '#playlist',     data : {         entries : [             { title : 'oh no' },             { title : 'let out' },             { title : 'that\'s right' },             { title : 'jump on stage' },             { title : 'this remix' }         ]     },     ready: function() {         var self = this;         var = null;         var drake = dragula([document.queryselector('#playlist')]);          drake.on('drag', function(element, source) {             var index = [].indexof.call(element.parentnode.children, element);             console.log('drag from', index, element, source);             = index;         })          drake.on('drop', function(element, target, source, sibling) {             var index = [].indexof.call(element.parentnode.children, element)             console.log('drop to', index, element, target, source, sibling);              self.entries.splice(index, 0, self.entries.splice(from, 1)[0]);              console.log('vue thinks order is:', playlist.entries.map(e => e.title ).join(', ')             );         })     } });