I try to get marriage of Vue 3 and my MVC app:

I have main container on _Layout.cshtml with Vue app initialized:

<div id="app">
    <el-container>
        <el-main>
            @RenderBody()
        </el-main>
    </el-container>
</div>

var appHome = createApp(config);
appHome.mount("#app");

Then in @RenderBody() I get page with another Vue app (another .cshtml page + another .js controller):

<div id="appInner" ref="appInner">
    ...
</div>

var appInner = createApp(config);
appInner.mount("#appInner");

After that I can get information about appInner in $refs of top app:

//it is from config of my main container app (appHome)
mounted() {
    console.log('this.$refs AppHome', this.$refs); //here I can see ref to appInner
},
    

The problem is that I have to get ref for appInner in $refs for my appInner instance, so I need to see in:

//it is from config of my inner app (appInner)
mounted() {
    console.log('this.$refs AppInner', this.$refs); //here I can not see ref to appInner but I need that
},

Is that possible to achieve this goal in some way?