Selecting a component using the page inspector tool doesn't also select the corresponding app

[6twenty]

Version

6.0.12

Browser and OS info

Firefox Developer Edition 98.0b5 / MacOS 11.6.4

Steps to reproduce

• Start with a page that has multiple Vue apps in it
• Use Vue devtools to select one of the apps in the Components inspector view
• Now use the page inspector tool to select a component from a different app - the component will highlight on the page
• When you click on it, the Components inspector view doesn't show it, because it still has the other app selected

What is expected?

Vue devtools should first select the associated app, so that it can then select the target component for inspection.

What is actually happening?

Since the wrong app is still selected, the target does not appear in the component tree and is therefore not selected for inspection. This means that even though you clicked on a component on the page, nothing changes within the Vue devtools panel and you have to first select the correct app and try again.

---

Mine might be a special case, because we have a legacy application that we are retroactively integrating Vue into. This means we are using many individual Vue apps within a single page as we gradually update various page elements to use Vue components. The page I tested this bug on has 8 distinct apps on it.