在vue中 更改数组和对对象 但是页面不重新渲染

在这个确实已经更改数据成功了 但是vue没有重新渲染页面，好像没监听到数据改变一样
这时候最粗鲁的做法是在更改数据之后强行触发vue重新渲染页面
this.$forceUpdate();

对象操作未渲染

  <div id="box">
        <h2> {{obj.name}}--{{obj.age}} </h2>
        <button @click="butClick">切换</button>
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                obj:{
                    name:"吕浩",
                    age:"20"
                }
            },
            methods:{
                butClick(){
                    this.$set(this.obj,"name","小明");//更改对象属性
                    this.$delete(this.obj,"name");//删除对象某个属性
                }
            }
        })
    </script>

数组操作未未渲染

 <div id="box">
        <p v-for="i of arr">{{i}} </p>
        <button @click="butClick">切换</button>
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                arr:["a","b","c"]
            },
            methods:{
                butClick(){
                   this.arr.push("要插入的内容");//数组添加可直接渲染
                   this.arr.splice("下标",1);//删除可以直接渲染
                   this.arr[3]="内容";//设置成功不渲染
                   this.$forceUpdate();//强行渲染
                }
            }
        })
    </script>