title: Vue component renders only the first element in the template DOM
body: <p>I have a Vue component inside a Vue loop on my website. Here's the JS file:</p>
  
  <pre><code>Vue.component('fb-question-text', {
    props: ['question'],
    template:
      '&lt;label&gt;Prompt&lt;/label&gt;&lt;input type="text" class="form-control" v-model="question.prompt"&gt;&lt;a href="javascript:void" class="fb-remove"&gt;Remove&lt;/a&gt;'
  });
  
  var questionList = new Vue({
    el: '#questions',
    data: {
      questions: [
        {
          type: 'text',
          id: 'question1',
          prompt: ''
        },
        {
          type: 'choice',
          id: 'question2',
          prompt: '',
          choices: ['', '']
        }
      ]
    }
  });
  </code></pre>
  
  <p>This is what my HTML file looks like:</p>
  
  <pre><code>&lt;ul id="questions"&gt;
      &lt;li v-for="(question, index) in questions"&gt;
          &lt;h4&gt;Question {{ index + 1 }}&lt;/h4&gt;
          &lt;fb-question-text v-if="question.type === 'text'" :question="question"&gt;&lt;/fb-question-text&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>As you can see, I am trying to render the fb-question-text component if the question.type is of type "text". While the <code>&lt;li&gt;</code> elements do render in the page, the component template does not render entirely. Only the first DOM element inside the template is rendered (in this case, the <code>&lt;label&gt;</code> element). The input box and <code>&lt;a&gt;</code> that are inside the component do not get rendered for some reason. When I remove the label, the input box gets rendered but nothing after it.</p>
  
  <p>Can someone tell me what is going on?</p>