Вернуть массив значений input дочернего компонетна в родитель

Есть компонент с формой и в нее я загружаю поля в зависимости от нажатия чекбокса какой в родительском. Все работает прекрасно, но не могу понять как мне вернуть массив значение инпутов из дочерних полей в родительский компонент.

В родительском компоненте я должен получить все данные из полей какие загрузились дочерним компонентом. Понимаю, что мне $emit тут нужен, но мои пробы получения данных всегда возвращало пустой массив.

Родительствий компоненн

<template>
  <div class="auth">
    <div class="uk-container uk-text-center">
      <natification :message="natification" />
      <div class="auth-wrapper">
        <form v-on:submit.prevent="submitAuth">
          <loginFields v-show="registr !== true" />
          <registrFields  v-show="registr == true" />
          <div class="uk-margin uk-grid-small uk-child-width-auto uk-grid">
            <label>
              <input class="uk-checkbox" type="checkbox" v-model="registr" />Do you want to create account ?
            </label>
          </div>
          <button
            class="uk-button uk-button-primary"
            type="submit"
          >{{ registr ? 'Regist' : 'Login'}}</button>
        </form>
      </div>
      <div>{{info}}</div>
      <div>{{formData}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: [],
      info: "",
      natification: "",
      registr: false
    };
  },
  methods: {  
      
    
  },
  components: {
    natification: () => import("../Notification/default"),
    loginFields: () => import("../Auth/_loginFields"),
    registrFields: () => import("../Auth/_registrFields")
  }
};
</script>

Дочерний компонентн

<template>
  <div>
    
    <div class="uk-margin">
      <div class="uk-inline">
        <span class="uk-form-icon" uk-icon="icon: user"></span>
        <input
          class="uk-input"
          type="text"
          name="first_name"
          v-model="formData.first_name"
          placeholder="First name"
        />
      </div>
    </div>
    
    <div class="uk-margin">
      <div class="uk-inline">
        <span class="uk-form-icon" uk-icon="icon: user"></span>
        <input
          class="uk-input"
          type="text"
          name="last_name"
          v-model="formData.last_name"
          placeholder="Last name"
        />
      </div>
    </div>

    <div class="uk-margin">
      <div class="uk-inline">
        <span class="uk-form-icon" uk-icon="icon: mail"></span>
        <input class="uk-input" type="email" v-model="formData.email" placeholder="Email address" />
      </div>
    </div>
    <div class="uk-margin">
      <div class="uk-inline">
        <span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: lock"></span>
        <input
          class="uk-input"
          type="password"
          name="password"
          v-model="formData.password"
          placeholder="Password"
        />
      </div>
    </div>
    <div class="uk-margin">
      <div class="uk-inline">
        <span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: lock"></span>
        <input
          class="uk-input"
          type="password"
          name="confirm_password"
          v-model="formData.confirm_password"
          placeholder="Confirm Password"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // props: ["formData"],
  data() {
    return {
      formData: []
    };
  },
  watch: {
    callbackData: () => {
      this.$emit("formDataRegistr", this.formData);
    }
  }
};
</script>


<style>
</style>