vue数组按索引修改数据无法触发双向绑定的更新

<div id="app">
<div v-for="item in list">
{{item}}
</div>
<div>数组长度:{{list.length}}</div>
<div v-for="(item,key) in person">
{{key}}:{{item}}
</div>
<div id="content"></div>
<div><input type="text" id="inputText" oninput="handleInput(event)"/></div>
</div>
<script type="text/javascript" charset="utf-8">
let app = new Vue({
el:'#app',
data:{
list:['javascript','test'],
person:{id:1}
}
});

        //以索引方式添加元素或修改元素值，都不能触发数据更新
        app.list[1] = "java";
        //push函数可以触发数据更新
        //app.list.push("html");
        //app.list.unshift("css");
        //在索引2的位置上增加一个长度的元素
        //app.list.splice(2,1,"css");
        //在索引2的位置上修改元素值
        //app.list.splice(2,1,"html");
        //相当于app.list[2] = "html";
        //app.$set(app.list,2,"html");
        ///app.$forceUpdate();
        //直接修改长度，不起作用
        //app.list.length = 10;

        //手动添加对象属性都不成功
        //app.person.name = "admin";
        //app.person['name'] = "admin";
        // let obj = app.person;
        // obj.name = "admin";
        // console.log(obj);
        // app.person = obj;
        //直接修改对象，可以触发更新
        //app.person = {id:1,name:"admin"};
        app.$set(app.person,"name","admin");

        app.a = "abc";
        console.log(app.a);

        let person={};
        Object.defineProperty(person,"interest",{
            //value:'兴趣', //设置默认值
            //writable:true, //是否可以赋值
            configurable:true, //是否可删除属性
            enumerable:true,   //是否可遍历
            vals:null,
            get:function(){
                console.log('触发了get方法');
                return this.vals;
            },
            set:function(val){
                console.log('触发了set方法: ',val);
                this.vals = val;

                let objStr = '';
                if(typeof val == 'object'){
                    for(let key in val){
                        objStr+=key+':'+val[key]+' ';
                    }
                }
                else{
                    objStr = val;
                }
                document.getElementById('content').innerHTML=objStr;
            }
        });
        //person.interest = "music";
        //delete person.interest;
        //console.log(person);
        /*for(let item in person){
            console.log(person[item]);
        }*/

        //person.interest = ['game','music'];
        //以索引方式修改数组元素值，不会触发set方法
        //person.interest[1] = "sport";
        //以索引方式增加数组元素，不会触发set方法
        //person.interest[2] = "sport";
        //使用push函数增加元素，不会触发set方法
        //person.interest.push("sport");
        //person.interest = [...person.interest,"sport"];
        //console.log(person.interest);

        //person.interest = {id:1};
        //添加属性，不能触发set方法
        //person.interest.name = 'music';
        //person.interest['name'] = 'music';
        //修改属性值，不能触发set方法
        //person.interest.id = 2;
        ///person.interest = {id:1,name:'music'};
        //console.log(person.interest);
        function handleInput(e){
            person.interest = e.target.value;
        }

        fetch("https://api.quechao.xyz/goodslist",{
            method:"get"
        }).then(function(res){
            return res.json();
        }).then(function(data){
            console.log(data);
        }).catch((err)=>{
            console.log(err);
        });
    </script>