title: Conditional vue component show
body: <p>I'm building a generic table component on <strong>VUE</strong>, and pass by <code>props</code> the reference source. </p>
  
  <p>Example:</p>
  
  <pre><code>&lt;drk-table table="users"&gt;&lt;/drk-table&gt;
  </code></pre>
  
  <p>After this, I use the <code>Axios</code> to load the data from my server in the <code>mounted()</code> event.</p>
  
  <p>This works fine when I have <strong>only one component in my template</strong>. </p>
  
  <hr>
  
  <p>But if I try to reuse the component with <strong>different props</strong> in a conditional <strong>v-if</strong>, only the first table its load:</p>
  
  <pre><code>&lt;div v-if="currentPage == 0"&gt;
      &lt;drk-table table="users"&gt;&lt;/drk-table&gt;
  &lt;/div&gt;
  &lt;div v-else-if="currentPage == 1"&gt;
      &lt;drk-table table="admins"&gt;&lt;/drk-table&gt;
  &lt;/div&gt;
  
  *(currentPage is a data field)*
  </code></pre>
  
  <hr>
  
  <p>However if I do the same with <strong>v-show</strong> it's works:</p>
  
  <pre><code>&lt;div v-show="currentPage == 0"&gt;
      &lt;drk-table table="users"&gt;&lt;/drk-table&gt;
  &lt;/div&gt;
  &lt;div v-show="currentPage == 1"&gt;
      &lt;drk-table table="admins"&gt;&lt;/drk-table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;v-app-bar app clipped-left color="amber"&gt;
          &lt;/v-app-bar&gt;
  
           &lt;v-navigation-drawer v-model="drawer" app clipped color="grey lighten-4"&gt;
          &lt;/v-navigation-drawer&gt;
  
          &lt;v-content&gt;
              &lt;v-container fluid fill-height&gt;
                  &lt;v-layout align-center justify-center&gt;
                      &lt;v-flex text-xs-center&gt;
                          &lt;div v-if="currentPage == 0"&gt;
                               &lt;drk-table table="users"&gt;&lt;/drk-table&gt;
                          &lt;/div&gt;
                          &lt;div v-else-if="currentPage == 1"&gt;
                              &lt;drk-table table="admins"&gt;&lt;/drk-table&gt;
                          &lt;/div&gt;
                      &lt;/v-flex&gt;
                  &lt;/v-layout&gt;
              &lt;/v-container&gt;
          &lt;/v-content&gt;
          &lt;v-footer color="indigo" app&gt;
          &lt;/v-footer&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      data: () =&gt; ({
          drawer: false,
          itens: [
              { icon: 'contacts', text: 'item0' },
              { icon: 'settings', text: 'item1' },
          ],
          currentPage : 0,
  
      }),
  
      methods:{
          goPage(item){
              console.log("goint to "+item);
              this.currentPage = item;
          }
      }
  
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>The official documentation from <code>VUE</code> says that the <code>v-if</code> will recreate the item every time who the condition turns TRUE.</p>
  
  <p>My doubt about this is why the <code>v-if</code> doesn't work properly when I use the same component with different props?</p>
  
  <p>In this case, I need to change my <code>mounted()</code> event?</p>