Javascript 如何在Vue中使用route.params用数据填充输入？

我正在使用Vue开发一个待办事项应用程序。我使用任务组件创建新任务，但我也希望使用此组件编辑现有任务。它通过链接路由器（$route.params.id）接收任务的id，然后我使用名为task的计算属性从存储中获取特定任务，但我现在没有ide如何将数据添加到数据属性中。代码如下。有什么帮助吗？回购协议在这里：

{{$route.params.id}
任务
标题（必选）
说明（可选）
创建日期（必填）
拯救
从“vuelidate”导入{validationMixin}；
从“vuelidate/lib/validators”导入{required}；
导出默认值{
名称：“任务”，
数据（）{
返回{
标题：“，
说明：“，
创建：“，
状态：false，
};
},
方法：{
保存（）{
此.$store.commit（“addNewTask”{
标题：这个，
description:this.description，
created:this.created，
状态：这个状态，
});
},
},
计算：{
任务（）{
返回此.store.getters.task（编号（此.route.params.id））；
},
},
mixin:[验证mixin]，
验证：{
标题：{
必修的，
},
创建：{
必修的，
},
地位：{
必修的，
},
},
};

使用getter获取数据时，首先定义一个变量并将数据存储在该变量中，然后使用watch属性设置组件级数据属性

task () {
  return this.$store.getters.task(Number(this.$route.params.id));
}

watch: {
  task: {
    deep: true,
    handler: function(newVal) {
      this.title = newVal.title,
      this.description = newVal.description,
      this.created = newVal.created,
      this.status = newVal.status
    }
  }
}

---

将什么数据添加到哪个数据属性？我收到一个错误“计算属性中的意外副作用”。我已更新了答案

task () {
  return this.$store.getters.task(Number(this.$route.params.id));
}

watch: {
  task: {
    deep: true,
    handler: function(newVal) {
      this.title = newVal.title,
      this.description = newVal.description,
      this.created = newVal.created,
      this.status = newVal.status
    }
  }
}