display-error.js

import { Validator } from 'vee-validate';

import loginMixin from '../mixins/login';
import validateMixin from '../mixins/validate';

export default {
  name: 'signup',
  validator: null,
  errors: null,
  mixins: [loginMixin, validateMixin],
  data() {
    return {
      name: '',
      email: '',
      password: '',
      isVisible: false,
    };
  },
  watch: {
    email(value) {
      this.validator.validate('email', value);
    },
  },
  methods: {
    doSignup() {
      this.$validator.validateAll().then(() => {
        this.isVisible = true;
        const { name, email, password } = this;

        this.register(name, email, password).then(() => {
          this.$router.push({
            name: 'profile',
          });
        }).catch((error) => {
          // eslint-disable-next-line
          console.log(error);
        });
      });
    },
  },
  created() {
    this.validator = new Validator({
      email: 'required|email',
    });
    this.$set(this, 'errors', this.validator.errors);
  },
};