Nuxt.js で vee-validate をインストールした際に発生したエラー解決について

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
現在、「Nuxt&FirebaseではじめるサーバーレスWebアプリ開発入門」のQ&Aアプリを開発しております。
サインアップ機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

 ERROR  [Vue warn]: Property or method "errors" 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/reactivity.html#Declaring-Reactive-Properties.

found in

---> <App/pages/signup.vue> at app/pages/signup.vue
       <Nuxt>
         <App/layouts/default.vue> at app/layouts/default.vue
           <Root>


 ERROR  [Vue warn]: Error in render: "TypeError: Cannot read property 'has' of undefined"

found in

---> <App/pages/signup.vue> at app/pages/signup.vue
       <Nuxt>
         <App/layouts/default.vue> at app/layouts/default.vue
           <Root>

該当のソースコード

signupvue
1<template>
2  <div>
3    <section class="section no-top-pad">
4      <h5 class="title is-5">
5        サインアップ
6      </h5>
7      <hr>
8
9      <div class="columns is-centered is-mobile">
10        <div class="column is-half-desktop is-full-mobile is-full-tablet">
11          <form @submit.prevent="onSignUp">
12            <div class="field">
13              <label class="label">Name</label>
14              <div class="control">
15                <input
16                  v-model="displayName"
17                  v-validate="'required|min:4'"
18                  class="input"
19                  type="text"
20                  name="displayName"
21                  :class="{ 'is-danger': errors.has('displayName') }"
22                >
23                <p
24                  v-show="errors.has('displayName')"
25                  class="help is-danger"
26                >
27                  {{ errors.first('displayName') }}
28                </p>
29              </div>
30            </div>
31            <div class="field">
32              <label class="label">Email</label>
33              <div class="control">
34                <input
35                  v-model="email"
36                  v-validate="'required|email'"
37                  class="input"
38                  type="email"
39                  name="email"
40                  :class="{ 'is-danger': errors.has('email') }"
41                >
42                <p v-show="errors.has('email')" class="help is-danger">
43                  {{ errors.first('email') }}
44                </p>
45              </div>
46            </div>
47            <div class="field">
48              <label class="label">Password</label>
49              <div class="control">
50                <input
51                  v-model="password"
52                  v-validate="'required|min:6'"
53                  class="input"
54                  type="password"
55                  name="password"
56                  :class="{ 'is-danger': errors.has('password') }"
57                >
58                <p
59                  v-show="errors.has('password')"
60                  class="help is-danger"
61                >
62                  {{ errors.first('password') }}
63                </p>
64              </div>
65            </div>
66
67            <div class="field">
68              <div class="control">
69                <button
70                  class="button is-primary"
71                  :class="{ 'is-loading': busy }"
72                  :disabled="busy"
73                >
74                  Signup
75                </button>
76              </div>
77            </div>
78          </form>
79        </div>
80      </div>
81    </section>
82  </div>
83</template>
84
85<script>
86import apiJobMixin from '@/mixins/apiJobMixin'
87
88export default {
89  mixins: [apiJobMixin],
90  data () {
91    return {
92      displayName: '',
93      email: '',
94      password: ''
95    }
96  },
97  methods: {
98    onSignUp () {
99      // vee-validateによるバリデーションチェック
100      this.$validator.validateAll().then((result) => {
101        if (result) {
102          const signUpData = {
103            displayName: this.displayName,
104            email: this.email,
105            password: this.password
106          }
107          // storeで定義したsignUpUserアクションにdispatch
108          this.$store.dispatch('signUpUser', signUpData)
109        }
110      })
111    },
112    jobsDone () {
113      // apiJobMixinで叩かれる
114      this.removeErrors()
115      // アカウント登録が完了したのでルートパスにリダイレクトします。
116      this.$router.replace('/')
117    }
118  }
119}
120</script>
121

nuxtconfigjs
1import HardSourceWebpackPlugin from 'hard-source-webpack-plugin'
2
3export default {
4  mode: 'universal',
5  srcDir: 'app',
6  /*
7  ** Headers of the page
8  */
9  head: {
10    title: process.env.npm_package_name || '',
11    meta: [
12      { charset: 'utf-8' },
13      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
14      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
15    ],
16    link: [
17      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
18    ]
19  },
20  /*
21  ** Customize the progress-bar color
22  */
23  loading: { color: '#fff' },
24  /*
25  ** Global CSS
26  */
27  css: [
28  ],
29  /*
30  ** Plugins to load before mounting the App
31  */
32  plugins: [
33    { src: '@/plugins/vee-validate', ssr: false }, '@/plugins/firebase'
34  ],
35  /*
36  ** Nuxt.js dev-modules
37  */
38  buildModules: [
39    // Doc: https://github.com/nuxt-community/eslint-module
40    '@nuxtjs/eslint-module'
41  ],
42  /*
43  ** Nuxt.js modules
44  */
45  modules: [
46    // Doc: https://github.com/nuxt-community/modules/tree/master/packages/bulma
47    '@nuxtjs/bulma',
48    // Doc: https://axios.nuxtjs.org/usage
49    '@nuxtjs/axios'
50  ],
51  /*
52  ** Axios module configuration
53  ** See https://axios.nuxtjs.org/options
54  */
55  axios: {
56  },
57  /*
58  ** Build configuration
59  */
60  build: {
61    postcss: {
62      preset: {
63        features: {
64          customProperties: false
65        }
66      }
67    },
68    /*
69    ** You can extend webpack config here
70    */
71    extend (config, ctx) {
72      config.plugins.push(new HardSourceWebpackPlugin())
73    }
74  }
75}
76

veevalidatejs
1import Vue from 'vue'
2import VeeValidate, { Validator } from 'vee-validate'
3import ja from 'vee-validate/dist/locale/ja'
4
5Validator.localize('ja', ja)
6Vue.use(VeeValidate, { locale: 'ja' })
7

試したこと

こちらを参考に、plugins/vee-validate.js, nuxt.config.js の plugins ファイル内の内容、また、vee-validate のバージョンをアップさせました。

補足情報（FW/ツールのバージョンなど）

packagejson
1{
2  "name": "qaSample",
3  "version": "1.0.0",
4  "description": "My brilliant Nuxt.js project",
5  "author": "",
6  "private": true,
7  "scripts": {
8    "dev": "nuxt",
9    "build": "nuxt build",
10    "start": "nuxt start",
11    "generate": "nuxt generate",
12    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
13    "dev-debug": "node --inspect-brk=9229 node_modules/nuxt/bin/nuxt"
14  },
15  "dependencies": {
16    "@firebase/auth": "^0.12.4",
17    "@firebase/firestore": "^1.7.0",
18    "@nuxtjs/axios": "^5.3.6",
19    "@nuxtjs/bulma": "^1.2.1",
20    "firebase": "^7.3.0",
21    "nuxt": "^2.0.0",
22    "vee-validate": "^3.0.11"
23  },
24  "devDependencies": {
25    "@nuxtjs/eslint-config": "^1.0.1",
26    "@nuxtjs/eslint-module": "^1.0.0",
27    "babel-eslint": "^10.0.1",
28    "eslint": "^6.1.0",
29    "eslint-plugin-nuxt": ">=0.4.2",
30    "hard-source-webpack-plugin": "^0.13.1"
31  }
32}
33