Vue: Переход от функционального компонента к нефункциональному с помощью v-if не изменяет атрибут v-data- *.

Версия

2.6.11

Ссылка для воспроизведения

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

Действия по воспроизведению

Установите флажок.

Что ожидается?

На нем должно быть написано «СИНИЙ КОРОБК» на синем фоне.

Что на самом деле происходит?

На нем написано «СИНИЙ КОРОБКУ» без цвета фона.

Проблема связана с тем, что атрибут data-v- * не переустанавливается для div blue_block при его замене. Он по-прежнему использует атрибут data-v- * дочернего div в функциональном компоненте. Таким образом, стиль класса CSS не применяется.

https://imgur.com/a/gukDePJ

Полезно переключаться с функционального компонента на что-то другое. Например, при отображении простого компонента панели загрузки перед переключением на более сложный компонент.