I have this general component which can render different sorts of components asynchroneously:
<script setup>
import { defineProps, defineEmits, defineExpose, onMounted, ref, computed, toRefs, nextTick, watch } from 'vue';
import { defineAsyncComponent } from 'vue';
const props = defineProps({
component: { type: String },
});
const { component } = toRefs(props);
const components = {
componentOne: defineAsyncComponent(() => import('...'),
componentTwo: defineAsyncComponent(() => import('...'),
// and so on
}
const currentComponent = computed(() => {
return component[props.component] || null
})
const currentComponentRef = ref(null);
const methodA = ref(() => null)
onMounted(async () => {
if (currentComponentRef.value && currentComponentRef.value.methodA) {
methodA.value = currentComponentRef.value.methodA
}
})
watch(currentComponentRef, async (newVal) => {
if (newVal) {
await nextTick()
if (newVal) {
methodA.value = newVal.methodA
}
}
})
defineExpose({
methodA
})
</script>
<template>
<component
:is="currentComponent"
ref="currentComponentRef"
/>
</template>Now when using this component from a parent component, calling its methodA onMounted gets on the call stack before the component can define methodA itself. I want to avoid using timeouts in the parent.
Is there another way to make sure exposed methods are ready to be called onMounted ?