<template>
  <div>
    <component v-for="item in items" :key="item.id" :is="getComponent(item)" :data="item"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
import ComponentC from './ComponentC.vue'

export default {
  data() {
    return {
      items: [
        { id: 1, type: 'A', name: 'Item A' },
        { id: 2, type: 'B', name: 'Item B' },
        { id: 3, type: 'C', name: 'Item C' }
      ]
    }
  },
  methods: {
    getComponent(item) {
      switch (item.type) {
        case 'A':
          return 'component-a'
        case 'B':
          return 'component-b'
        case 'C':
          return 'component-c'
        default:
          return 'div'
      }
    }
  },
  components: {
    ComponentA,
    ComponentB,
    ComponentC
  }
}
</script>