将 Vuelidate 与 Nuxt 一起使用 - 即使满足条件，也会看到错误

Question

我正在尝试在我的 Nuxt 项目中使用 Vuelidate。所以我安装了 Vuelidate 包，然后在plugins创建的文件夹中vuelidate.js：

import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

并将其定义在 nuxt.config.js

plugins: [
  {src: '~/plugins/directives.js'},
  {src: '~/plugins/vuelidate.js', mode: 'client'}
],

顺便说一句，在没有mode，只有字符串数组的情况下尝试过- 结果相同。

现在在我的组件中，我有以下（Vuetify）文本字段：

<v-text-field
  id='firstName'
  v-model='formData.firstName'
  label='First Name'
  name='firstName'
  prepend-icon='person'
  type='text'
  :error-messages='firstNameErrors'
  @blur='$v.formData.firstName.$touch'
  @input='$v.formData.firstName.$touch'
/>

我的进口：

import { validationMixin } from 'vuelidate'
import {
  required,
  minLength,
} from 'vuelidate/lib/validators'

我的其余代码：

export default {
    name: 'AuthForm',
    mixins: [validationMixin],
    validations: {
      formData: {
        firstName: {
          /*required: requiredIf(function() {
            return !this.isLogin
          }),*/
          minLength: minLength(2)
        },
    },
    props: {
      formData: {
        type: Object,
        required: true,
        default: () => {}
      }
    },
    computed: {
      firstNameErrors() {
        const errors = []

        if (!this.$v.formData.firstName.$dirty) {
          return errors
        }

        !this.$v.formData.firstName.minLength && errors.push('First name must be at least 2 characters long')

        // !this.$v.formData.firstName.required && errors.push('First name is required')
        return errors
      }
    }
  }

所以我试图验证 firstName 至少有 2 个字符。一旦我开始输入，我确实看到了错误消息，但在 2 个或更多字符时，错误仍然存​​在。

我试图控制台登录this.$v.formData计算属性，但是一旦加载组件并开始输入，它就会打印出来。如果我检查记录的对象，我确实看到this.$v.formData.firstName.$model有 2 个以上的字符，但我仍然看到错误，无论我尝试做什么（例如，$reset在$touch再次调用输入之前调用，使用firstNameErrorsas 方法而不是计算等。 ..)

完全相同的代码在我的 Vue 项目中对我有用，但这是我第一次使用 Nuxt，我不确定为什么这段代码停止工作。我错过了什么？