JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/vue/1.0.12/vue.min.js"></script>
<div id="app">
  
    <!-- Name -->
<!--     <div class="input-group">
      <input
        type="text"
        placeholder="Name"
        class="form-control"
        v-model="name">
      <div class="input-group-btn">
        <button class="btn btn-success" @click="addRow">Add</button>
        <button class="btn btn-danger" @click="delRow">Del</button>
      </div>
    </div> -->
    
    <!-- Fields -->
    <div class="input-group" v-for="field in formdata">
      {{field.label}}<input type="text" class="form-control" v-model="field.text">
    </div>
<!--     <button class="btn btn-success" @click="pushFields">Submit Fields</button> -->
  
  <hr>
  
  <pre>
    {{ $data | json }}
  </pre>
  
</div>

CSS

#app {
  padding: 40px;
}

.input-group { margin-bottom: 16px; }
.input-group-addon label { margin: 0; font-weight: normal; }

JavaScript

new Vue({

	el: '#app',
  
  data () {
  	return {
    	formdata: [{
      	label: 'A',
        text: 'some text'
      },{
      	label: 'B',
        text: 'some other text'
      },{
      	label: 'C',
        text: ' this is a text'
      }]
    };
  },
  
  methods: {
    	addRow: function() {
    	this.fields.push({
      	label: '',
        sensitive: false,
      });
    },

    
    delRow: function() {
    	this.fields.pop();
    },
    
    pushFields: function()
		{
    	this.formdata.push({
      name: this.name,
      fields : this.fields
      });
    }
  
  }

});