Vue array and object update, but the page has no solution

When using an array, the data inside the array changes, but the data of the page bound to the array does not change.

<ul>
   <li v-for="(item,index) in todos" :key="index">{{}}</li>
 </ul>

data () {
  return {
   msg: 'Welcome to Your  App',
   todos: [{
    name: 'aa',
    age: 14
   }, {
    name: 'bb',
    age: 15
 
   }, {
    name: 'cc',
    age: 16
 
   }],
   obj: {name: 'lihui', age: 17}
  }
 },

methods: {
  changeTodos: function () {
   var _this = this
   _this.todos[0] = {
    name: 'zhangsan',
    age: 15
   }
   ()
   /*
    this.$set(, 0, 'nn')
   this.$forceUpdate()
*/
  }

This modification method cannot trigger the set of the array, resulting in the page data not changing.

There are three solutions.

1. Use the global set method.

this.$set(,0,{name: 'zhangsan',age: 15})；Or objectthis.$set(,'key',value);

2. Forced update

this.$forceUpdate()

The solution to the above Vue array and object update, but the page has not been refreshed is all the content I share with you. I hope you can give you a reference and I hope you support me more.