Insteadof mount all tabs & hiding,use :is to mount

src/components/LotteryPage.vue

@@ -11,9 +11,7 @@ import VirtualLotteryPage from "@/components/VirtualLotteryPage";
 
 export default {
   components: {
-    Tabs,
-    GeneratePage,
-    VirtualLotteryPage
+    Tabs
   },
   data() {
     return {

src/ui/Tabs.vue

@@ -10,12 +10,7 @@
       >{{ tab.name }}</div>
     </div>
     <div class="tab-elements">
-      <component
-        v-for="(tab, index) in tabs"
-        :key="index"
-        :is="tab.component"
-        :class="chosenTab == index ? null : 'hide'"
-      />
+      <component :is="tabs[chosenTab].component" />
     </div>
   </div>
 </template>
@@ -54,9 +49,6 @@ export default {
 h1 {
   text-align: center;
 }
-.hide {
-  display: none;
-}
 
 .tab-container {
   display: flex;