Swapping from functional to non-functional component using v-if does not change v-data-* attribute.

[StefanCardnell]

Version

2.6.11

Reproduction link

https://codesandbox.io/embed/heuristic-brown-u7rvw?fontsize=14&hidenavigation=1&theme=dark

Steps to reproduce

Click the tick box.

What is expected?

It should say "BLUE BOX" with a blue background colour.

What is actually happening?

It says "BLUE BOX" with no background colour.

---

The issue stems from the data-v-* attribute not being re-set for the blue_block div when it is swapped to. It is still using the data-v-* attribute of the child div in the functional component. Thus the CSS class styling does not apply.

https://imgur.com/a/gukDePJ

Swapping from a functional component to something else is useful. E.g. When showing a simple loading bar component before swapping to a more complex component.

[sirlancelot]

I think this may have something to do with how Vue recycles nodes during update. As a workaround, adding a key to both the component and the div yields the expected behavior.

[posva]

Might be related to #10416

[PeterAlfredLee]

I don't think this is a problem.

According to the comment here :

functional component with scopeId will not inherit parent scopeId

The functional components should not inherit parent if the parent is scoped.

I think we have a workarounds here: we can remove the scoped attribute in the parent component. Seems it works :
https://codesandbox.io/embed/vigorous-frost-t1f84