Добавления сообщения при валидации Vue 2 с помощью ValidationObserver

import {
  configure,
  extend,
  ValidationObserver,
  ValidationProvider
} from 'vee-validate'
import { required, email, min, max } from 'vee-validate/dist/rules'
import Vue from 'vue'

Vue.component('ValidationProvider', ValidationProvider)
Vue.component('ValidationObserver', ValidationObserver)

extend('email', email)
extend('required', required)
extend('min', min)
extend('max', max)

extend('password', {
  params: ['target'],
  validate (value, { target }) {
    return value === target
  },
  message: 'Password confirmation does not match'
})



configure({
  classes: {
    valid: 'is-valid',
    invalid: 'is-invalid'
    

  }
})

<template>
  <div class="d-block text-center">
    <p class="text-left">
      {{ $t("main.header.sidebar.newsletter.description") }}
    </p>
    <ValidationObserver ref="validationObserver" v-slot="{ handleSubmit }">
      <b-form-invalid-feedback :state="!submitError" class="lead mb-3">
        {{ submitError }}
      </b-form-invalid-feedback>
      <b-form
        class="text-left newsletterForm"
        @submit.prevent="handleSubmit(submitNewsletterForm)"
      >
        <b-form-group>
          <b-form-select v-model="newsletterForm.gender" required>
            <b-form-select-option value="2">
              {{ $t("main.sidebar.genderMale") }}
            </b-form-select-option>
            <b-form-select-option value="3">
              {{ $t("main.sidebar.genderFemale") }}
            </b-form-select-option>
          </b-form-select>
        </b-form-group>
        <ValidationProvider
          v-slot="{ classes }"
          name="firstname"
          rules="required"
        >
          <b-form-group>
            <b-form-input
              v-model="newsletterForm.firstname"
              :placeholder="$t('main.header.sidebar.newsletter.firstname')"
              :class="classes"
            />
          </b-form-group>
        </ValidationProvider>
        <ValidationProvider
          v-slot="{ classes }"
          name="lastname"
          rules="required"
        >
          <b-form-group>
            <b-form-input
              v-model="newsletterForm.lastname"
              :placeholder="$t('main.header.sidebar.newsletter.lastname')"
              :class="classes"
            />
          </b-form-group>
        </ValidationProvider>
        <ValidationProvider
          v-slot="{ classes }"
          name="mail"
          rules="required|email"
        >
          <b-form-group>
            <b-form-input
              v-model="newsletterForm.mail"
              type="email"
              :placeholder="$t('main.header.sidebar.newsletter.email')"
              :class="classes"
            />
          </b-form-group>
        </ValidationProvider>
        <ValidationProvider
          v-slot="{ classes }"
          :rules="{ required: { allowFalse: false } }"
          name="checked"
        >
          <div
            class="form-group"
            style="color: silver; font-size: 0.75em"
            v-html="$t('legalNotices.privacyPolicy')"
          />

          <span>{{ classes[0] }}</span>
          <b-form-checkbox
            v-model="newsletterForm.checked"
            :class="classes"
            :unchecked-value="false"
          >
            <span>
              {{ $t("legalNotices.agreementPreffix") }}
              <NuxtLink :to="localePath('/privacy-policy')" target="_blank">
                {{ $t("legalNotices.agreementSuffix") }}
              </NuxtLink>
            </span>
          </b-form-checkbox>
        </ValidationProvider>
        <b-button type="submit" variant="green" class="mt-3" block>
          {{ $t("main.header.sidebar.support.send") }}
        </b-button>
      </b-form>
    </ValidationObserver>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { defineComponent, ref, useContext } from "@nuxtjs/composition-api";
import { ValidationObserver } from "vee-validate";
import { NewsletterData } from "~/types";
import useError from "~/compositions/useError";

import { useCustomer } from "~/compositions";

const initNewsletterForm: NewsletterData = {
  gender: 2,
  firstname: "",
  lastname: "",
  mail: "",
  checked: false,
  skipConfirmationEmail: "false",
};

export default defineComponent({
  name: "HeaderSideBarNewsletterForm",
  emits: ["close-modal"],
  setup(_, { emit }) {
    const { app } = useContext();
    const newsletterForm = ref({ ...initNewsletterForm });
    const validationObserver = ref<InstanceType<
      typeof ValidationObserver
    > | null>(null);
    const submitError = ref<string | boolean>(false);

    const { addNewsletterItem } = useCustomer();
    const submitNewsletterForm = async () => {
      const newsletterData = { ...newsletterForm.value };
      const newAddressResponse = await addNewsletterItem(newsletterData).catch(
        (error) => {
          useError().handleError(
            error,
            (errorArray) => {
              validationObserver.value!.setErrors(errorArray);
            },
            (message) => {
              submitError.value = message;
            }
          );
        }
      );
      if (!newAddressResponse) {
        return;
      }
      emit("close-modal");
      let confirmationMessage = app.i18n.t("common.form.success");
      if (newAddressResponse.responseMessage) {
        confirmationMessage = newAddressResponse.responseMessage;
      }
      Vue.$toast.success(confirmationMessage);
    };

    return {
      newsletterForm,
      submitNewsletterForm,
      submitError,
    };
  },
});
</script>

<style scoped lang="scss">
.loading-height {
  min-height: 350px;
}
form.newsletterForm {
  .custom-checkbox {
    &.failed {
      color: #dc3545;
      a {
        color: #c30f21;
      }
    }
  }
}
</style>