What about typed components?

Question

Vue.js

In general, there is a certain problem.
There is a certain feed in which there are different types of news, for example, raz, dva, tri
. And data comes from the api in this format:

[
{
  type: 'raz',
  data: {...}
},
{
  type: 'dva',
  data: {...}
},
...
]

Each type has its own component that receives data at the input via props
How would it be more correct to import these components
So far, but it seems to me that this is something wrong

<template>
    <div>

        <div v-for="item in feed">

            <feed-raz v-if="item.type==='raz'" :data="item.data" />
            <feed-dva v-if="item.type==='dva'" :data="item.data" />
            <feed-tri v-if="item.type==='tri'" :data="item.data" />

        </div>

    </div>
</template>
<script>
    import feedRaz from './feedRaz'
    import feedDva from './feedDva'
    import feedTri from './feedTri'

    export default {
        components: {
            feedRaz, feedDva, feedTri
        }
    }
</script>

Answer 1

This clearly suggests the use of is , it should turn out something like
And in order not to manually import each of the components, use require.context .