How to render components as data is loaded for them?

Question

Vue.js

The situation in a simplified form is as follows: there is a component inside which you need to display two child components and pass the same common parameter to them:

<template>
  
  <section class="section">
    <children-1 :some_param="some_param" />
    <children-2 :some_param="some_param" />		
  </section>

</template>

<script>
  async mounted() {
    const data = await this.getData('/api/endpoint')
      this.some_param = data.some_param
  },

  data() {
    return {
      some_param: null
    }
  },

  methods: {
    getData(url) {
      axios.get(url).then(response => response.data)
    }
  }
</script>

This parameter, in turn, must be obtained via api. Each child component also has its own API requests (one per component) to get data.

The task is to make the component render as soon as it receives its data. How to make all three requests happen at the same time, and when one completes, the component is rendered? It does not matter in what order they are completed, the main thing is that they are performed not sequentially, but simultaneously. Now it is done in such a way that first the data of the first component is loaded, then the second, and then some_param.

Answer 1

<children-1 v-if="some_param" :some_param="some_param" />