I have two child components I have to pass dynamically props from first child to parent and from parent to second child.

**Parent**

```
<script>
  data: () => ({
   model: {}
  }),
  methods: {
    changeData(payload) {
      this.model.personalData = {...payload}
    }  
  }
</script>
<template>
  <first-child @changeData="(payload) => changeData(payload)"/>
  <second-child :enter-object="model" />
</template>

```

**Child one**

```
<script>
  data: () => ({
   model: {}
  }),
  methods: {
    changeData() {
      this.$emit("changeData", this.model);
    }
  }
</script>
<template>
  <v-text-field v-model="model.name" @input="changeData()">
  <v-text-field v-model="model.email" @input="changeData()">
</template>

```

**Child two**

```
<script>
  props: {
    enterObject: {
      type: Object,
      required: false,
      default: () => ({})
    }
  },
  data: () => ({
    model: {}
  }),
  watch: {
    enterObject: {
      immediate: true,
      handler() {
        Object.assign(this.model.personalData, this.enterObject.personalData);
      }
  }
</script>
<template>
  <div>
    <div v-if="model.personalData.name || model.personalData.email">
      <span class="mr-3">{{ model.personalData.name }}</span>
      <span>{{ model.personalData.email }}</span>
    </div>
    <div v-else>
      No data
    </div>
  </div>
</template>

```

I get data in parent component with no problem, but this data doesn't pass to second child, why I have always "No data" ?