onInvalidSubmit dose not work in vee-validate version (^4.5.2) - vue.js

Question

I am trying to capture errors in forms and have to display them in modal. But vee-validate onInvaidSubmit seems not working. See code below.
PS: I copied this example from https://vee-validate.logaretm.com/v4/guide/components/handling-forms
Vue Version : 3, vee-validate: 4.5.11
<template>
<Form v-slot="{ validate }" :validation-schema="schema">
<Field name="email" type="email" />
<ErrorMessage name="email" />
<Field name="password" type="password" />
<ErrorMessage name="password" />
<button #click="validate">Submit</button>
</Form>
</template>
<script>
import { Form, Field, ErrorMessage } from 'vee-validate'
import * as yup from 'yup'
export default {
components: {
Form,
Field,
ErrorMessage,
},
data() {
const schema = yup.object({
email: yup.string().required().email(),
password: yup.string().required().min(8),
})
return {
schema,
}
},
methods: {
onSubmit(values) {
// Submit values to API...
alert(JSON.stringify(values, null, 2))
},
onInvalidSubmit({ values, errors, results }) {
console.log(values) // current form values
console.log(errors) // a map of field names and their first error message
console.log(results) // a detailed map of field names and their validation results
},
},
}
</script>

Answer 1

try the following by adding it to the Form element. see below
<Form v-slot="{ validate }" :validation-schema="schema" #invalid-submit="onInvalidSubmit">
<Field name="email" type="email" />
<ErrorMessage name="email" />
<Field name="password" type="password" />
<ErrorMessage name="password" />
<button #click="validate">Submit</button>
</Form>