fix(vue2): picking component in other app not working, closes #1753

Akryum · Akryum · commit 32e60cf1568e · 2022-03-11T15:33:25.000+01:00
diff --git a/packages/app-backend-vue2/src/components/tree.ts b/packages/app-backend-vue2/src/components/tree.ts
@@ -34,7 +34,7 @@ export function getComponentParents (instance, api: DevtoolsApi, ctx: BackendCon
   const captureIds = new Map()
 
   const captureId = vm => {
-    const id = getUniqueId(vm)
+    const id = vm.__VUE_DEVTOOLS_UID__ = getUniqueId(vm)
     if (captureIds.has(id)) return
     captureIds.set(id, undefined)
     if (vm.__VUE_DEVTOOLS_FUNCTIONAL_LEGACY__) {
diff --git a/packages/shell-dev-vue2/public/target.html b/packages/shell-dev-vue2/public/target.html
@@ -6,6 +6,7 @@
   </head>
   <body>
     <div id="app"></div>
+    <div id="app2"></div>
     <div id="shadow"></div>
     <iframe src="/target-iframe.html" width="100%"></iframe>
     <script src="target/hook.js"></script>
diff --git a/packages/shell-dev-vue2/src/index.js b/packages/shell-dev-vue2/src/index.js
@@ -67,6 +67,16 @@ window.addEventListener('load', () => {
   app.$mount('#app')
 })
 
+const app2 = new Vue({
+  render (h) {
+    return h('div', null, [
+      h('h1', 'App 2'),
+      h(Other),
+    ])
+  },
+})
+app2.$mount('#app2')
+
 // custom element instance
 const ce = document.querySelector('#shadow')
 if (ce.attachShadow) {
