Vue JS loop with different components - vue.js

Question

I am using Vue JS to make a list that has one generic list item component. If there exists a none generic component that meets the correct type a custom component will be used.
<email-queue-item v-for="item in queue"
:key="item.id"
:item="item"
v-if="type == 'EmailMessage'"></email-queue-item>
<queue-item v-for="item in queue"
:key="item.id"
:item="item"
v-else></queue-item>
The code above better illustrates what I am trying to do. The problem I seem to have is due loops first creating two list and then checks the conditional. Is there a way in due to pick the right component vase on the type and then loop through the list?
The data Used to display these components is like this:
{
name: Email,
type: EmailMessage,
data:[
{...},
{...},
...
]
}

Answer 1

Dynamic components make this pretty easy in the template:
<component
:is="type == 'EmailMessage' ? 'email-queue-item' : 'queue-item'"
v-for="item in queue"
:key="item.id"
:item="item"
/>

Answer 2

If I undersstand correctly, you'd like v-for with dynamic component.
so check Vue Official Guide: dynamic component, then the demo will be like below which uses v-bind:is:
Vue.config.productionTip = false
Vue.component('email-queue-item', {
template: `<div><h3 :style="{'background-color':color}">Email: {{color}}</h3></div>`,
props: ['color']
})
Vue.component('message-queue-item', {
template: `<div><h1 :style="{'background-color':color}">Message: {{color}}</h1></div>`,
props: ['color']
})
new Vue({
el: '#app',
data() {
return {
items: [
{'component':'email-queue-item', 'color':'red'},
{'component':'message-queue-item', 'color':'blue'},
{'component':'email-queue-item', 'color':'green'}
]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<div v-for="(item, index) in items" :key="index" :color="item.color" :is="item.component"></div>
</div>