Control.vue

<script>
    /**
     * @property validator
     **/
    export default {
        name: "Control",
        props: {
            field: {
                type: String,
            },
            type: {
                type: String,
            },
            label: {
                type: String,
            },
            help: {
                type: String,
            },
        },
        inject: [
            'form',
            'validator',
        ],
        computed: {
            isInvalid() {
                return this.validator.has(this.field)
            },
            error() {
                return this.validator.first(this.field)
            }
        },
    }
</script>
<template>
    <div class="element">
        <label :for="field" class="label">
            {{ label }}
        </label>
        <textarea
            v-if="type === 'textarea'"
            :name="field"
            v-model="form[field]"
            class="input"
            :class="{invalid: isInvalid}"
            @input="validator.forget(field)">
        </textarea>
        <input
            v-else
            :name="field"
            :type="type"
            v-model="form[field]"
            class="input"
            :class="{invalid: isInvalid}"
            @input="validator.forget(field)"
        />
        <p class="help" :class="{invalid: isInvalid}">
            {{ error || help }}
        </p>
    </div>
</template>