维甲酸酯2与NuxtJS 2不能正常工作

Question

我已经在我的NuxtJS项目中安装了vuel分为2来验证表单。根据vuelidate文件，我一步一步地遵循安装和安装说明。到目前为止，我的安装文件是这样的：

package.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"
  }

插件/组合-api.js

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

Vue.use(VueCompositionAPI)

和nuxt.config.js for @vue/组合-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这样的验证属性不会改变。 我不知道为什么会这样。我做错了什么？

Update：(万一解决这个问题可能有用)，我的控制台错误筛选器没有被意外检查，而且我没有看到这个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>