Conditional vue component show - vue.js

Question

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