Single Page Application: How to unmount app in Vue.js 3 Composition API when enter/reload the app?

Webpack server is showing the following warning in browser console :

> [Vue warn]: There is already an app instance mounted on the host container.
If you want to mount another app on the same host container, you need to unmount the
previous app by calling app.unmount() first.

So, I'm facing an issue with proper use of:

app.unmount()

main.js

// Import methods and component.
import { createApp} from 'vue';
import router from './router';
import App from './App.vue';

// Create vue App.
const app = createApp(App);

// Install the required instances like plugin, component and directive.
app.use(router);

// Mount 'app' const (App.vue) as root component.
app.mount('#app');

App.vue

<template>

 <div>
    <div id="header">Hello world</div>

    <div id="main">
    
        <router-view name="default" v-slot="{ Component, route }">

          <div v-if="errMsg" class="container mt-3">
            <h2 class="text-center">
              {{ errMsg }}
            </h2>
          </div>

          <div v-else>
            <component :is="Component"
                       :key="route.meta.usePathKey ? route.path : undefined">

            </component>
          </div>
    
        </router-view>
    
    </div>
  </div>

</template>

<script>
import {ref, onErrorCaptured} from 'vue';

export default {
  name: "App",
}
</script>

<script setup>

// constants, functions and life-cycle hooks
const errMsg = ref(null);

onErrorCaptured(() => {
  errMsg.value = "Something went wrong!";
});

</script>

<style>

</style>

Note

1- I can't use app.unmount() in main.js directly and

2- can't use Vue life-cycle hooks like onUnmounted() because should only use inside setup() script.

3- can't unmount app from App.vue (nonsense).

The solution, I should see if app (App.vue) is already mount, it's useful:

1- When refresh the page, so you don't need to mount another app instance as Webpack server suggest in the warning.

2- Will prevent trigger the methods these defined in App.vue <script setup> twice (one for update life-cycle of component and second when re-mount the component again, which happens when refresh the page).

main.js

// Import methods and component.
import { createApp} from 'vue';
import router from './router';
import App from './App.vue';


let app = "";
let containerSelector = "#app";

// check if app has been mounted already
const mountPoint = document.querySelector(containerSelector);

if (mountPoint && mountPoint.__vue_app__ !== undefined) {

    // Set the existing mount point to 'app'.
    app = mountPoint.__vue_app__._instance.proxy;
}
else {

    // create a new app instance
    app = createApp(App);
    
    // Install the required instances like plugin, component and directive.
    app.use(router);

    // Mount 'app' (App.vue) as root component.
    app.mount(containerSelector);
}

If you don't want to use the existing app instance, you can change the code by use app.unmount() inside if{} block and remove else{} block, then outside the condition block plug in your components, stores..etc to the new created app instance and mount it at the end.