Edit in JSFiddle

Vue.component('form-input', {
  props: {
    label: {type: String, required: true},
    id: {type: String, required: true},
    name: {type: String, required: true},
  },
  data() {
    return {
      vModelValue: '',
      localValidationErrMsg: 'バリデーションエラー',
      isValidationErr: false,
      validationExcludePattern: null,
    };
  },
  methods: {
    validation() {
      if (this.validationExcludePattern == null || this.vModelValue == null) {
        return;
      }
      if (this.vModelValue.length > this.vModelValue.replace(this.validationExcludePattern, '').length) {
        this.vModelValue = this.vModelValue.replace(this.validationExcludePattern, '');
        this.isValidationErr = true;
      } else {
        this.isValidationErr = false;
      }
    },
  },
  template: '#form-input-template',
});


const vm = new Vue({
  el: '#app',
});
<div id="app">
  <form-input
    label="ユーザ名"
    id="edit_username"
    name="username"></form-input>
  <form-input
    label="メールアドレス"
    id="edit_mail"
    name="mail"></form-input>
  <form-input
    label="番号"
    id="edit_number"
    name="number"></form-input>
  <form-input
    label="色"
    id="edit_color"
    name="colorr"></form-input>
</div>

<template id="form-input-template">
  <div class="row">
    <div class="col-md-12">
      <div class="form-group row">
        <label
          :for="id"
          class="col-md-3 col-form-label text-md-right">
          {{ label }}
        </label>
        <div class="col-md-9">
          <input
            :id="id"
            :name="name"
            v-model="vModelValue"
            type="text"
            class="form-control"
            @input="validation">
          <div
            v-show="isValidationErr"
            class="text-black-50">{{ localValidationErrMsg }}</div>
        </div>
      </div>
    </div>
  </div>
</template>