vue的变量绑定不起作用

问题描述：

我希望在页面上绑定一个数组中的第一个元素和第二个元素，在template标签中这样写：

<template>
  <div>
    <div>{{data_list[0]}}</div>
    <div>{{data_list[1]}}</div>
    <div>{{val}}</div>
    <div>{{val1}}</div>
    <div>{{val2}}</div>
    <div>{{val3}}</div>
    <el-button type="primary" @click="ok('ruleForm2')">ok</el-button>
  </div>
</template>

<script type="text/javascript">
  export default {
    data(){
      return {
        data_list:['key1','key2'],
        val:'',
      }
    },
    computed:{
      val1(){
        return this.data_list[0]
      },
      val2(){
        return this.data_list[2]
      },
      val3(){
        return this.val
      },
    }
    methods:{
      ok(){
        this.data_list[0] = `k1:${new Date().getTime()}`
        this.data_list[1] = `k2:${new Date().getTime()}`
        this.val = = `k:${new Date().getTime()}`
      },
    }
  }
</script>

每次点击ok按钮，页面上只有val和val3内容变了，而另外四个div中的内容不会变。

刚开始我怀疑是vue的变量绑定失效了，后来使用了计算属性发现计算属性也不好使。

后来仔细研究发现：只有更改data_list的引用指向，而不是修改该变量所引用的对象中的内容，才能让数据绑定和计算属性起作用

<template>
  <div>
    <div>{{data_list[0]}}</div>
    <div>{{data_list[1]}}</div>
    <div>{{val}}</div>
    <div>{{val1}}</div>
    <div>{{val2}}</div>
    <div>{{val3}}</div>
    <el-button type="primary" @click="ok('ruleForm2')">ok</el-button>
  </div>
</template>

<script type="text/javascript">
  export default {
    data(){
      return {
        data_list:['key1','key2'],
        val:'',
      }
    },
    computed:{
      val1(){
        return this.data_list[0]
      },
      val2(){
        return this.data_list[2]
      },
      val3(){
        return this.val
      },
    }
    methods:{
      ok(){
        // this.data_list[0] = `k1:${new Date().getTime()}`
        // this.data_list[1] = `k2:${new Date().getTime()}`
        this.data_list = [`k1:${new Date().getTime()}`,`k2:${new Date().getTime()}`]
        this.val = = `k:${new Date().getTime()}`
      },
    }
  }
</script>