title: Vue forcing closing tags
body: <p>I am building a dynamic form from few 100 lines of json. Each json object has a type which maps to a input/date/heading etc:</p>
  
  <pre><code>{ name: "input1", label: "input1 ", placeholder: "Enter text", value: "", type: "text"},
  { name: "input2", label: "input2", placeholder: "Enter text", value: "", type: "text"},
  { name: "title", label: "Title", placeholder: "", value: "", type: "title"},
  { name: "input3", label: "input3", placeholder: "Enter date", value: "", type: "date"},
  { name: "input4", label: "input4", placeholder: "Enter text", value: "", type: "text"},
  
  
  &lt;template v-for="item in data"&gt;
  
      &lt;template v-if="item.type === 'text'"&gt;
        &lt;label&gt;{{item.label}}&lt;/label&gt;
        &lt;input type="text" v-model="item.value" :placeholder="item.placeholder" /&gt;
      &lt;/template&gt;
  
      &lt;template v-if="item.type === 'date'"&gt;
        &lt;label&gt;{{item.label}}&lt;/label&gt;
        &lt;input type="date" v-model="item.value" :placeholder="item.placeholder" /&gt;
      &lt;/template&gt;
  
      &lt;template v-if="item.type === 'title'"&gt;
        &lt;h1&gt;{{item.label}}&lt;/h1&gt;
      &lt;/template&gt;
  
  &lt;/template&gt;
  </code></pre>
  
  <p>I want to group sections together in div for styling. So I tried:</p>
  
  <pre><code>{ name: "input1", label: "input1 ", placeholder: "Enter text", value: "", type: "text"},
  { name: "input2", label: "input2", placeholder: "Enter text", value: "", type: "text"},
  { name: "openDiv", label: "", placeholder: "", value: "", type: "openDiv"},
  { name: "title", label: "Title", placeholder: "", value: "", type: "title"},
  { name: "input3", label: "input3", placeholder: "Enter date", value: "", type: "date"},
  { name: "input4", label: "input4", placeholder: "Enter text", value: "", type: "text"},
  { name: "closeDiv", label: "", placeholder: "", value: "", type: "closediv"},
  
  &lt;template v-for="item in data"&gt;
  
      &lt;template v-if="item.type === 'text'"&gt;
        &lt;label&gt;{{item.label}}&lt;/label&gt;
        &lt;input type="text" v-model="item.value" :placeholder="item.placeholder" /&gt;
      &lt;/template&gt;
  
      &lt;template v-if="item.type === 'date'"&gt;
        &lt;label&gt;{{item.label}}&lt;/label&gt;
        &lt;input type="date" v-model="item.value" :placeholder="item.placeholder" /&gt;
      &lt;/template&gt;
  
      &lt;template v-if="item.type === 'title'"&gt;
        &lt;h1&gt;{{item.label}}&lt;/h1&gt;
      &lt;/template&gt;
  
      &lt;template v-if="item.type === 'openDiv'"&gt;
        &lt;div class="mydiv"&gt;
      &lt;/template&gt;
  
      &lt;template v-if="item.type === 'closediv'"&gt;
        &lt;/div&gt;
      &lt;/template&gt;
  
  &lt;/template&gt;
  </code></pre>
  
  <p>Vue is not compiling as my Div is missing a closing tag. How can I go about this? I tried v-html but this is also forcing close tags. </p>