Vue: Conditional Rendering bug when using v-if, v-show, v-if together with first element which has a class name

[maxma241]

Version

2.6.10

Reproduction link

https://codesandbox.io/s/vue-template-n369v

Steps to reproduce

create a component
and write the template structure like

  <div>
    <div class="test" v-if="flag">
      <h2>first v-if</h2>
    </div>
    <div v-show="!flag">
      <!-- any component that i want to render -->
      <FullLifeCycle/> 
    </div>
    <div v-if="flag">
      <h2>second v-if</h2>
    </div>
  </div>

when using v-if, v-show, v-if together
and notice that the first element must give a class name
then, the component that in the v-show scope will be created twice (look my example console)

if i change the flag condition(i wrote that with a button), the component instance always recreates every times.

What is expected?

the component instance in v-show scope should be created once

What is actually happening?

when using v-if, v-show, v-if together
and notice that the first element must give a class name
then, the component that in the v-show scope will be created twice (look my example console)

---

I wrote all the component life cycle in v-show scoped.

the solutions

1. remove the first element(with v-if) class name will work correct(but i need the class name, lol)
2. do not use v-if => v-show => v-if structure. (could write as v-if => v-show => v-show, the bug wont happen)

[posva]

Duplicate of https://github.com/vuejs/vue/issues/10331

The workaround in this scenario is to set a key on the div in the middle with the v-show so it gets reused properly