How to handel custom error message in nuxt js

Question

What do you have ?

My frontend is made on Nuxt js and backend is made in node and graphql.

I have the following code snippet from my controller to generate relevant error message:

createUser: async function ({ userInput }, req) {
      const errors = []
      if (!validator.isEmail(userInput.email)) {
        errors.push({ message: 'Email is invalid' })
      }
      //other custom error code
      if (errors.length > 0) {
        error = new Error('Invalid input')
        error.data = errors;
        error.code = 422;
        throw  error
      }
      //other code if no error
}

And my frontend code to reach the controller method from the page (register):

methods: {
    async onSubmit(e) {
      e.preventDefault()
      const graphqlQuery = { //query code goes here}
        const res = await this.$axios.post('http://localhost:8080/graphql', graphqlQuery, {
          headers: {
            'Content-Type': 'application/json'
          }
        })
        if (res.status === 200) {
          this.error.mode = true
          this.error.title = 'Success ! '
          this.error.message = 'Account created successfully. Please login'
          this.error.type = 'success'
        }
        if (res.errors && res.errors[0].status === 422) {
          this.error.mode = true
          this.error.title = 'Verification failed ! '
          this.error.message = res.errors[0].message
          this.error.type = 'danger'
        }
        if (res.errors) {
          this.error.mode = true
          this.error.message = 'User creation failed ! '
          this.error.type = 'danger'
        }
      }
    }

And custom error page:

<template>
  <b-container>
    <b-row>
      <b-col class="error-wrapper">
        <h1 class="error-code">
          {{ statusCode }}
        </h1>
        <h4>
          {{ message }}
        </h4>
        <b-link to="/" class="btn to-home">
          Home
        </b-link>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  name: 'ErrorVue',
  layout: 'default',
  props: {
    error: {
      type: Object,
      default: null
    }
  },
  computed: {
    statusCode () {
      return (this.error && this.error.statusCode) || 500
    },
    message () {
      return this.error.message || 'Error'
    }
  }
}
</script>

<style scoped>

</style>

What are you trying to do ?

I'm trying to handle and display the custom error code with in the page, with the above error handling code.

What is the issue ?

When I intentionally pass wring data to cause error. I'm being redirected to error page with status 500.

I'm not able to console log error in the page(register) but able to log in the error.vue page. The error does contain the custom code and message. And I want to display them in page from where the method was initiated(register).

How do I display the custom message in the register.vue page ? Or does anyone have alternative method to approach the issue ?