element-ui 日期选择器数据问题

功能描述：点击编辑按钮，进到编辑页面，得到的数据绑定到form表单，用户可以修改里面的数据
element-ui问题：点击日期选择器，选择日期，绑定的form.date数据不会变化

<template>
   <el-date-picker
        v-model="date" //原来绑定的是form.date,但是选择日期以后，数据不会变化
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
    </el-date-picker>
</template>
<script>
export default {
  data(){
    return{
       date:''
       form:{
          date:''
       }
    }
  },
  watch: {
       date(value) {//监听date的变化，并改变form.date的数据
           this.form.date = value; //划重点
       }
  },
  created() {
    this.getBonusesList(parseInt(this.$route.query.id));
  },
  method:{
    getData(id){
      axios
         .get(`admin_bonus_categories/${id}`)
         .then(res => res.data.data)
         .then(res => {
            this.form = res;
            this.form.date = [];
            this.form.date[0] = res.use_start_date ? res.use_start_date.slice(0, 10) : '';
            this.form.date[1] = res.use_end_date ? res.use_end_date.slice(0, 10) : '';
            this.date = this.form.date;//划重点，得到数据的时候，给date赋值
                    })
    }
  }
}
</script>