setErrors/setFieldError does not work after re-render

What happened?

<script lang="ts">

const stepIndex = ref(0)

function onSubmit(setErrors, goToStep) {
    // get errors from server
    goToStep(1)
    setErrors({...})
    // No errors are displayed on the step we navigate to
}

</script>

<template>
    <Form
        as="div"
        :key="stepIndex"
        v-slot="{ setErrors }"
        keep-values
        :initial-values="initialValues"
        :validation-schema="toTypedSchema(schemaObjects[stepIndex - 1])"
    >
        <Stepper
            v-slot="{ goToStep }"
            v-model="stepIndex"
        >
            <form @submit="onSubmit( setErrors, goToStep )">
                ...
            </form>
        </Stepper>
    </Form>
</template>

I've attempted setting timeouts at various points to see if there is a re-rendering issue but that doesn't work. If I set the errors 5 seconds after the step change then nothing happens.

If I set errors on the step I'm currently on then the errors show correctly.

The stepper I'm using is this: https://www.radix-vue.com/components/stepper.html#api-reference

Reproduction steps

1. 2. 3. ...

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

[ ] Firefox
[x] Chrome
[ ] Safari
[ ] Microsoft Edge

Relevant log output

No response

Demo link

none

Code of Conduct

[X] I agree to follow this project's Code of Conduct

logaretm / vee-validate

setErrors/setFieldError does not work after re-render #4938