Vue component with array of objects as a prop

cool-template.html

<town-form :fields="[ { component:'TownFieldTitle', name:'title' } ]"></town-form>

CoolerComponent.vue

<template>
  <div>

    <!-- Dynamic list of fields from template -->
    <Component v-for="(field, index) in fields" :is="field.component" :key="index" v-model="fields[field.name]" />
    
  </div>
</template>

<script>
  export default {
    name: 'TownForm',
    props: {
      fields: {
        type: Array,
        default: function () {
          return [ { component: 'TownFieldTitle', name: 'title' } ]
        }
      }
    }
  }
</script>

Jake Dohm is the genius behind this.

Todo:

• Loop over fields prop and import each component.
• How to handle fields that require a little extra effort? What if they have extra directives, or need content for slots?