title: Vue JS loop with different components
body: <p>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.</p>
  
  <pre><code> &lt;email-queue-item v-for="item in queue"
                            :key="item.id"
                            :item="item"
                            v-if="type == 'EmailMessage'"&gt;&lt;/email-queue-item&gt;
          &lt;queue-item v-for="item in queue"
                            :key="item.id"
                            :item="item"
                            v-else&gt;&lt;/queue-item&gt;
  </code></pre>
  
  <p>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?</p>
  
  <p>The data Used to display these components is like this:</p>
  
  <pre><code>{
      name: Email,
      type: EmailMessage,
      data:[
          {...},
          {...},
          ...
      ]
  }
  </code></pre>