Microfrontend with dynamic content app

[Marlight]

Hello everyone,

We have the following problem:
We have many Vue apps that should be accessible to the various employees via a launchpad. We are currently still using an old technology with SSR. We import the respective Vue app in a certain area on the respective page. We would like to use Vue completely for this.

To do this, we are thinking of building a Launchpad Vue app that contains the basic layout, menu, user profile, search, etc. In the content area, the respective Vue apps should now be dynamically integrated without having to reload the page. The reason for this is that not every employee should see every app. It is also not desirable to just jump to the respective app.

We have already tried to implement this ourselves. However, we encountered the problem that the Vue apps can be loaded dynamically without any problems, but cannot be destroyed properly. Each time a Vue app is unloaded, the imported code (styles and scripts) is left behind. This means that more and more is imported the more different apps the user opens.

We have already tried to dynamically remove the script and style tags after unloading the Vue instance (which does not work properly).
However, the respective Vue app can then no longer be installed.

Is there anyone here in the community who has already implemented something like this?
Or has an idea for a solution?

Many thanks in advance!

Here my example:
Launchpad:

<script setup>

import { ref } from 'vue';

const apps = [
    {
        name: 'app1',
        id: '1'
    },
    {
        name: 'app2',
        id: '2'
    }
];
const activeApp = ref();
const loadingApp = ref(0);

if(window.apps === undefined){
    window.apps = [];
}

function mountApp(appId) {
    loadingApp.value = appId;
    console.log('before:', window.apps);
    if(activeApp.value){
        window.apps[activeApp.value.id].unmount();
    }
    const appScript = document.getElementById(`app${appId}script`);
    if(!appScript) {
        const scriptElement = document.createElement('script');
        scriptElement.src = `/apps/app${appId}/index.js`;
        scriptElement.type = 'module';
        scriptElement.crossOrigin = true;
        scriptElement.id = `app${appId}script`;
        document.body.appendChild(scriptElement);
    } else {
        window.apps[appId].mount();
    }
    console.log('after:', window.apps);
    setTimeout(() => {
        const app = document.getElementById('app');
        console.log(app.__vue_app__);
    }, 50);
}
</script>

<template>
    <div class="flex gap-2">
        <Button v-for="appBtn in apps" @click="mountApp(appBtn.id)" :key="appBtn.id">{{ appBtn.name }}</Button>
    </div>
    <div id="app" :data-app-id="loadingApp"></div>
</template>

App X:

import { createApp } from 'vue';
import App from './App.vue';

let app = null;
const appId = document.getElementById('app').dataset.appId;

const appMethods = {
    mount: () => {
        console.log('mount app1:', appId, document.getElementById('app').dataset);
        app = createApp(App);
        app.mount('#app');
    },
    unmount: () => {
        app.unmount();
        app._container.innerHTML = '';
        app._context = null;
    }
};

if(window.apps === undefined){
    window.apps = [];
}
window.apps[appId] = appMethods;

appMethods.mount();