I’m using VueJS async components, I’m storing them in refs but it seems like these refs are never created as reactive refs in production.

My app asynchronously loads up certain components where they are needed. I have created a map of the components along with what I would like their ref to be as such:

const componentsMap = {
    header: {
        component: defineAsyncComponent(() => import("./components/header-panel.vue")),
        ref: "header_panel",
    },
    hero: {
        component: defineAsyncComponent(() => import("@/views/Editor/components/hero/hero-panel.vue")),
        ref: "hero_panel",
    },
};

Usage of these async components with the built-in dynamic <component /> is as such:

<component :is="currentComponent" :ref="currentComponent.ref" />

Having previously defined the refs which will store each of the component instances once they are loaded:

const header_panel = ref<any>(null);
const hero_panel = ref<any>(null);

I expect to then be able to access these refs by passing them to a child component:

<ChildComponent :header_panel="header_panel" :hero_panel="hero_panel" />

I then expect to be able to use these two panels in ChildComponent.

It works as expected in development, once the asynchronous components have been loaded, the child component gets the updated prop and it stops being null, then it can be used.

In production, the props of the ChildComponent don’t get updated once an async component has been fetched, I used a watcher to check and it appears it never gets instantiated as a reactive variable.