Vee-validate: how use validate props callback - validation

Question

I'm using vee-validate to validate an input. The validation is custom, as if the input is not valid, a modal is shown and the input value is reset.
I've managed to implement this logic, calling this.$refs.provider.validate(value) inside the handler of #change input event.
However, I've also tried to use the "validate" props callback provided by the ValidationProvider but alas without success. It would be possible to use that for a logic like the one I've described?
My current code:
<template>
<div>
<ValidationProvider
:rules="rules"
v-slot="{ errors, valid }"
ref="provider"
:name="name"
slim
>
<b-form-input
ref="inputField"
:value="inputValue"
:key="inputKey"
#change="changeInput"
v-bind="$attrs"
:placeholder="name"
:state="errors[0] ? false : valid ? true : null"
lazy
type="number"
/>
</ValidationProvider>
<div>
<b-modal hide-header ok-only :id="modalId">
Modal body
</b-modal>
</div>
</div>
</template>
<script>
import { ValidationProvider } from "vee-validate";
export default {
components: {
ValidationProvider,
},
props: {
inputIndex: {
type: String,
required: true,
},
name: {
type: String,
required: true,
},
rules: {
type: [String, Object],
default: "",
},
},
data() {
return {
inputKey: 0,
modalId: "modal" + this.inputIndex,
};
},
computed: {
inputValue: function () {
return this.$store.getters["form/getMisuraN"](this.inputIndex);
},
},
watch: {},
methods: {
changeInput: async function (value) {
await this.updateinput(value);
//other logic not relevant to the issue
},
async updateinput(value) {
const { valid } = await this.$refs.provider.validate(value);
if (!valid) {
value = "";
this.$bvModal.show(this.modalId);
}
this.$store.dispatch("setInputValue", {
index: this.inputIndex,
value: value,
});
this.inputKey++;
},
},
};
</script>
What I'd like to do:
<template>
<div>
<ValidationProvider
:rules="rules"
v-slot="{ errors, valid, validate }"
ref="provider"
:name="name"
slim
>
[...]
</template>
<script>
[...]
methods: {
// use the validate function instead of calling this.$refs.provider.validate(value) inside the // #change handler method
}
</script>

Answer 1

You can!
Get the validate out of the slot for the VP, and pass it to your changeInput event:
<ValidationProvider
:rules="rules"
v-slot="{ errors, valid, validate }"
ref="provider"
:name="name"
slim
>
<b-form-input
ref="inputField"
:value="inputValue"
:key="inputKey"
#change="changeInput($event,validate)"
v-bind="$attrs"
:placeholder="name"
:state="errors[0] ? false : valid ? true : null"
lazy
type="number"
/>
</ValidationProvider>
Then in your changeInput function you'd do something like this:
changeInput: async function (value,validate) {
await this.updateinput(value,validate);
//other logic not relevant to the issue
},
async updateinput(value,validate) {
const { valid } = await validate(value);
if (!valid) {
value = "";
this.$bvModal.show(this.modalId);
}
/...
}