Vue: Unexpected component destroyed trigger by sibling component

[scmp-teddy-lok]

Version

2.5.17

Reproduction link

https://jsfiddle.net/teddy_scmp/2m6kv3rn/

Steps to reproduce

1. Open console
2. click the TOGGLE bottom

What is expected?

It is weird that the component between the two v-if will destroy and mount again

What is actually happening?

1. AComponent is destroyed which is unexpected
2. BComponent will keep, which I only added a class there.

---

In addition, I find that DIV will cause this issue, if I added a class / change it to a tag / button, it won't destroy.

[posva]

it's because the div is being reused by Vue to create the TOP div.
You can get around it by adding a key to the div wrapping the component a or the TOP div.

[scmp-teddy-lok]

@posva 🙏 thanks a lot. The workaround works, it helps to prevent the bug in my project.