feat: fix to vuejs#750 :enhance devtools container management with mutation observer

Author: 陆德靖

packages/overlay/src/main.ts

@@ -1,15 +1,15 @@
-import type { Component } from 'vue'
+import type { Component, App as VueAppType } from 'vue'
 import { createApp, h } from 'vue'
-
 import App from './App.vue'
 
+let app: VueAppType
 function createDevToolsContainer(App: Component) {
   const CONTAINER_ID = '__vue-devtools-container__'
   const el = document.createElement('div')
   el.setAttribute('id', CONTAINER_ID)
   el.setAttribute('data-v-inspector-ignore', 'true')
   document.getElementsByTagName('body')[0].appendChild(el)
-  const app = createApp({
+  app = createApp({
     render: () => h(App),
     devtools: {
       hide: true,
@@ -19,3 +19,22 @@ function createDevToolsContainer(App: Component) {
 }
 
 createDevToolsContainer(App)
+
+const targetNode = document.body
+const config = { childList: true, attributes: false }
+const observer = new MutationObserver(callback)
+observer.observe(targetNode, config)
+
+let init = false
+function callback(mutationsList, observer) {
+  for (const mutation of mutationsList) {
+    if (mutation.type === 'childList' && init === false) {
+      if (app) {
+        app.unmount()
+      }
+      createDevToolsContainer(App)
+      init = true
+      observer.disconnect()
+    }
+  }
+}