[Vuejs]-VueJs array of objects watcher not updating when object property changes

Vue.js cannot detect mutations to array when you change any item or sub-field of a item using direct index access.

To do this, you can use set method of Vue object:

// Vue.set
const index = 0;
const newValue = { ...this.users[index], name: 'Mary' };

Vue.set(this.users, index, newValue);

Or, you can simply use manipulate array using splice method which is internally over-riden by Vue.js:

const index = 0;
const newValue = { ...this.users[index], name: 'Mary' };

// Using array manipulation
this.users.splice(index, 1, newValue);

Or, you can use immutable data practice as:

const newArray = [...this.users];
const newValue = { ...this.users[0], name: 'Mary' };
newArray[0] = newValue;

this.users = newArray;