在控制台上检查未定义的打印

Question

我正在使用vuelidate的vue进行一些验证，但遇到了问题

我已经安装了vuelidation并将其保存在package.json文件中，因此当我尝试访问this.$v时单击按钮时，它将在控制台上打印未定义

我已经像下面这样在main.js中导入了vuelidate

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuelidate from 'vuelidate'

import 'bootstrap-vue'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

//Vue.config.productionTip = false
Vue.use(vuelidate)
new Vue({
    router,
    store,
    vuelidate,
    render: h => h(App)
}).$mount('#app')

然后，我尝试在登录页面中使用它

<template>
  <form>
    <div class="form-group mb-3">
      <input v-model="form.email"
        name="email"  
        type="email" placeholder="Email address"
        autofocus="" class="form-control rounded-pill border-3">
    </div>
    <div class="form-group mb-3">
      <input v-model="form.password"
        id="password" name="password"
        type="password" placeholder="Password" 
        class="form-control rounded-pill border-3">
    </div>
    <button type="submit" @click.prevent="login" class="btn btn-success btn-block text-uppercase mb-2 rounded-pill">
      Login
    </button>
  </form>
</template>

<script>
  import {required,email} from 'vuelidate/lib/validators'
  export default {
    data () {
      return{
        form: {
          email:null,
          password:null
        }
      }
    },
    validations: {
      form: {
        email: {
          required,
          email
        },
        password:{
          required,
          email
        }
      }
    },
    methods: {
      login () {
        console.log(this.$v) //here it prints all values as undefined
        //  this.$v.form.$touch()
        this.$store.dispatch('auth/loginWithCredentials',this.form)
      }
    }
  }
</script>

请签出

这里的任何人都请帮帮我，我以正确的方式打包了文件，不知道为什么不能使用vuelidate方法或函数