Vue component lifecycle refactor

I'm trying to figure out the best way to "rearchitect" this parent component and its child component. The problem I have is the parentComponent is making an API call 3 separate times on page load and it's causing delay in the data being loaded into a table in the parent component. I have the sort of order this happens and tried to put it in a notes format. I'm not sure the best way to write out the code as this isn't my code and am not allowed to post it. If anyone has direction for posting code like this in a format more understandable and better for this post, then please let me know.

The issue is that it's making 3 of the same api calls in the load of parent component and I'm trying to find a way to reduce that to just one where it has all the data loaded from the child component.

But here's the lifecycle which leads to the API Calls on page load.

1. parentComponent --> mounted --> loadData --> apiCall(withoutDataNeededFromChild)
2. parentComponent --> parentComponent.childComponent:Prop --> childComponent (@Watch("prop"))function --> emitToParent --> parentComponent --> function --> loadData --> apiCall(withPartialDataNeededFromChild)
3. parentComponent --> childComponent --> v-model:get Function --> emitToParent --> parentComponent --> function --> loadData --> apiCall(withAllDataNeededFromChild)

Parent Component

<template>
  <div>
    <childComponent
       :defaults="setDefaults"
    />
  </div>
</template>

<script lang="ts">

  import Vue from "vue";
  import Component from "vue-class-component";

  @Component({
    name: "parentComponent",
    components: {
      "childComponent": () => import("@c/somePath/child-component.vue")
    }
  })

export default class ParentComponent extends Vue {
  mounted() {
    this.loadData();
  }

  async loadData(){
    
    await this.getData();
  }

  async getData() {
    const data = await Promise.all(
      this.someData.map((l) =>
        this.$http.get<Type[]>(
          `${this.apiUrl}/some/${l.id}/dataUrl`,
          {
             params: query
          }
  }
}
</script>

Child Component

<template>

</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-class-component';

@Component({
    name: 'child',
})

export default class extends Vue {
    @Prop({ type: Boolean, required: false, default: false })
    readonly defaults!: boolean;

    get selectedTypes(): string[] {
        return this.filter.aTypes.map((et) => et.id)
    }

    set selectedTypes(ids: string[]) {
        let selected = this.aTypes.filter((r) => ids.includes(r.id));
        this.filter.aTypes = [...selected];
        this.emitToParent();
    }
}

</script>