Vue 3 Component Reset Does Not Reset Reactive() Object Data

Using Vue 3, typescript, composition API & FireStore data, when attempting to reset the form by key value change, all reactive() data resets to its original stored value except

Solution 1:

to get access to emit you need to do

setup(props, { emit }) {

Minimal Reproduction

Parent.vue

<template><divclass="">{{formKey}}</div><Child:key="formKey"
    @reset="formReset"
  /></template><scriptlang="ts">import { ref, defineComponent } from"vue";
importChildfrom"./Child.vue";
exportdefaultdefineComponent({
  components: {
    Child,
  },
  setup() {
    const formKey = ref(0);
    constformReset = () => formKey.value++;
    return { formKey, formReset };
  },
});
</script>

Child.vue

<template><form><inputtype="text"v-model="name" /><inputtype="text"v-model="address.street" /><inputtype="text"v-model="address.city" /><inputtype="text"v-model="phone" /><div>Name {{name}} </div><div>Street {{address.street}} </div><div>City {{address.city}} </div><div>Phone {{phone}} </div><button @click.prevent="reset">Reset</button></form></template><scriptlang="ts">import { defineComponent, toRefs, reactive } from"vue";
exportdefaultdefineComponent({
  setup(props, { emit }) {
    const formData = reactive({
      name: "",
      address: {
        street: "",
        city: "",
      },
      phone: "",
    });
    constreset = () => emit("reset");
    return { ...toRefs(formData), reset };
  },
});
</script>

Reset