如何使用 Vee-Validate 禁用/启用表单验证按钮？

如何解决如何使用 Vee-Validate 禁用/启用表单验证按钮？

我是 Vue 的新手。我正在使用 Vee-Validate 进行表单验证。我想禁用该按钮，直到验证表单项并在验证表单后立即更新。

我看到的相关问题很少，但对我不起作用。

我的代码：

<template>
  <Form v-slot="{ Meta }">
    <Field v-model="email" name="email" type="email" />
    <Field name="password" type="password" />
    <button :disabled="!(Meta.valid && Meta.dirty)"  @click="Test">ok</button>
  </Form>
</template>

<script>
import { Form,Field } from "vee-validate";

export default {
  components: {
    Form,Field
  }
  // no data,no v-model!!!
};
</script>

我正在使用 Meta.valid Meta.dirty 来获取验证结果。它可以工作，但它不够动态：它不会在电子邮件和密码验证后立即更新按钮，用户必须将注意力转移到电子邮件/密码输入元素上，并且必须单击页面，只有然后重新计算 Meta 值。

另一个问题是，一旦表单通过验证，如果用户更改电子邮件/密码以使表单无效，那么 Meta.valid 不会更新，并且按钮一旦启用就永远不会被禁用。

我查阅了一些其他相关文章，例如 this，但我发现 error.any() 不是函数。

main.js

import {  createApp  } from 'vue'
import App from './App.vue'
import router from './router'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import { setupI18n } from './i18n'
import logger from './logger'
import { en,de,es,it,ja,ptBR,esMX,jaJP } from './locales'
import * as veevalidate from 'vee-validate';

const i18n = setupI18n({
    globalInjection: true,legacy: false,locale: 'en',fallbackLocale: 'en',messages: {
      en,'pt-br': ptBR,'es-mx': esMX,'ja-jp': jaJP
    }
  })
  
createApp(App).use(veevalidate,{
  inject: true}).use(logger).use(i18n).use(router).mount('#app')

有人可以帮忙吗？