Vuejs Dom Doesn't Refresh When Array Changed

I have a custom directive called 'sortable' but I ran into a problem with the DOM. The problem is when I dragged and dropped an item the array is changed but the DOM isn't. This is

Solution 1:

As per the documentation, the following methods will trigger view updates. The wrapped methods are:

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

However I see you are also doing this assignment in calculateCosts method, which will not trigger the mutation, due to caveats in vue:

this.tasks[index].costs = event.target.value * value;

This can be replaced with the following to trigger the mutation and update the view with the help of Object.assign and Vue.set:

var newVal = Object.assign({}, this.tasks[index], {costs: event.target.value * value})
Vue.set(this.tasks, index, newVal)

Solution 2:

To make vue recept it, use a proper unique key from the array value, not the array index:

<!-- use value.id in :key, not index --><divv-for="(value, index) in values":key="value.id"> .... </div>