Vue

HTML

<div id="app">
  <form class="form" action="">
    <div class="form__section">
      <div class="form__title">{{ form.section.title }}</div>
      <input v-for="(item, i) in form.section.items" :placeholder="item" v-model="form.section.data[i]">
    </div>
    
    <div class="form__section">
      <div class="form__title">{{ form.another.title }}</div>
      <textarea v-for="(item, i) in form.another.items" :placeholder="item" v-model="form.another.data[i]"></textarea>
    </div>
    
    <div class="form__section">
      <div class="form__title">{{ form.more.title }}</div>
      <label v-for="(item, i) in form.more.items"><input type="checkbox" v-model="form.more.data[i]"> {{item}}</label>
    </div>
  </form>
  
  <pre>{{ config }}</pre>
</div>

CSS

.form__section {
  margin-bottom: 15px;
}
label {
  display: block
}

Vue

new Vue({
  el: "#app",
  data: {
    form: {
    	section: {
      	data: [],
      	title: "Текстовые поля",
        items: [
        	'Input 1',
          'Input 2'
        ]
      },
      another: {
      	data: [],
      	title: "Текстовые области",
        items: [
        	'textarea 5',
          'textarea 8'
        ]
      },
      more: {
      	data: [],
      	title: "Чекбокс",
        items: [
        	'checkbox 3',
          'checkbox 2',
          'checkbox 1'
        ]
      }
    }
  },
  computed: {
    config: function() {
    	let result = '';
      for (const key in this.form) {
      	let section = this.form[key];
      	result += section.title + '\n';
      	        
        for (let i = 0; i < section.items.length; i++) {
          if (section.data[i])
            result += section.items[i] + ' - ' + section.data[i] + "\n";
        }
        result += '\n';
      }
     	return result + '\n';
    }
  }
})