title: How to keep the changes when components get rendered again in Vuejs
body: <p>I have 4 components that depending on two boolean values <code>onePage</code> and <code>currentStep</code> should be loaded one by one or all together.</p>
  <pre><code>   &lt;div v-if=&quot;!onePage&quot;&gt;
      &lt;Component_1 v-show=&quot;currentStep === 1&quot;  @eventHandler1=&quot;someFunc()&quot; :prop=&quot;someData1&quot; /&gt;
      &lt;Component_2 v-show=&quot;currentStep === 2&quot;  @eventHandler2=&quot;someFunc()&quot; :prop=&quot;someData2&quot; /&gt;
      &lt;Component_3 v-show=&quot;currentStep === 3&quot;  @eventHandler3=&quot;someFunc()&quot; :prop=&quot;someData3&quot;/&gt;
      &lt;Component_4 v-show=&quot;currentStep === 4&quot;  @eventHandler4=&quot;someFunc()&quot; :prop=&quot;someData4&quot; /&gt;
    &lt;/div&gt;
  
    &lt;div v-else class=&quot;mt-5 pt-1&quot;&gt;
      &lt;Component_1  @eventHandler1=&quot;someFunc()&quot; :prop=&quot;someData1&quot; /&gt;
      &lt;Component_2  @eventHandler2=&quot;someFunc()&quot; :prop=&quot;someData2&quot; /&gt;
      &lt;Component_3  @eventHandler3=&quot;someFunc()&quot; :prop=&quot;someData3&quot;/&gt;
      &lt;Component_4  @eventHandler4=&quot;someFunc()&quot; :prop=&quot;someData4&quot; /&gt;
    &lt;/div&gt;
  </code></pre>
  <p>The question is how to keep the changes within each one of the components when <code>onePage</code> gets toggled?</p>
  <p>Cause for example Component1 won't keep the internal changes made when <code>onePage: false, currentStep: 1</code> (e.g. changes of a data object) and it gets reset to the default values when it gets rendered through the <code>v-else</code> condition in the second Div</p>