JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="app">
  <div class="left">
    V-html:
    <div v-for="n in numInputs" :key="n">
      <div v-html="input"></div>
    </div>
  </div>

  <div class="left">
    Input:
    <div v-for="n in numInputs" :key="n+100">
      <input />
    </div>
  </div>

  <div class="left">
    Component:
    <div v-for="n in numInputs" :key="n+1000">
      <my-input></my-input>
    </div>
  </div>
</div>

CSS

.left {
  float: left;
  margin-left: 10px;
}

JavaScript

Vue.component('my-input', {
  template: '<div><input type="text" v-model="value" /></div>',
})


var app = new Vue({
  el: '#app',
  data: {
    numInputs: 1,
    input: '<input />'
  }
})

setInterval(() => {
  app.numInputs++;
  app.numInputs--;
}, 2000)