vue.js - Passing v-model to Child Component

Question

I'm using Vue 3. In the example below I have 3 simple components, Name Component, Phone Component and Submit Component. How do I get in the respective properties of the Submit Component, what was entered in the inputs?

Name Component:

<template>
  <div>
    <input type="text" v-bind="name">
  </div>
</template>

Phone Component:

<template>
  <div>
    <input type="text" v-bind="phone">
  </div>
</template>

Submit Component:

<template>
  <name></name>
  <phone></phone>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      phone: '',
    }
  }
}
</script>

Answer 1

    <template>
   <section>
      <childComponent ref="nameOfRef" />
   </section>
</template>

 methods: {
  submit() {
   let Data = this.$refs.nameOfRef.$data; // nameOfRef.data or nameOfRef.$data or nameOfRef.phone or nameOfRef.name
 }
},

Check I think it will help to catch your parent component data.