Vue a method to modify an element of an array can not be updated responsive

<template>
  <div>
    <ul>
      <li v-for="(item, i) in ms" :key="i">{{item}}</li>
    </ul>
    <button @click="change()">点击</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      ms: [1, 2, 3]
    }
  },
  methods: {
    change () {
      this.ms[0] = 100
      console.log(this.ms)
    }
  },
  onLoad (params) {
    this.keyword = params.keyword
  }
}
</script>

　　The above code you want to achieve the first element of the array to modify click the button.

　　However, the actual operation found that the data has been modified to display the console print successfully, but the data on the page has not been updated (not the type of response).

　　What causes it? I checked the official documents, the document reads as follows:

　　　

 

　　Document clearly states that, vue can not detect the fluctuation of the array, but the document also pointed out the way to achieve the above requirements:

　　The change () function code this.ms [0] = 100 rewrites this.set (this.ms, 0, 100)

 

　　Thus, the individual elements of the array to modify the demand is realized