How can I pass form data from a nested component to a outer component using Vue2 and Nuxt2

Question

I am fairly new to view and learning as I go. I am trying to get data from a form that is built in different components. The flow is outer component calls inner component calls nested component. I need the data from the nested component to be passed to the outer component where the form submit button is so it can post the data to an endpont. I have tried using this.$emit, but it's like the method is never read because my logs in the method are not showing up. I think I have tried every solution I've found on stack overflow and still am not successful. I tried using vuex, but that didn't seem to be the right solution since I wasn't displaying to the page. Any input would be helpful. I provided a somewhat skeleton of what the code should be. There will be more fields for the forms in each component, but for now I am only working with one to try to pass that one piece of data successfully.

Outer Component

<template>
  <v-dialog v-model="dialog">
    <v-card>
      <v-card-text>
        <InnerComponent
ref=source
@loadData=”updateForm”
        />
      </v-card-text>
      <v-card-actions>
        <v-btn text @click.prevent="formSubmit">Save</v-btn>
        <v-btn text @click.stop="closeDialog">Close</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
import InnerComponent from "sourcePath";

export default {
  components: {
    InnerComponent,
  },
  data() {
    return {
      dialog: false,
      import: true,
      source: null,
      formData{}
    };
  },
  methods: {
    updateForm(formData) {
      this.formData = formData;
    },
    formSubmit() {
      
      try {
        this.$axios
          .post("endpointurl", formData)
          .then((response) => {
            console.log(response, "response data");
          });
      } catch (error) {
        console.log(error);
      }
    },
    closeDialog() {
      this.dialog = false;
    },
  },
};
</script>

Inner Component

<template>
  <v-card>
    <v-card-text>
      <v-form ref="form">
        <v-col>
          <v-text-field 
      v-model="email" 
      label="email">
</v-text-field>
        </v-col>
<!-- Other form fields -->
      </v-form>
    </v-card-text>
  </v-card>

<NestedComponent
         Ref=”childForm”
         @grabData=”sendData”
/>
</template>

<script>
export default {
  data() {
    return {
      email: ''”
    };
  },
  methods: {
sendData(formData) {
      this.$emit('loadData', formData); // this would be called in the outer component??
      console.log(formData, "form data");
    },
  },
};
</script>

Nested Component

<template>
  <v-form ref="form">
    <v-col>
      <v-text-field 
v-model="name" 
label="name">
     </v-text-field>
    </v-col>
    <!-- Other form fields -->
  </v-form>
</template>

<script>
export default {
data() {
    return {
      name:””
    };

  methods: {
    getFormData() {
       let formData = {name: this.name}
        console.log(formData, “data”);
      this.$emit('form-updated', formData);
    },
  },
mounted(){
this.getFormData();
}, // I have this mounted but I need it to grab the data after the page loads not before. I tried adding to compuetd, but that doesnt seem right either.
};
</script>

This gives me errors and nothing is logging to the console