How to animate error message in Vue js form?

Question

Vue.js

Good day. The essence of the question is that there is a form on a one-page that pops up in a modal window.
The form was created using the Vue library (because there is a desire to master it), but due to my little experience I can’t “cut down” one “feature”, but I really want to.
To the point:
form component code (partially because it's embarrassing to show that I "got it wrong" there)

<template>
//create an animation of the appearance - the disappearance of the form
    <transition  name="fade"
                 enter-active-class="animated bounceInUp"
                 leave-active-class="animated bounceOutRight"
    >
.... //here is the form code
// пример одного поля
 <div class="row">
                        <div class="input-field " :class="{'wrong-input': isWrongName}">
                            <i class="material-icons prefix small">child_care</i>
                            <input class="input" type="text" id="name" name="name" v-model="name" @change="nameValidation">
                                <span v-if="errorMessages.poorName">{{errorMessages.poorName}}</span>                            
                            <label for="name">Ваше имя:</label>
                        </div>
                    </div>

....//here too the code
</transition>
</template>

Above is an example of one field in which there is a span with a v-if condition that appear when "errorMessages.emptyName" is filled (well, that's understandable)
there is a method of this component that is responsible for validating this field, it looks like this:

nameValidation () {
                if(this.name.length < 2){
                    this.isWrongName = true;
                    this.errorMessages.poorName = errorMessagesLocale[locale].poorName;
                }else{
                    this.isWrongName = false;                  
                    this.errorMessages.poorName = '';
                }
            }

Everything works, i.e. if the condition is not met, the message appears, and the error class is also "binded" to the input block, everything turns red))), but I would like to animate this effect. I use the Animate.css Css library (as you can see from the form tag), and when the form itself appears and disappears, everything works fine, but when error messages appear, they just appear and simply disappear.
I tried to "wrap" these messages in tags, but it doesn't work. It's clear that I'm missing something, but I can't make out what. I would appreciate your advice, thanks!