Vue.js prop对象内的Vue id属性未更新

我在父组件中有以下数组

dateArr = [
  {id:1, name:'Name1', date:"2020-01-01", iscomplex:1},
  {id:2, name:'Name2', date:"2020-02-01", iscomplex:1},
  {id:3, name:'Name3', date:"2020-03-01", iscomplex:0},
  {id:4, name:'Name4', date:"2020-04-01", iscomplex:0},
]

现在，该数组用于填充aggrid表。现在，我在每一行都显示了一个钢笔图标，点击它就会打开一个对话框，它是子组件。
现在，子组件只包含对话框的卡片，而由于aggrid功能，v-dialog是在父组件中创建的。
现在，我将行对象作为道具传递给子组件。现在发生了一些奇怪的事情，子组件具有以下属性

props: {
    dateObj: {
      type: Object,
      default() {
        return null;
      },
    },
  },
data(){
  return{
    formVal: {},
  }
}

现在我看了下面的道具，将道具分配给formVal，并在组件首次加载时使用mounted将道具分配给formVal

watch: {
    dateObj: {
      handler: function (newValue) {
        this.formVal = { ...newValue };
      },
      deep: true,
    },
  },
mounted() {
  if (this.dateObj) {
      this.formVal = { ...this.dateObj };
    }
  },

现在的问题是，除了id之外，formVal中的所有值都会得到更新，但是当我将id值转换为字符串时，它就会按预期工作。父组件工作得非常好，所以我不会为它添加代码。由于id没有更新，我在这里遗漏了什么，这与Vue反应性问题有关吗

deep: true

---

在处理程序之后的watch中。

我认为没有必要在mounted中添加初始化，您只需在watch属性中添加

immediate:true

。您尝试过computed属性吗？因为我需要在formVal中添加更多字段，所以我无法使用computed属性。并且立即为true也不会得到预期的输出。如果它是一个数字，那么只有id值不会被更新。我发现了错误。谢谢大家抽出时间。对不起，错过了；看起来很奇怪，如果您将ID设置为字符串，例如“1”，然后在watch中将其转换为整数，例如（int）ID，该怎么办？