Vue-devtools: why dynamically mounted vue components does not appear in devtool?

[topul]

https://laracasts.com/discuss/channels/vue/why-dynamically-mounted-vue-components-does-not-appear-in-devtool

Hi, everyone, I am testing following scenario: I have created one component which will be dynamically mounted to a dom with some id; when i click one element(which has a @click handler bound with it, i will initiate that component and mount it into dom. My question is: I have inspected in the devtool, that new inserted vue component can not be seen as a child of root vue instance. What is the problem? Is this the normal case or what i have done wrong with? Please see following code: http://jsbin.com/fikida/edit?html,js,console,output

Thanks~!

I have the same question with above

[skyrpex]

Have you guys pressed the Refresh button?

[topul]

@skyrpex yeah,of course,not just me, all the man in my team have the same question.

[yyx990803]

Vue devtools scans the page for components and will stop when it finds an instance. This is based on the assumption that any components within that DOM tree will be a "proper" child component of the component found at that root.

A manually mounted component inside another component thus cannot be detected, because it has no programmatic connection to the containing component at all.

From a usage perspective, it is not recommended to manually mount inside another component's DOM in the first place. Always prefer proper data-driven child components.

[topul]

@yyx990803 谢尤大解析，已经换了动态组件方式解决了