vue, veeValidator, valide field programically - vue.js

Question

I need to valid files type programmatically and next do something:
<template>
<ValidationObserver
ref="form"
tag="form"
type="form"
autocomplete="off"
#submit.prevent="submit()"
>
<div class="box-body">
<div class="row">
<div class="col-lg-8 col-md-6 col-xs-12">
<ValidationProvider
v-slot="{ errors, validate }"
rules="ext:csr"
ref="csr"
:name="$t('central_system.administration.ssl_certifications.csr').toLowerCase()"
>
<div
class="form-group"
:class="{'has-error': errors.length}"
>
<label for="csr">{{ $t('central_system.administration.ssl_certifications.csr') }}</label>
<input
id="csr"
required
type="file"
#change="validate"
#blur="getCsrInfo($event,'csr')"
>
<FormErrorSpan :errors="errors" />
</div>
</ValidationProvider>
.
.
.
<script>
import { ValidationObserver, ValidationProvider, extend } from 'vee-validate'
import { required, confirmed, integer, ext } from 'vee-validate/dist/rules'
import FormErrorSpan from '#/components/Base/templates/forms/FormErrorSpan'
.
.
.
methods: {
async getCsrInfo(event, certyficateItem) {
//UNFORTUNATELLY THIS ALWAYS RETURN TRUE
console.log(await this.$refs.csr.validate())
SSLCertificatesAPI
.getCsrInfo(event.target.files[0])
.then(data => {
this.previewFn(data.data.info)
this.getFileContent(event, certyficateItem)
})
},
.
.
.
As I understand await this.$refs.csr.validate() should return me false, then the file has the wrong extension. but unfortunately, it's always true.
I tried to call validate and getCsrInfo($event,'csr') in one #change, but validation wasn't working then too.

Answer 1

I got it!I found that validate metod in #input work perfectly here.
<ValidationProvider
v-slot="{ errors, validate }"
rules="ext:csr"
ref="csr"
:name="$t('central_system.administration.ssl_certifications.csr').toLowerCase()"
>
<div
class="form-group"
:class="{'has-error': errors.length}"
>
<label for="csr">{{ $t('central_system.administration.ssl_certifications.csr') }}</label>
<input
id="csr"
required
type="file"
//THATS WORK
#input="validate"
#change="getCsrInfo($event,'csr')"
>
<FormErrorSpan :errors="errors" />
</div>
</ValidationProvider>