Generic input component for Vuejs that supports dynamic input type

GenericInput.js

/**
 * Generic input component of type [text] or [number]
 */
export default {
  render (createElement) {
    return createElement(
      'input',
      {
        'class': {
          'has-error': this.hasErrorClass && !this.hasValidClass,
          'valid-input': this.hasValidClass
        },
        staticClass: [ 'full-width' ],
        attrs: {
          'data-automate-id': this.dataAutomateId,
          type: this.type
        },
        domProps: {
          required: true,
          value: this.value,
          readOnly: this.readOnly,
          disabled: this.disabled
        },
        on: {
          blur: evt => this.$emit('blur', evt),
          change: evt => this.$emit('change', evt),
          click: evt => this.$emit('click', evt),
          input: evt => this.$emit('input', evt.target.value)
        }
      }
    )
  },

  props: {
    dataAutomateId: String,
    disabled: Boolean,
    hasErrorClass: Boolean,
    hasValidClass: Boolean,
    readOnly: Boolean,
    type: {
      type: String,
      validator (type) {
        return type === 'number' || type === 'text'
      },
      default () {
        return 'text'
      }
    },
    value: {
      required: true
    }
  }
}