Basic concept/idea for managing forms in Vue

Field.vue

<template>
  <div class="input-group">
    <label class="input-label"><slot></slot></label>

    <input
      class="input"
      v-model="fieldValue"
      :type="type"
      :class="inputClass"
    />
  </div>
</template>

<script>
export default {
  props: {
    name: null,
    value: null,
    type: {
      type: String,
      default: 'text',
    },
    inputClass: {
      type: String,
      default: '',
    },
  },
  computed: {
    identifier() {
      return this.name ? this.name : this.label.toLowerCase().replace(/ /g, '-')
    },
    fieldValue: {
      get() {
        return this.getFieldValue(this.identifier)
      },
      set(value) {
        this.setFieldValue(this.identifier, value)
      },
    },
    label() {
      return this.$slots.default[0].text
    },
  },
  methods: {
    localRegisterField() {
      const initialValue = this.value !== undefined ? this.value : ''

      this.registerField(this.identifier, initialValue)
    },
  },
  created() {
    this.localRegisterField()
  },
  inject: ['getFieldValue', 'setFieldValue', 'registerField'],
}
</script>

Form.vue

<template>
  <form><slot /></form>
</template>

<script>
export default {
  data() {
    return {
      fields: {},
    }
  },

  methods: {
    getFieldValue(field) {
      return this.fields[field]
    },
    setFieldValue(field, value) {
      // Create new fields object
      const fieldsUpdated = Object.assign({}, this.fields, {
        [field]: value,
      })
      this.fields = fieldsUpdated

      this.emitUpdate()
    },
    registerField(name, value) {
      this.fields[name] = value
    },
    emitUpdate() {
      this.$emit('input', this.fields)
    },
  },

  provide() {
    const { getFieldValue, setFieldValue, registerField } = this
    return {
      getFieldValue,
      setFieldValue,
      registerField,
    }
  },

  mounted() {
    this.emitUpdate()
  },
}
</script>

Usage.vue

<template>
  <Form v-model="form">
    <Field>Name</Field>
    <Field name="Phone" type="tel">Phone <Icon type="phone" />>
  </Form>
</template>

<script>
  export default {
    data: () => {
      form: {}
    }
  }
</script>