Question: I'm having trouble getting two-way data binding to work in Vue 3 between a parent component and its child component, which is a form.

**parent.vue**

```
<template>
  <h5>{{ record.title }}</h5>
  <ChildForm v-model:record="record"></ChildForm>
</template>

<script lang="ts">
export default {
  data() {
    record: undefined
  },
  created() {
    //code to fetch record
    this.$data.record = new Record(responseJson);
  },
  watch: {
    record: function(newRecord, oldRecord) {
      alert("change detected!");
      //perform appropriate logic when record is changed in child
    }
  }
}
</script>

```

**child.vue**

```
<template>
  <InputText v-model="record.title"></InputText>
  <InputText v-model="record.description"></InputText>
</template>

<script lang="ts">
export default {
  props: {
    record: {
      type: Object as () => RecordModel
    }
  },
  emits: ["update:record"]
}

```

If I change the title in the ChildForm's title input box, the parent accurately reflects the change in the h5 header. But, the watch function never gets fired.

What do I have to do to get the parent's watch method to fire when the child changes the model object's values?

Answer: 
Not going to accept this answer but this does work...

```
"test": "c8 mocha --recursive './lib/**/*.spec.mjs' --require esm"

```
Thanks Jackie, this worked for me. Using your example:

```
"test": "c8 mocha './tests/**/*.test.js' --exit"

```