vue.js - カスタムコンポーネントでの VueJS Vee-validate

Question

バージョン

VueJs: 2.3.3
Vee-Validate: 2.0.0-rc.25

説明

カスタム コンポーネントがあります。これは文字カウンターを持つ入力であり、この入力内に vee-validate を入れようとしました。フォームが送信されたときにエラーを表示したい。vee-validate ドキュメントのすべての手順に従いましたが、うまくいきませんでした。私のフォームは、入力のエラーを無視して送信されます。

再現手順: vee-validateコード

を使用してカスタム コンポーネントを作成します : Parent.vue

   <vue-input maxlength="20" minlength="3" placeholder="works"
    validate="required|numeric" v-model="dataItem.teste" name="teste"></vue-input>

Component.js

Vue.component('vue-input', {
    props: ['maxlength', 'minlength', 'placeholder', 'validate', 'value', 'name'],
    template: `<div>
              <div class="input-group">
                <input type="text" :name="name" :value="value" 
                @input="$emit('input', $event.target.value); 
                counter = $event.target.value.length" 
                :maxlength="maxlength" :placeholder="placeholder" 
                v-validate="validate" 
                :class="{'is-danger': errors.has(name), 'form-control' : true}">

                Erros: {{errors}}
                <span class="input-group-addon">
                    {{ maxlength - counter }}
                </span>

                <span v-show="errors.has(name)" class="text-danger m-t-xs">
                    {{ errors.first(name) }}
                </span>
             </div>
             </div>`,
             data: () => ({
                 counter: 0
             })
});