как проверить форму с framework7 и vuejs?

Question

У меня есть следующая форма, указывающая на каждом входе свою валидацию в соответствии с документацией https://framework7.io/vue/inputs.html

<f7-list form class="no-hairlines" @submit.prevent="login(usuario)">
            <!-- Text Input -->
            <f7-list-input
             outline
             label="Usuario"
             floating-label
             type="text"
             :value="usuario.usuario" 
             @input="usuario.usuario = $event.target.value"
             placeholder="Usuario"
             clear-button
             required
             validate
             error-message="Debe ingresar usuario"
             autocomplete="new-user"
            >
            <f7-icon  slot="media">
                <i class="icon f7-icons ios-only">email</i>
                <i class="icon material-icons md-only">mail</i>
            </f7-icon>
            </f7-list-input>

            <!-- Password -->
            <f7-list-input
             outline
             label="Contraseña"
             floating-label
             placeholder="Contraseña"
             :type="show1 ? 'text' : 'password'"
             :value="usuario.password" 
             @input="usuario.password = $event.target.value"
             clear-button
             autocomplete="new-password"
             required
             validate
             error-message="Debe ingresar contraseña"
            >

            <f7-icon  slot="media">
                <i class="icon f7-icons ios-only">lock</i>
                <i class="icon material-icons md-only">lock</i>
            </f7-icon>
            </f7-list-input>
            <f7-block class="text-align-center">
                <f7-button type="submit" large fill>Iniciar sesion</f7-button>
                <a href="/recuperarpass/">¿Olvidaste tu contraseña?</a>
            </f7-block>
            <f7-block>
                <f7-button large fill class="button-social brand-bg-color-facebook">
                    <i class="fab fa-fw fa-lg fa-facebook-f"></i>
                    <span>Continua con facebook</span>
                </f7-button>
            </f7-block>
            <f7-block class="text-align-center">
                <f7-link @click="$f7router.navigate('/registrarCuenta/')" >Crear una cuenta</f7-link>
                <f7-link @click="$f7router.navigate('/')" >Continuar sin iniciar sesión</f7-link>
            </f7-block>
      </f7-list>

Эффективно в начале валидация выполнена хорошо: Пример ввода: до валидации:

Подтверждение ввода:

При вводе текста таким образом, чтобы онисчезает то, что вводить текст обязательно, происходит следующее:

Тень исчезает красным, но текст «Вы должны ввести имя»остается.

В чем может быть ошибка?т.к. при вводе текста текст тоже должен исчезнуть.

Спасибо.