How to define default component on inertiajs?

I've a vue app that I'm working on and I want to use inertia along it, my app creation is defined like this:

App.vue

<script setup>
import { useTheme } from 'vuetify'
import ScrollToTop from '@core/components/ScrollToTop.vue'

const { global } = useTheme()
</script>

<template>
  <VLocaleProvider>
    <!-- ℹ️ This is required to set the background color of active nav link based on currently active global theme's primary -->
    <VApp>
      <RouterView />

      <ScrollToTop />
    </VApp>
  </VLocaleProvider>
</template>

This is the main.js file

import App from '@/App.vue'

const app = createApp(App)
app.mount('#app')

Now that I want to use inertia, the default method to create an app is:

import App from '@/App.vue'

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
        return pages[`./Pages/${name}.vue`]
    },
    setup({ el, apps, props, plugin }) {

        //   THE PROBLEM
        // Here's the problem, if I use "app" on h(apps, props) my app does not work
        const vApp = createApp({ render: () => h(App, props) })

        registerPlugins(vApp)

        return vApp.use(plugin).mount(el)
    },
})

Since I'm using App on h(App, props) the shared data don't reach all components, if I inspect the page using Vue devtools, I can see that my shared data is on App <Root><App>...</App></Root>, but not inside of the components that are insise of App, e.g

<Root>
    <App> <----- shared data is here on the "attrs" section
        <VLocaleProvider>
           <VApp>
               <UserProfile> <----- can't access shared data here
           </Vapp>
        </VLocaleProvider>
    </App>
</Root>

How can I "set" the default component for inertia to use and be able to access shared data on my components?