My Images.vue parent component contains 3 child components: ImagesGridArea1, ImagesGridArea2, and ImagesGridArea3. The children are tagged like this:
<ImagesGridArea1 ref="ref1" :key="ref1key" ... />const ref1 = ref(null);. Nothing out of the ordinary.
The issue arises when I use v-if to load only the necessary child component. While refs work fine in Javascript, only the first ref (for the default child component) works in TypeScript. ref2 and ref3 remain null.
Of course, they work if I switch to using v-show, at least with a function ref like this:
<ImagesGridArea2 :ref="(el) => {ref2=el as ComponentPublicInstance}" :key="ref2key" ... />Is there a way to obtain instance refs of children without having to keep them mounted using v-if?