The problem that the view is not updated when the object property changes in vue

Normally, we set the response data in the data of the vue instance. But when the data is an object, and we add or delete the property value of the object, the view does not trigger an update. How to solve this problem?

let vm = new Vue{

   el: '#app',

   data: {

    obj: {k: 'v'}

  }, ...

}

 

There are three solutions: 
Solution 1: Use Vue.set(object,key,val)

例：Vue.set(vm.obj,'k1','v1')

Option 2: Use this.$set(this.obj,key,val)

this.$set(this.obj,'k1','v1')

Option 3: Use Object.assign({}, this.obj) to create a new object

例： this.obj.k1='v1'； this.obj = Object.assign({}, this.obj) 或 this.obj = Object.assign({}, this.obj,{'k1','v1'})