Multiple Vue apps mounted cause empty devtools on Chrome

[roy1345]

Vue devtools version

6.6.1

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-wh3but?file=package-lock.json

Steps to reproduce & screenshots

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
const app2 = createApp(App)

app2.mount('#app2')

await new Promise((resolve) => {
  setTimeout(() => {
    app2.unmount();
    resolve('Loading completed')
  }, 5000);
});

app.use(createPinia())
app.mount('#app')

1. Open Chrome developer console and refresh your page.
2. Take a look at the Pinia/Vuex tab (it's empty)

What is expected?

Opening Chrome developer console, going to the Vue devtools should show the entries of the Pinia/Vuex store immediately.

What is actually happening?

Devtools is showing empty Pinia/Vuex store. I have to close the developer console (f12) from Chrome and reopen the developer console to see the Pinia/Vuex store entries.

System Info

The problem occurs on Chrome. On Firefox this does work normally.

[Version 1.65.114 Chromium: 124.0.6367.60 (Official Build) (64-bit)](https://brave.com/latest/)

Any additional comments?

No response

[jackchoumine]

I have this issue too:

chrome vesion: 124.0.6367.208 64bit

[jackchoumine]

I find a hack solution: umount App beforeunload:

window.onbeforeunload = () => {
  console.log('onbeforeunload 卸载 App');
  app.unmount();
}

[roy1345]

I find a hack solution: umount App beforeunload:

window.onbeforeunload = () => {
  console.log('onbeforeunload 卸载 App');
  app.unmount();
}

Thanks a lot for your help/hack. However for me it doesn't work. Probably because my situation is not exactly the same as described above. I also have multiple plugins that mount as apps and keep running and are not "unmounted".