Veevalidate always return true Vuejs - vue.js

Question

I´m using webpack and instance VeeValidate using this way:
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate, {
// This is the default
inject: true,
// Important to name this something other than 'fields'
fieldsBagName: 'veeFields'
});
I have a vuejs component created for the user to subscribe to the email. The problem is that this form always gives true when I use $validator.validateAll()
Have I not understood well the functioning of Vee-validate?
This is the code of my component newsletter.vue.js
Vue.component('newsletter', {
template : '<div>\
<b-form inline>\
<b-input v-validate required id="email" name="email" class="mb-2 mr-sm-2 mb-sm-0" placeholder="Deja tu email" type="email" :state="validate_input" />\
\
<b-button variant="primary-degree" #click="validateBeforeSubmit">Enviar</b-button>\
</b-form>\
</div>',
props : ['route_post'],
inject: ['$validator'],
data() {
return {
email: '',
}
},
computed: {
validate_input: function() {
return this.errors.has("email")
}
},
methods: {
onSubmit() {
// Form submit logic
},
validateBeforeSubmit() {
this.$validator.validateAll().then((result) => {
console.log(result);
if (result) {
// eslint-disable-next-line
alert('Form Submitted!');
return;
}
alert('Correct them errors!');
});
}
}
});

Answer 1

In order to add a validation of vee-validate you need to add it as value to v-validate option and not directly within the tag.
For more info check required example on docs
Update the below line in your code.
<b-input v-validate="'required'" id="email" name="email" class="mb-2 mr-sm-2 mb-sm-0" placeholder="Deja tu email" type="email" :state="validate_input" />
If you also want to display error you can add below line as =>
<span class="error" v-if="errors.has('email')">{{ errors.first('email') }}</span>