AdminItem.vue

<script setup>
defineProps({
  msg: {
    type: String,
    required: true
  }
})
</script>
<template>
  <div class="item">
    <div>Admin Component</div>
    <h1>{{ msg }}</h1>
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<style scoped>
.item {
  width: 400px;
  height: 20vh;
  background-color: black;
  color: white;
  border: 1px solid grey;
  border-radius: 1em;
  padding: 1em;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
}
</style>

DistiguishedItem.vue

<script setup>
defineProps({
  msg: {
    type: String,
    required: true
  }
})
</script>
<template>
  <div class="item">
    <div>Distiguished Component</div>
    <h1>{{ msg }}</h1>
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<style scoped>
.item {
  width: 400px;
  height: 20vh;
  background-color: firebrick;
  color: white;
  border: 1px solid grey;
  border-radius: 1em;
  padding: 1em;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
}
</style>

GuestItem.vue

<script setup>
defineProps({
  msg: {
    type: String,
    required: true
  }
})
</script>
<template>
  <div class="item">
    <div>Guest Component</div>
    <h1>{{ msg }}</h1>
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<style scoped>
.item {
  width: 400px;
  height: 20vh;
  background-color: blue;
  color: white;
  border: 1px solid grey;
  border-radius: 1em;
  padding: 1em;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
}
</style>

HomeView.vue

<script setup>
import SwitchItem from '../components/SwitchItem.vue'
import SwitchItem2 from '../components/SwitchItem2.vue'
</script>

<template>
  <main>
    <SwitchItem />
    <SwitchItem2 />
  </main>
</template>

SelectItem.vue

<script>
import { ref, defineComponent } from 'vue'

export default defineComponent({
  setup(_, context) {
    const user = ref('guest')

    const emitUserChange = () => {
      
      context.emit('change-user', user.value);
    }

    return {
      user,
      emitUserChange
    }
  }
})
 
</script>

<template>
  <select v-model="user" @click="emitUserChange">
    <option value="admin">Admin</option>
    <option value="guest">Guest</option>
    <option value="distiguished">Distiguished</option>
  </select>
  <p>{{ user }}</p>
</template>

SwitchItem.vue

<script>
import { ref, computed } from 'vue'
import AdminItem from './Users/AdminItem.vue'
import DistinguishedItem from './Users/DistinguishedItem.vue'
import GuestUser from './Users/GuestUser.vue'
import SelectItem from './SelectItem.vue'

export default {
  components: {
    SelectItem
  },
  setup() {
    const user = ref('guest')

    const changeComponent = computed(() => {
      const myComponent = {
        admin: AdminItem,
        distiguished: DistinguishedItem,
        guest: GuestUser
      }

      return myComponent[user.value]
    })

    const setUserChange = (newUser) => (user.value = newUser)

    return {
      user,
      changeComponent,
      setUserChange
    }
  }
}
</script>

<template>
    
  <SelectItem @change-user="setUserChange" />

  <component :is="changeComponent" :msg="`${user} information`">
    <p style="width: 200px; height: 4vh">I am a {{ user }} user</p>
  </component>
</template>

SwitchItem2.vue

<script>
import { ref } from 'vue'
import AdminItem from './Users/AdminItem.vue'
import DistinguishedItem from './Users/DistinguishedItem.vue'
import GuestUser from './Users/GuestUser.vue'
import SelectItem from './SelectItem.vue'

export default {
  setup() {
    const user = ref('guest')

    const setUserChange = (newUser) => (user.value = newUser)

    return { user, setUserChange }
  },
  components: {
    SelectItem,
    AdminItem,
    DistinguishedItem,
    GuestUser
  }
}
</script>

<template>
  <h1 style="margin-top: 2em">Using IF Statement</h1>
  
  <SelectItem @change-user="setUserChange" />

  <template v-if="user === 'admin'">
    <AdminItem :msg="`${user} information`">
      <p style="width: 200px; height: 4vh">I am an {{ user }} user</p>
    </AdminItem>
  </template>

  <template v-else-if="user === 'guest'">
    <GuestUser :msg="`${user} information`">
      <p style="width: 200px; height: 4vh">I am a {{ user }} user</p>
    </GuestUser>
  </template>

  <template v-else>
    <DistinguishedItem :msg="`${user} information`">
      <p style="width: 200px; height: 4vh">I am a {{ user }} user</p>
    </DistinguishedItem>
  </template>
</template>