如何使用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>

在开始时，有效地完成了验证：输入示例：验证之前：

输入验证：

输入文本以使其消失而必须输入文本时，会发生以下情况：

阴影消失为红色，但仍保留文本“您必须输入名称”。

可能是什么错误？因为输入文字时文字也必须消失。

谢谢。