<h3 dir="auto">Version</h3>
<p dir="auto">2.6.10</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://codesandbox.io/s/vue-template-n369v" rel="nofollow">https://codesandbox.io/s/vue-template-n369v</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">create a component<br>
and write the template structure like</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  &lt;div&gt;
    &lt;div class=&quot;test&quot; v-if=&quot;flag&quot;&gt;
      &lt;h2&gt;first v-if&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div v-show=&quot;!flag&quot;&gt;
      &lt;!-- any component that i want to render --&gt;
      &lt;FullLifeCycle/&gt; 
    &lt;/div&gt;
    &lt;div v-if=&quot;flag&quot;&gt;
      &lt;h2&gt;second v-if&lt;/h2&gt;
    &lt;/div&gt;
  &lt;/div&gt;"><pre class="notranslate">  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">test</span>" <span class="pl-c1">v-if</span>="<span class="pl-s">flag</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">h2</span><span class="pl-kos">&gt;</span>first v-if<span class="pl-kos">&lt;/</span><span class="pl-ent">h2</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">v-show</span>="<span class="pl-s">!flag</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-c">&lt;!-- any component that i want to render --&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">FullLifeCycle</span>/&gt; 
    <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">v-if</span>="<span class="pl-s">flag</span>"<span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">h2</span><span class="pl-kos">&gt;</span>second v-if<span class="pl-kos">&lt;/</span><span class="pl-ent">h2</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">when using v-if, v-show, v-if together<br>
and notice that the first element must give a <code class="notranslate">class</code> name<br>
then, the component that in the v-show scope will be created twice (look my example console)</p>
<p dir="auto">if i change the <code class="notranslate">flag</code> condition(i wrote that with a button), the component instance always recreates every times.</p>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">the component instance in v-show scope should be created once</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">when using v-if, v-show, v-if together<br>
and notice that the first element must give a <code class="notranslate">class</code> name<br>
then, the component that in the v-show scope will be created twice (look my example console)</p>
<hr>
<p dir="auto">I wrote all the component life cycle in v-show scoped.</p>
<p dir="auto">the solutions</p>
<ol dir="auto">
<li>remove the first element(with v-if) class name will work correct(but i need the class name, lol)</li>
<li>do not use v-if =&gt; v-show =&gt; v-if structure. (could write as v-if =&gt; v-show =&gt; v-show, the bug wont happen)</li>
</ol>
<h3 dir="auto">Version</h3>
<p dir="auto">2.6.10</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://codepen.io/Richm8/pen/VoWZQZ" rel="nofollow">https://codepen.io/Richm8/pen/VoWZQZ</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">In the attached codepen, Open console and then click on the toggle button, you'll see that the created and destroyed hooks are called for the <code class="notranslate">logger</code> component even though the component is not having any manipulations performed on it.</p>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">The created and destroy hooks on <code class="notranslate">logger</code> not to be called</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">The created and destroy hooks on <code class="notranslate">logger</code> are being called</p>