VUE重复修改属性值页面无法及时渲染问题

最近在做VUE项目时遇到一个坑。a方法修改某一属性的值后，调用b方法，b方法里面修改同一属性，虽然该属性的值已发生变化，但是一直无法及时渲染到页面上

例如：

data(){
   return {
      i:0
   }
},

js方法：

a(){
          var that=this;
          that.i=1;
          that.b();
},
b(){
          var that=this;
          var i=2;
          that.i=i;
          console.log(that.i)
}

虽然最后输出的i是2，但是页面上渲染的经常是1；后来通过查资料发现可以通过set方法来解决这个问题js如下

that.$set(that,'i',i);

当数据层次不多时这样做是可以实现实时渲染；但当数据层级比较多的时候需要手动调用rander函数进行自动更新，如下：

that.$forceUpdate();
that.$set(that,'i',i)