Steps to reproduce the error:

1. type in test1 in input1,
2. click on Next Step
3. click on Previous Step
4. Remove some Characters from input1

Expected behavior Color from MDBInput will change to red if value is not valid

Actual behavior Color will not change anmyore

I don't know how to fix the style error.

Resources (screenshots, code snippets etc.)

<script setup>
import { reactive, ref } from 'vue'
import {
    MDBBtn,
    MDBContainer,
    MDBInput,
    MDBStepper,
    MDBStepperContent,
    MDBStepperForm,
    MDBStepperHead,
    MDBStepperStep,
} from 'mdb-vue-ui-kit'

import { useForm, Field } from 'vee-validate'
import { defineRule } from 'vee-validate'
import { required, min, max, min_value, max_value } from '@vee-validate/rules'

defineRule('required', required)
defineRule('min', min)
defineRule('max', max)
defineRule('min_value', min_value)
defineRule('max_value', max_value)

const form = reactive({
    input1: '',
    input2: '',
    input3: '',
})

const formComplete = ref(false)
const formWizardRef = ref()

const validatedStep1 = ref(false)
const validatedStep2 = ref(false)
const validatedStep3 = ref(false)

const prevStep = () => {
    formWizardRef.value.prevStep()
}
const nextStep = () => {
    formWizardRef.value.nextStep()
}

const { handleSubmit } = useForm()

const validSubmit1 = () => {
    validatedStep1.value = true
    console.log('valid')
    nextStep()
}

const invalidSubmit1 = () => {
    validatedStep1.value = true
    console.log('invalid')
}

const validSubmit2 = () => {
    validatedStep2.value = true
    console.log('valid')
    nextStep()
}

const invalidSubmit2 = () => {
    validatedStep2.value = true
    console.log('invalid')
}

const validSubmit3 = () => {
    validatedStep3.value = true
    console.log('valid')
    nextStep()
}

const invalidSubmit3 = () => {
    validatedStep3.value = true
    console.log('invalid')
}

const checkForm1 = handleSubmit(validSubmit1, invalidSubmit1)
const checkForm2 = handleSubmit(validSubmit2, invalidSubmit2)
const checkForm3 = handleSubmit(validSubmit3, invalidSubmit3)

const test = ref(true)
</script>

<template>
    <MDBContainer>
        <MDBStepper linear ref="formWizardRef" id="stepper" v-if="!formComplete">
            <MDBStepperStep active>
                <MDBStepperHead icon="1"></MDBStepperHead>
                <MDBStepperContent>
                    <form novalidate @submit.prevent="checkForm1">
                        <Field
                            name="form.input1"
                            rules="required|min:5|max:500"
                            v-model="form.input1"
                            v-slot="{ errorMessage }">
                            <MDBInput
                                v-model="form.input1"
                                type="text"
                                label="input1"
                                wrapperClass="mb-2"
                                :is-valid="!Boolean(errorMessage)"
                                :isValidated="validatedStep1"
                        /></Field>

                        <MDBBtn color="primary" class="w-40" type="submit"> Next step </MDBBtn>
                    </form></MDBStepperContent
                >
            </MDBStepperStep>
            <MDBStepperStep
                ><MDBStepperHead icon="2"></MDBStepperHead>
                <MDBStepperContent
                    ><form novalidate @submit.prevent="checkForm1">
                        <Field
                            name="form.input2"
                            rules="required|min:5|max:500"
                            v-model="form.input2"
                            v-slot="{ errorMessage }"
                            ><MDBInput
                                v-model="form.input2"
                                type="text"
                                label="input2"
                                wrapperClass="mb-2"
                                :is-valid="!Boolean(errorMessage)"
                                :isValidated="validatedStep2"
                        /></Field>
                        <MDBBtn color="primary" class="w-40" @click="prevStep()">
                            Previous step </MDBBtn
                        ><MDBBtn color="primary" class="w-40" type="submit"> Next step </MDBBtn>
                    </form></MDBStepperContent
                >
            </MDBStepperStep>
            <MDBStepperStep
                ><MDBStepperHead icon="3"></MDBStepperHead>
                <MDBStepperContent
                    ><form novalidate @submit.prevent="checkForm1">
                        <Field
                            name="form.input3"
                            rules="required|min:5|max:500"
                            v-model="form.input3"
                            v-slot="{ errorMessage }"
                            ><MDBInput
                                v-model="form.input3"
                                type="text"
                                label="input3"
                                wrapperClass="mb-2"
                                :is-valid="!Boolean(errorMessage)"
                                :isValidated="validatedStep3"
                        /></Field>
                        <MDBBtn color="primary" class="w-40" @click="prevStep()">
                            Previous step
                        </MDBBtn>
                        <MDBBtn color="success" class="w-40" type="submit"> Next Step </MDBBtn>
                    </form>
                </MDBStepperContent>
            </MDBStepperStep>
            <MDBStepperStep
                ><MDBStepperHead icon="4"></MDBStepperHead>
                <MDBStepperContent>
                    <pre>{{ form }}</pre>
                    <MDBBtn color="primary" class="w-40" @click="prevStep()">
                        Previous step
                    </MDBBtn>
                    <MDBBtn color="success" class="w-40"> Submit </MDBBtn>
                </MDBStepperContent>
            </MDBStepperStep>
        </MDBStepper>

        <pre>{{ form }}</pre>
    </MDBContainer>
</template>