Computed Property not rerendering

Question

When a component data value ( which is array with objects ) changes the computed property is not affected.

In the example below, I have a table that is filled with some data ( it is tasks in different statuses with titles ). If you click on a task and you click the button 'CHANGE TASK INFO' it will change the current task selected to

{
    Status = QA Review
    Title = TEST
}

However if you comment the 99,100 lines and uncomment the 96 line the things are not the same anymore if you try to click the button with a different task selected the task is updated in the 'tasks' variable of the component but never rerendered by the computed prop.

Any ideas ?

SB https://codesandbox.io/s/vue-table-test-enviroment-bx1sd?file=/src/components/HelloWorld.vue

Answer 1

Vue is not able to detect changes if you replace an array item by index (see Reactivity in Depth).

The solution is simple:

this.$set(this.tasks, indexOfUpdatedTask, test);