title: Vue did not unmount the conditionally rendered component
body: <p>In below component, first input field has not been unmounted when <code>isInitialDataSetInputtingStage</code> became <code>false</code>:</p>
  <pre class="lang-xml prettyprint-override"><code>&lt;template&gt;
  
    &lt;template v-if=&quot;isInitialDataSetInputtingStage&quot;&gt;
      &lt;InputField label=&quot;Email&quot; required=&quot;required&quot; v-model=&quot;inputtedEmail&quot; /&gt;
      &lt;InputField label=&quot;Accout ID&quot; v-model=&quot;inputtedAccountID&quot; /&gt;
      &lt;InputField label=&quot;Password&quot; v-model=&quot;inputtedPassword&quot; /&gt;
    &lt;/template&gt;
    
    &lt;template v-else=&quot;v-else&quot;&gt;  
      &lt;InputField label=&quot;Confirmation code&quot; v-model=&quot;inputtedSignUpConfirmationCode&quot; /&gt;
    &lt;/template&gt;
  &lt;/template&gt;
  </code></pre>
  <p>Here is a fragment of <code>InputField</code> implementation (TypeScript) with logging:</p>
  <pre class="lang-js prettyprint-override"><code>import { Vue, Component } from &quot;vue-property-decorator&quot;;
  import CompoundControlBase from &quot;@UI_Framework/Components/Controls/CompoundControlBase/CompoundControlBase.vue&quot;;
  
  
  @Component({
    template,
    components: {
      CompoundControlBase
    }
  })
  export default class InputField extends Vue implements IValidatableControl {
  
    public getRootElementForScrollingProviding(): Element {
      return (this.$refs[this.vueReferencesIDs.rootElement] as Vue).$el;
    }
  
    private created(): void {
  
      console.log(&quot;===== will be created&quot;);
      console.log(this.label);
    }
  
    private mounted(): void {
      console.log(&quot;===== will be mounted&quot;);
      console.log(this.label);
      console.log(this.getRootElementForScrollingProviding());
      console.log(&quot;---------------------\n&quot;);
    }
  
    private beforeDestroy(): void {
      console.log(&quot;===== will be destroyed:&quot;);
      console.log(this.label);
      console.log(this.getRootElementForScrollingProviding());
      console.log(&quot;---------------------\n&quot;);
    }
  
    // ...
  }
  </code></pre>
  <p>Here is the log output in browser when <code>isInitialDataSetInputtingStage</code> changing from <code>true</code> to <code>false</code></p>
  <p><a href="https://i.stack.imgur.com/KZPPm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KZPPm.png" alt="enter image description here" /></a></p>
  <p>First, the is no log about input field with label <code>Email</code> has not been unmounted.
  Second, the is no log about input field with label <code>Confirmation code</code> has not been mounted.</p>
  <p>I am sorry about no repro has been prepared. The reproduction of <code>Input field</code> and all its dependencies takes too much time.</p>