How to wait for parent component to load in vue?

Question

Vue.js

I often come across the fact that when a child component uses some value from the parent loaded via ajax as props, the child component eventually works crookedly. Now I will explain.
During a normal page reload (ctrl+R), as well as when navigating through routes, the child component is rendered empty, as if there is no data. If you change something in this component, then after Hot Reload, which is initialized by Vue itself, the data is displayed correctly, since at this point in time they are already loaded.
Is there any solution to this problem? Without crutches.

Answer 1

I usually add a condition to the display of the component. By default, for example, the parameter is false after the data is loaded, its value changes, the child component will be displayed only after the data is loaded.

<template>
    <child-component v-if="param" :any="param"></child-component>
</template>
<script>
export default {
    name: 'parent-component',
    components: {
        ChildComponent,
    }
    data(){
        return {
            param: false
        }
     },
     methods: {
          getParam(){
              axios.get('server/path').then(response => {
                  this.param = response.data
              })
         }
    },
    mounted(){
        this.getParam()
    }
}
</script>