解决vue中修改数据但视图无法更新的情况

数据变视图无法更新问题 详细见例子

vue数组更新检测官方文档
vue对象更新检测官方文档

<div id='app'>
        <li v-for="(item, index) in arr" :key="index">{{item}}</li>
        <li v-for="(value,key,index) in obj">{{value}}</li>
        <button @click='clickHander'>clickme</button>
    </div>
    <script>
        new Vue({
            el:'#app',
            data() {
                return {
                    arr:['1','2','3'],
                    obj:{
                        name:'zs',
                        age:18,
                    }
                }
            },
            mounted() {
                //以下视图不会更新
                this.obj.sex='男'
                this.arr[0]='hello'
               
            },
            methods: {
                clickHander(){
                   this.arr.push('www')
                   console.log(this.arr)
                   Vue.set(this.arr,0,'hello')  //用数组方法如 push pop等
                   Vue.set(this.obj,'sex','男')  // 或者用  Object.assign()

                    // vue通过以下跟新数据 视图不更新
                    // this.arr[0]='hello'
                    // console.log(this.arr[0])
                   
                   
                }
            },
        })
    </script>