typescript - Hur man antyder för en reaktiv variabel att den har ändrats?

Jag har ett objekt "Employee".

export interface Employee {
  name: string;
  age: number;
}

För att ändra det utvecklade jag komponenten "Min Redigerare".

<script lang="ts" setup>
import { ref } from "vue";
import { Employee } from "./DataType";
import MyEditor from "./MyEditor.vue";

const myData = ref<Employee>({ name: "Mike", age: 31 });
</script>
<template>
  {{ myData }}
  <br />
  <MyEditor v-model:data="myData" />
  <br />
  <MyEditor :data="myData" @update:data="myData = Object.assign({}, $event)" />
</template>

Där ändrar jag värdena i fälten, och sedan genom att trycka på ok-knappen skickar jag de ändrade uppgifterna till föräldern.

<script lang="ts" setup>
import { Employee } from "./DataType";

const props = defineProps<{
  data: Employee;
}>();
const emit = defineEmits<{
  (e: "update:data", value: Employee): void;
}>();
const clonedData = Object.assign({}, props.data);
</script>
<template>
  <input v-model="clonedData.name" />
  <br />
  <button @click="emit('update:data', clonedData)">Ok</button>
</template>

I en föräldrakomponent kommer reaktivitet bara att fungera om objektet självt ändras, inte dess egenskaper. det vill säga, istället för

v-model:data="myData"

måste göra

:data="myData" @update:data="myData=Object.assign({}, $event)"

Och detta är inte särskilt estetiskt tilltalande, finns det andra alternativ?

lekplats