.sync修饰符在VueJS中无法按预期工作

Question

链接：CodeSandBox

我有一个object：

UnitData: {
  FirstName: null,
  LastName: null,
  Department: null,
  OvertimeRate: null,
}

我有一个AddEmployee.vue组件，其中包含一个带有2个步骤的vuetify v-stepper，每个步骤都包含一个BasicInfo.vue和JobInfo.vue组件，并且两个组件都具有与unit-data并以:unit-data.sync="UnitData"绑定到上述对象，在created()下的两个组件中，我都写了this.$emit('update:unit-data', this.UnitData);，在两个组件中，我都有了UnitData: this.$props.unitData。在步进编号中。 1当我在文本字段中写一些东西时，主要对象发生了变化，但是当我转到步骤No时。 2第二个组件没有更改主要对象，它只是更改为自己的UnitData。如果我直接转到步骤No。 2然后，主要对象会根据该组件的数据进行更改，然后转到步骤No。步骤1中的1。 2然后主要对象保持不变，我无法弄清楚问题，有什么建议吗？

  

我不能创建两个对象，必须使用一个对象。