How to hint a reactive variable that it has changed?

Question

I have an object "Employee".

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

To change it, I developed the "My Editor" component.

<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>

In it, I change the values ​​​​of the fields, and then by pressing the ok button, I send the changed data to the parent.

<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>

In a parent component, reactivity will only work if the object itself is changed, not its properties. that is, instead of

v-model:data="myData"

have to do

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

And this is not very aesthetically pleasing, are there other options?

playground