vue component switcher

html

<template>
  <v-card>
  <div v-if="!currentTab">
  ...
  </div>
    <component v-else :is="currentTabComponent" />
  </v-card>

  <v-row class="d-flex align-center">
    <v-col v-for="tab in games" :key="tab.name">
      <v-item v-slot="{ active, toggle }">
        <v-card>
          <v-card @click="toggle; currentTab = tab;">
            <v-scroll-y-transition>
              <h3 class="font-weight-light">{{ tab.name }}</h3>
            </v-scroll-y-transition>
          </v-card>
        </v-card>
      </v-item>
    </v-col>
  </v-row>
</template>

js

<script>
const One = () => import('~/components/...');
const Two = () => import('~/components/...');
const Three = () => import('~/components/...');

export default {
  data: () => ({
    currentTab: null,
    games: [
      { name: 'one', component: One },
      { name: 'two', component: Two },
      { name: 'three', component: Three },
    ],
  }),
  computed: {
    currentTabComponent() {
      return this.currentTab?.component;
    },
  },
};
</script>