vue3 + ts +vue报错，vuelidate验证插件问题

Question

您好，我在 vue-cli 中配合 t s使用 vuelidate 验证插件时报错：

Property or method "$v" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/re...

自行寻解无果，望大佬们指点一二，感激不尽！！

// main.ts
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from '../src/store/index';
import axios from 'axios';
import VueMaterial from 'vue-material';
import 'vue-material/dist/vue-material.css';
import 'vue-material/dist/theme/default.css';
import Validations from 'vuelidate'

Vue.use(Validations);
Vue.use(VueMaterial);

Vue.prototype.Axios = axios;
Vue.config.productionTip = false;

// Header.vue
<template>
  <aside class="header-wrapper">
    <md-menu md-size="auto" md-align-trigger>
      <md-button md-menu-trigger>
        <md-icon>person</md-icon>
        &nbsp;{{user}}
      </md-button>

      <md-menu-content>
        <md-menu-item class="control" @click="dialog.change.active = true">修改密码</md-menu-item>
        <md-menu-item class="control logout" @click="logout">注销登录</md-menu-item>
      </md-menu-content>
    </md-menu>

    <md-dialog :md-active.sync="dialog.change.active" style="width: 20%;">
      <md-dialog-title style="font-size:16px;">修改密码</md-dialog-title>

      <aside style="padding: 0 24px;">
        <md-field>
          <label for="old-pwd">原密码</label>
          <md-input v-model="form.oldpwd" type="password" name="old-pwd" id="old-pwd" />
          <span class="md-error" v-if="!$v.form.oldpwd.required">必填项</span>
          <span class="md-error" v-else-if="!$v.form.oldpwd.minlength">原密码过短</span>
        </md-field>

        <md-field>
          <label for="new-pwd">新密码</label>
          <md-input v-model="form.newpwd" type="password" name="new-pwd" id="new-pwd" />
          <span class="md-helper-text">密码长度为 4-20 位字符</span>
          <span class="md-error" v-if="!$v.form.newpwd.required">必填项</span>
          <span class="md-error" v-else-if="!$v.form.newpwd.minlength">新密码过短</span>
        </md-field>

        <md-field>
          <label for="new-pwd-again">确认密码</label>
          <md-input v-model="form.newpwd2" type="password" name="new-pwd-again" id="new-pwd-again" />
          <span class="md-error" v-if="!$v.form.newpwd2.required">必填项</span>
          <span class="md-error" v-else-if="!$v.form.newpwd2.minlength">新密码过短</span>
        </md-field>
      </aside>

      <md-dialog-actions>
        <md-button class="md-accent" @click="dialog.change.active = false">取消</md-button>
        <md-button class="md-primary" @click="dialog.change.active = false">提交</md-button>
      </md-dialog-actions>
    </md-dialog>
  </aside>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { validationMixin } from "vuelidate";
import { required, minLength, maxLength } from "vuelidate/lib/validators";

@Component
export default class Header extends Vue{
  mixins: any = [validationMixin]
  user: string = "平台管理员"
  dialog: object = {
    change: {
      active: false
    }
  };
  
  form: object = {
    oldpwd: "",
    newpwd: "",
    newpwd2: ""
  };

  validations: object = {
    form: {
      oldpwd: {
        required,
        minLength: minLength(3),
        maxLength: maxLength(30)
      },
      newpwd: {
        required,
        minLength: minLength(3),
        maxLength: maxLength(30)
      },
      newpwd2: {
        required,
        minLength: minLength(3),
        maxLength: maxLength(30)
      }
    }
  }

  onConfirm(this: any): void {
    this.value = "Agreed";
  }

  onCancel(this: any): void {
    this.value = "Disagreed";
  }

  changePwd(this: any): void {}

  logout(this: any): void {
    window.localStorage.removeItem("_token");
    window.localStorage.removeItem("_time");
    this.$router.push({ path: "/login" });
    console.log("token is already clear");
  }

  getValidationClass(this: any, fieldName: any): any {
    const field = this.$v.form[fieldName];

    if (field) {
      return {
        "md-invalid": field.$invalid && field.$dirty
      };
    }
  }

  clearForm(this: any): void {
    this.$v.$reset();
    this.form.firstName = null;
    this.form.lastName = null;
    this.form.age = null;
    this.form.gender = null;
    this.form.email = null;
  }

  saveUser(this: any): void {
    this.sending = true;

    // Instead of this timeout, here you can call your API
    window.setTimeout(() => {
      this.lastUser = `${this.form.firstName} ${this.form.lastName}`;
      this.userSaved = true;
      this.sending = false;
      this.clearForm();
    }, 1500);
  }

  validateUser(this: any): void {
    this.$v.$touch();

    if (!this.$v.$invalid) {
      this.saveUser();
    }
  }
  
};
</script>


<style lang='scss' scoped>
.header-wrapper {
  display: flex;
  width: 100%;
  flex-flow: row nowrap;
  justify-content: flex-end; // flex-end 两端对齐 space-between
  align-items: center;
  padding: 0 20px;
  font-size: 14px;
}

.logout {
  border-top: 1px solid #ddd;
}

.md-list-item-content {
  height: 30px !important;
  min-height: 30px !important;
}
</style>

Answer 1

$v在哪里定义的呢？没有找到