Vue 3 - show loader until all child components are loaded

I'm having trouble displaying Vue Loader Component while waiting for other components to load.

<div id="app">
    <loader v-if="!componentsReady"></loader>
    <some-page v-else></some-page>
</div>

<Loader> isn't displayed since it itself is a vue component.(based on logic it's waiting for all child components to load)

app.js

Here I want to display Loader component, and wait until SomePage component and it's child components are loaded.

On mounted I'm setting that components are ready, but this way I also won't get Loader component displayed, event it's not async.

import Loader from "./Loader";

const app = createApp({
    data() {
        return {
            componentsReady: false
        }
    },
    components: {
        SomePage: defineAsyncComponent(() => import('./somePage')),
        Loader
    },
    mounted() {
        this.$nextTick(() => {
            this.componentsReady = true;
        });
    }
});

app.mount('#app');