-        <validation-observer v-slot="{ invalid }" ref="observer">
+        <Form v-slot="{ meta }" ref="form">
          <v-form autocomplete="on">
            <v-card-title>アカウント登録</v-card-title>
            <v-card-text>

-              <validation-provider v-slot="{ errors }" name="password_confirmation" rules="required|confirmed_password:password">
+              <Field v-slot="{ errors }" v-model="query.password_confirmation" name="password_confirmation" rules="required|confirmed_password:@password">
                <v-text-field
+                  v-bind="field"
                  v-model="query.password_confirmation"
                  :type="showPassword ? 'text' : 'password'"
                  label="パスワード(確認)"
                  prepend-icon="mdi-lock"
                  :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
                  autocomplete="new-password"
                  counter
                  :error-messages="errors"
                  @input="waiting = false"
                  @click:append="showPassword = !showPassword"
                />
-              </validation-provider>
+              </Field>

              <v-btn
                id="sign_up_btn"
                color="primary"
                class="mt-4"
-                :disabled="invalid || processing || waiting"
+                :disabled="!meta.valid || processing || waiting"
                @click="postSingUp()"
              >
                登録
              </v-btn>

-        </validation-observer>
+        </Form>

<script>
- import { ValidationObserver, ValidationProvider, extend, configure, localize } from 'vee-validate'
- import { required, email } from 'vee-validate/dist/rules'
+ import { Form, Field, defineRule, configure } from 'vee-validate'
+ import { localize, setLocale } from '@vee-validate/i18n'
+ import { required, email, min, max, confirmed } from '@vee-validate/rules'
+ import ja from '~/locales/validate.ja' // 標準のメッセージを使うなら'@vee-validate/i18n/dist/locale/ja.json'

- extend('required', required)
- extend('email', email)
- extend('min', min)
- extend('max', max)
- extend('confirmed_password', confirmed)
+ defineRule('required', required)
+ defineRule('email', email)
+ defineRule('min', min)
+ defineRule('max', max)
+ defineRule('confirmed_password', confirmed)

- configure({ generateMessage: localize('ja', require('~/locales/validate.ja.js')) })
+ configure({ generateMessage: localize({ ja }) })
+ setLocale('ja')

export default {
  components: {
-    ValidationObserver,
-    ValidationProvider,
+    Form,
+    Field,

-            this.$refs.observer.setErrors(error.response.data.errors)
+            this.$refs.form.setErrors(error.response.data.errors)

- module.exports = {
-   messages: {
+ const code = 'ja'
+ const messages = {
-     ＜元のメッセージ＞
+     ＜↓変更後のメッセージ＞ ※confirmed_password/confirmed_new_password/size_20MBは追加しています。
   // _default: '{field}は有効な値ではありません',
   // alpha: 'アルファベットのみで入力してください。', // "{field}はアルファベットのみ使用できます",
  // alpha_num: '英数字のみで入力してください。', // "{field}は英数字のみ使用できます",
  // alpha_dash: '英数字とハイフン・アンダースコアのみで入力してください。', // "{field}は英数字とハイフン、アンダースコアのみ使用できます",
  // alpha_spaces: 'アルファベットと空白のみで入力してください。', // "{field}はアルファベットと空白のみ使用できます",
  // between: '0:{min}から1:{max}の値を入力してください。', // "{field}は 0:{min} から 1:{max} の間でなければなりません",
  // confirmed: '致していません。', // "{field}が一致しません",
  confirmed_password: 'パスワードと一致していません。',
  confirmed_new_password: '新しいパスワードと一致していません。',
  // digits: '0:{length}桁の数字を入力してください。', // "{field}は 0:{length}桁の数字でなければなりません",
  // dimensions: '幅0:{width}px、高さ1:{height}px以下にしてください。', // "{field}は幅 0:{width}px、高さ 1:{height}px 以内でなければなりません",
  email: '形式が正しくありません。', // "{field}は有効なメールアドレスではありません",
  // not_one_of: '値が正しくありません。', // "{field}は不正な値です",
  // ext: 'このファイルには対応していません。', // "{field}は有効なファイル形式ではありません",
  // image: 'この画像には対応していません。', // "{field}は有効な画像形式ではありません",
  // integer: '整数のみで入力してください。', // "{field}は整数のみ使用できます",
  // is: '致していません。', // "{field}が一致しません",
  // length: '0:{length}文字で入力してください。', // "{field}は 0:{length} 文字でなければなりません",
  // max_value: '0:{max}以下を入力してください。', // "{field}は 0:{max} 以下でなければなりません",
  max: '0:{length}文字以下で入力してください。', // "{field}は 0:{length} 文字以内にしてください",
  // mimes: 'このファイルには対応していません。', // "{field}は有効なファイル形式ではありません",
  // min_value: '{min}以上を入力してください。', // "{field}は 0:{min} 以上でなければなりません",
  min: '0:{length}文字以上で入力してください。', // "{field}は 0:{length} 文字以上でなければなりません",
  // numeric: '正数を入力してください。', // "{field}は数字のみ使用できます",
  // one_of: '有効な値を入力してください。', // "{field}は有効な値ではありません",
  // regex: '形式が正しくありません。', // "{field}のフォーマットが正しくありません",
  required: '入力してください。', // "{field}は必須項目です",
  // required_if: '入力してください。', // "{field}は必須項目です",
  // size: '0:{size}KB以下のファイルを選択してください。', // "{field}は 0:{size}KB 以内でなければなりません",
  size_20MB: '20MB以下のファイルを選択してください。'
  // url: '形式が正しくありません。' // "{field}は有効なURLではありません"
}

+ export default {
+   code,
+   messages
+ }

-  <Field v-show="tabDescription === 'input'" v-slot="{ errors }" v-model="space.description" name="description">
+  <span v-show="tabDescription === 'input'">
+    <Field v-slot="{ errors }" v-model="space.description" name="description">

+  </span>