Root component disappears in specific situation

[posva]

repro: https://codepen.io/skyrpex/pen/mwmJRe?editors=1010 (thanks @skyrpex )

Root instance (vm = new Vue) created with:

• string template or render fuction
• template depending on data
• Using one component

If we modify a reactive property of the vm, the Root component disappears from the devtools:

Commenting that line fixes it:

Current workaround: select the topmost Vue instance and, in theconsole, write $vm.$root to debug the root Vue instance

[skyrpex]

I loose <Root> too, but not sure what triggers it. All I know is:

• I load my page, and there's no <root>.
• I navigate to other page (I'm using vue-router), and then every component dissapears from the vue-devtools.
• I press the vue-devtools' refresh button and <root> is correctly displayed for the rest of the session.

[thomthom]

I'm seeing similar issue as well when I set some properties. Haven't been able to exactly pin down the exact trigger conditions.

[posva]

I accidentally deleted my old repro but I cannot reproduce it anymore 🙁
@skyrpex If you manage to reproduce it in a boiled down codepen (https://codepen.io/pen?template=PWbYJO) or a simple html file, please, could you open a new issue with it?

[skyrpex]

I did it: https://codepen.io/skyrpex/pen/mwmJRe?editors=1010 (here the debug view).

You can see the Root component if you load the devtools before the timeout in the code happens. Then, if you press the devtools' reload button, it'll be gone.

Seems related to:

• Altering a data variable in created() using a timeout (haven't tried changing the variable using a button, though).
• Using the data mentioned before to display or not an element (v-if or ternary operator).

[posva]

Thanks a lot!

[bobmoff]

I can verify that it is the same behaviour for me. As soon as I am modifying a data property on the root component in a callback from either created() or mounted() AND using that property in a v-if to display/hide component => Root is removed from devtools.

[utbroker]

This was happening to me and the problem was due to an invalid component in my router/index.js. Commented out the import and the path reference and problem solved.

[andywarren86]

This is happening to me whenever I load data in the created hook. Would be very grateful if this issue could receive some attention.