Избегайте мутации свойств во вложенных формах

Допустим, у меня есть форма, разделенная на две части, каждая из которых связана с родительской формой через реквизит. Как избежать мутации реквизита, переданного из родительской формы?

ParentForm.vue

<template>
  <div>
    <AddressForm :form-data = "formData.address" />
    <OtherForm :form-data = "formData.other" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        address: {
          address_no: "",
          country: "",
        },
        other: {
          remarks: "",
        },
      },
    };
  },
};
</script>

AddressForm.vue

<template>
  <div>
    <input v-model = "formData.address_no" />
    <input v-model = "formData.country" />
  </div>
</template>

<script>
export default {
  name: "AddressForm",
  props: { formData: { type: Object, required: true } },
};
</script>

ДругоеForm.vue

<template>
  <div>
    <textarea v-model = "formData.remarks" />
  </div>
</template>

<script>
export default {
  name: "OtherForm",
  props: { formData: { type: Object, required: true } },
};
</script>

Изменение значения полей ввода в AddressForm.vue или OtherForm.vue вызовет предупреждение о мутации реквизита. Я хотел знать, как мне общаться вверх/вниз с формами без изменения реквизита?

Я придумал возможные решения, но я не знаю, какое из них мне выбрать (а также как это реализовать)

• Клонируйте formData реквизит в created() и свяжите v-model с локальным клоном formData вместо реквизита. Затем наблюдайте за клонированным formData и излучайте каждый раз, когда значение изменяется.
• Привязка с использованием v-model вместо реквизита