Vue 检测不到数组或对象的变化怎么办?

html：

<div id="box">
    <ul>
      <li v-for="item in arr" :key="item">{{item}}</li>
      <button @click="add">添加</button>
      <p>
        {{obj.name}}
      </p>
      <p>
        {{obj.sex}}
      </p>
      <button @click="addObj">添加</button>
    </ul>
  </div>

js：

new Vue({
      data: {
        arr: ['张飞', '关羽', '刘备'],
        obj: {
          name: '如花'
        }
      },
      methods: {
        add() {
          // 只要是数组的方法改变了数组，都可以引起页面的重新渲染

          // 错误 页面不会重新渲染
          // this.arr[3]='诸葛亮'
          // console.log(this.arr)

          // this.$set(操作的数组,下标,'要添加的项')
          // Vue.set(操作的数组,下标,'要添加的项')
          // this.$set(this.arr,3,'诸葛亮')
          // Vue.set(this.arr,3,'诸葛亮')
        },

        addObj() {
          // 错误的：页面不会重新渲染
          // this.obj.sex='男'
          // console.log(this.obj)

          // this.$set(操作的对象,键,键值)
          // Vue.set(操作的对象,键,键值)
          // this.$set(this.obj,'sex','男')
          Vue.set(this.obj, 'sex', '男')
          console.log(this.obj);
        }
      }
    }).$mount('#box')