vue日期组件daterange赋默认值，导致组件数据不更新

{
    key: 'validRangeDate',
    title: '有效日期',
    type: 'daterange',
    start_placeholder: '开始日期',
    end_placeholder: '结束日期',
    size: 12,
    md: 16
  }

组件代码如上，使用下方代码给组件默认值时，在页面修改日期内容，会导致组件一直不改变

this.addQueryParamsForm.validRangeDate = [new Date(this.addQueryParamsForm.validStartDate), new Date(this.addQueryParamsForm.validEndDate)]

原因如下：

1. 当直接设置一个属性（this.addQueryParamsForm.validRangeDate = newDate）时，Vue不会触发更新。
2. 当修改数组的长度时（this.addQueryParamsForm.validRangeDate.length = newLength）
3. 当在数组或对象上使用索引设置元素（this.addQueryParamsForm.validRangeDate[0] = newItem）时，如果该索引之前不存在。

要解决这个问题，可以使用Vue的Vue.set方法或者this.$set实例方法来修改属性。这将确保Vue能够追踪到这个变化并更新DOM。以下是修改代码的方法：

this.$set(this.addQueryParamsForm, 'validRangeDate', [new Date(this.addQueryParamsForm.validStartDate), new Date(this.addQueryParamsForm.validEndDate)]);

或者

Vue.set(this.addQueryParamsForm, 'validRangeDate', [new Date(this.addQueryParamsForm.validStartDate), new Date(this.addQueryParamsForm.validEndDate)]);

注意：

在尝试修改validRangeDate之前先检查addQueryParamsForm.validStartDate和addQueryParamsForm.validEndDate是否为有效日期，否则可能会遇到错误。