I'm not used to reactivity in VueJs. Here is my situation. It's a Django + Vue3 CDN Single Page Application project which means that I create the components as object. I have a sub component that I need to display when a set of data is ready. But since the request takes a long time, I've only placed my condition on the subcomponent.

When the value for the conditional render get to be true, I would like the subcomponent to be displayed. Once again, I don't know how to set that variable to be reactive.

let mainComponent = {
    component: { 'child-component': childComponent },
    data(){
       return {
          displayModal: false
          otherData: '',
          }
    },
    mounted: {
         axios.get(apiUrl).then((res) => {
               this.otherData = res.data;
               this.displayModal = true;
         }
    },
    template: `<div>
                   <child-component v-if="displayModal" :child-Props="otherData"></child-component>
               </div>
               `
    }

The situation I get is at the start the display value is false but when it becomes true, the child-component doesn't render. How can I make this reactive to the value change ?