What are the caveats of object changes detection?

Vue cannot detect changes for the object in property addition or deletion.

Lets take an example of user data changes,

var vm = new Vue({
data: {
user: {
name: 'John'
}
}
})

// `vm.user.name` is now reactive

vm.user.email = john@email.com // `vm.user.email` is NOT reactive

You can overcome this scenario using the Vue.set(object, key, value) method or Object.assign(),

Vue.set(vm.user, 'email', 'john@email.com');
// (or)
vm.user = Object.assign({}, vm.user, {
email: john@email.com
})