No estoy acostumbrado a la reactividad en VueJs. Aquí está mi situación. Es un proyecto Django + Vue3 CDN Single Page Application, lo que significa que creo los componentes como objeto. Tengo un subcomponente que necesito mostrar cuando un conjunto de datos esté listo. Pero dado que la solicitud lleva mucho tiempo, solo puse mi condición en el subcomponente.

Cuando el valor del renderizado condicional sea verdadero, me gustaría que se muestre el subcomponente. Una vez más, no sé cómo configurar esa variable para que sea reactiva.

 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> ` }

La situación que obtengo es que, al principio, el valor de visualización es falso, pero cuando se vuelve verdadero, el componente secundario no se representa. ¿Cómo puedo hacer que esto sea reactivo al cambio de valor?