vue项目，多层数据嵌套，底层数据更新，页面无法更新

做一个项目，就是那种套了三四层数据的数据结构，当我改变最底层的数据时，数据都改变好了，页面没有实时更新。
众所周知，就是因为vue2不能监听到没有在data里面就定义好的数据，所以，当改变数组和对象的值时，视图层不能实时更新。

我用到的大概就这样子的数据结构：

大概模拟下：

obj:{
	name:"xxx",
	age:"18",
	units:[
		{
			id:"123",
			datas:[
				{color:"red",title:"新闻1",class:"三班"},
				{color:"pink",title:"新闻2",class:"三班"}
				{color:"yellow",title:"新闻3",class:"三班"}
			]
		},
		{
			id:"456",
			datas:[
				{color:"red",title:"新闻1",class:"三班"},
				{color:"pink",title:"新闻2",class:"三班"}
				{color:"yellow",title:"新闻3",class:"三班"}
			]
		}
	]
}

当我替换datas里面的任意一个对象护着对象里面的属性时，数据发生变更，视图没有响应。
尝试了vue.set方法，也尝试了所说的强制更新this.$forceUpdate();好像是没啥卵用。有看到有个博主说是用v-if控制条件的变动来渲染组件或者页面。好像有的场景不太能用。

最终解决方案：
给obj动态添加一个每次都变动的属性(给它搞个随机数)，然后你下层的数据只要更新，视图就是会更新。

重点代码如下：

注意：代码中的id和index是我循环用到的索引，你可以暂时替换为你指定的索引尝试下。

      this.$nextTick(() => {
      				//添加变动的属性给第一层的对象，至关重要
                   this.$set(
                     this.obj,
                     Math.random(),Math.random()  
                  );
                  //修改最下层的datas中的对象。
                    this.obj.units[i].datas[index] = Object.assign({},  this.obj.units[i].datas[index], {color:"blue",title:"宫格1",class:"五班"})
                });

希望对你有帮助~