Vue: Trocar de componente funcional para não funcional usando v-if não altera o atributo v-data- *.

Versão

2.6.11

Link de reprodução

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

Passos para reproduzir

Clique na caixa de seleção.

O que é esperado?

Deve estar escrito "BLUE BOX" com uma cor de fundo azul.

O que realmente está acontecendo?

Diz "BLUE BOX" sem cor de fundo.

O problema decorre do atributo data-v- * não ser redefinido para o div blue_block quando ele é trocado. Ele ainda está usando o atributo data-v- * do div filho no componente funcional. Portanto, o estilo da classe CSS não se aplica.

https://imgur.com/a/gukDePJ

Trocar de um componente funcional para outro é útil. Por exemplo, ao mostrar um componente simples da barra de carregamento antes de trocar para um componente mais complexo.