Vue will remove unused node and set the refs to undefined

[dalphyx]

Version

2.4.4

Reproduction link

https://jsfiddle.net/gloxing/Ltjyjjba/

Steps to reproduce

click button twice, the refs of components will be undefined

What is expected?

the topProgress component show again

What is actually happening?

the refs of component will be undefined

---

The behaviour is normal in Vue 2.4.2.

[posva]

This is actually related to your lib: https://github.com/dalphyx/vue-top-progress/blob/master/src/top-progress.vue#L7
I think that because you're using a v-if, it gets stripped off and doesn't exist (transition being an abstract component that doesn't render a tag). Have you tried using a v-show, it should work: https://jsfiddle.net/t5ad6o31/

Another solution would be to wrap your component in a div or span

[dalphyx]

Yeah, v-show should work. But before v2.4.4 both v-show and v-if works well.

[xgqfrms]

vue refs undefined