Vue中data对象的数组取值操作

<template >
  <div >
     <div v-for="(el,index) in arr" :key="index">
     <button @click='fn(index)'>{{el}}</button>
     
     </div> 
      <input type="text" v-model="msg" @change="bn" />
        <p>{{msg}}</p>
  </div>
</template>

<script>
  import Vue from 'vue'
  export default {
    name: '',
    data() {
      return {
        arr: ['第一个', '第二个', '第三个'],
        // index:0
        flag:true,
        msg:'测试'
      }
    },
    components: {

    },
    methods: {
      fn(index) {
        

         
         this.arr[index]=index  //不能渲染到页面上，但是可以改变值
         console.log( this.arr[index]);
        // this.arr.push(123)//能刷新页面  可以改变值
					// this.arr.splice(0,1,"666")//能刷新页面  可以改变值
         
       //  Vue.set(this.arr,index, index) //可以取值且可以渲染到界面上
        
      
        // this.index=index
        
      },
      bn(e){
        console.log(e);
          this.msg=e.target.value
        }
    }
  }
</script>

<style scpoed='scoped'>

</style>