el-date-picker 组件修改日期不生效问题

项目中用到 element 的 el-date-picker 组件显示日期,然后组件回显没有问题,但是修改日期不生效
写法如下:

<template>
  <div>
    <span class="demonstration">默认</span>
    <el-date-picker v-model="form.value1" type="daterange" range-separator="至" start-placeholder="开始日期"
      end-placeholder="结束日期" @blur="timeChange">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        value1: ''
      }
    }
  },

  created () {
    this.init()
  },

  methods: {
    init () {
      let res = {
        data: {
          start: "2020-12-01",
          end: "2020-12-09",
        }
      }
      this.form = res.data
      this.form.value1 = []
      this.form.value1.push(res.data.start)
      this.form.value1.push(res.data.end)
    },
    
    timeChange() {
        console.log(this.form.value1);
    }
  }
}
</script>

上面的写法可以把this.form.value1的值修改过来,但是视图没有更新
自己感觉原因如下:把res.data赋值给this.form后,this.form对象只有两个属性start和end,this.form.value1 = []代码虽然给this.form对象添加了一个新属性,但是这个新属性并没有加到vue的响应式系统当中,所以他的值的变化不会被vue的响应式系统追踪,也就不会更新视图
代码改成下面这样就好了:

init () {
  let res = {
    data: {
      start: "2020-12-01",
      end: "2020-12-09",
    }
  }
  res.data.value1 = [res.data.start, res.data.end]
  this.form = res.data
},