Vuelidate 2 不能与 NuxtJS 2 一起正常工作

Question

我已经安装了 vuelidate 2 来验证我的 NuxtJS 项目中的表单。我按照vuelidate documentation的说明一步一步安装和设置。到目前为止，我的设置文件是这样的：
包.json

"dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "@vue/composition-api": "^1.2.2",
    "@vuelidate/core": "^2.0.0-alpha.26",
    "@vuelidate/validators": "^2.0.0-alpha.22",
    "cookie-universal-nuxt": "^2.1.5",
    "core-js": "^3.15.1",
    "nuxt": "^2.15.7",
    "uikit": "^3.7.1"
  }

插件/composition-api.js

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)

和 nuxt.config.js 用于@vue/composition-api

plugins: [
    { src: '~/plugins/composition-api.js' }
]

最后这就是我在组件中使用 vuelidate 的方式：

<script>
import useVuelidate from '@vuelidate/core'
import { required } from '@vuelidate/validators'

export default {
  setup () {
    return { v$: useVuelidate() }
  },
  data () {
    return {
      contact: {
        name: ''
      }
    }
  },
  validations () {
    return {
      contact: {
        name: { required }
      }
    }
  },
  methods: {
    submitForm () {
      this.v$.$validate()
        .then((isFormValid) => {
          if (isFormValid) {
            console.log('valid!!!')
          } else {
            return false
          }
        })
    },
  }
}
</script>

<template>
  <label>
    <input v-model="contact.name">
    <div v-if="v$.contact.name.$error">Name is required.</div>
  </label>
</template>

这些是发生的几个问题：

1. 当我将v-if="v$.contact.name.$error" 放在模板中时，我收到错误Cannot read property 'name' of undefined。
2. 当我调用 submitForm 方法时，isFormValid 的值始终为 false。即使我填写了contact.name 字段。并且像 $dirty 这样的验证属性不会改变。
   我不知道为什么会发生这些。我做错了什么？

更新：（以防它可能对解决问题有用）我的控制台错误过滤器意外未选中，我没有看到这个 Nuxt 警告：[vue-composition-api] already installed. Vue.use(VueCompositionAPI) should be called only once.。当我搜索这个错误时，我发现 Nuxt 使用了一个名为 Nuxt composition api 的依赖项，它依赖于 @vue/composition-api。但是当我从插件中删除@vue/composition-api 时，即使setup 中的代码也无法正常工作。

Answer 1

vuelidate 的解决方案：

创建插件（plugins/vuelidate.js）：

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

nuxt.config：

plugins: [
    { src: '~/plugins/vuelidate' }
  ],

导入：

import { required } from 'vuelidate/lib/validators'

方法：

formSubmit() {
      this.$v.$touch();
      if (!this.$v.$invalid) {
        // if invalid datas
      }
    },

模板：

        <h3
          :class="{
            'is-invalid': $v.contact.name.$error,
          }"
        >
          Something
        </h3>