<div id="app" v-cloak>
  <component 
             v-for="field in fields" 
             :key="field.id"
             :is="field.type"
             v-bind="field">
  </component>
</div>
[v-cloak] {display: none}
Vue.component('textField', {
  template:'<div>{{ label }}<input type="text" :id="id"></div>',
  data() {
    return {
    }
  },
  computed:{
  },
  props:["label","id"]
});

Vue.component('selectField', {
  template:
`<div>
{{ label }}
<select :id="id">
  <option v-for="answer in answers" :key="answer.value" :value="answer.value">
    {{answer.label}}
  </option>
</select>
</div>`,
  data() {
    return {
    }
  },
  computed:{
  },
  props:["label","id","answers"]
});

Vue.component('radioField', {
  template:
`<div>
  {{ label }}<br/>
  <div v-for="answer in answers" :key="answer.value">
  {{ answer.label }} <input type="radio" :name="id" :value="answer.value" />
  </div>
</div>`,
  data() {
    return {
    }
  },
  computed:{
  },
  props:["label","id","answers"]
});

const app = new Vue({
  el:'#app',
  data() {
    return {
      fields:[
        {
          'id':1,
          'label':'Name',
          'type':'textField'
        },
        {
          'id':2,
          'label':'Email',
          'type':'textField'
        },
        {
          'id':3,
          'label':'Movies',
          'type':'selectField',
          'answers':[
            { value:1,label:"Aa" },
            { value:2,label:"Bb" },
            { value:3,label:"Cc" }
          ]
        },
        {
          'id':4,
          'label':'Food',
          'type':'radioField',
          'answers':[
            { value:1,label:"Aa" },
            { value:2,label:"Bb" },
            { value:3,label:"Cc" }
          ]
        },
      ]
    }
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/vue