【初学者】railsAPIモードでjsonにエラーを載せて返すが、フロントでエラーメッセージを取得する方法がわからない

お世話になっております。
現在、nuxt.jsとrailsAPIによるアプリケーションを作成中です。
その中のユーザー登録機能においてvalidationエラーになったときのエラーメッセージの取得方法がどうしても分かりません。

前提・実現したいこと

ユーザー登録フォームの上部に、下記のエラーメッセージを表示したい。

"errors": { "password": [ "can't be blank" ], "email": [ "can't be blank" ], "name": [ "can't be blank" ], "full_messages": [ "Password can't be blank", "Email can't be blank", "Name can't be blank" ] }

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

とても長いエラーですみません。要は、data.errorsの取得方法がわからないことが問題です。
実際にレスポンスに含まれているので方法があると思うのですが、どうしても表示できません。

{ "url": "/api/auth/", "method": "post", "data": "{\"name\":\"\",\"email\":\"\",\"password\":\"\",\"password_confirmation\":\"\"}", "headers": { "Accept": "application/json, text/plain, */*", "Content-Type": "application/json;charset=utf-8" }, "baseURL": "/", "transformRequest": [ null ], "transformResponse": [ null ], "timeout": 0, "xsrfCookieName": "XSRF-TOKEN", "xsrfHeaderName": "X-XSRF-TOKEN", "maxContentLength": -1, "axios-retry": { "retryCount": 0, "lastRequestTime": 1589774028785 } }
[object XMLHttpRequest]
{ "data": { "status": "error", "data": { "id": null, "provider": "email", "uid": "", "name": "", "image": null, "email": "", "allow_password_change": false, "created_at": null, "updated_at": null }, "errors": { "password": [ "can't be blank" ], "email": [ "can't be blank" ], "name": [ "can't be blank" ], "full_messages": [ "Password can't be blank", "Email can't be blank", "Name can't be blank" ] } }, "status": 422, "statusText": "Unprocessable Entity", "headers": { "access-control-allow-methods": "GET, POST, PUT, PATCH, DELETE, OPTIONS, HEAD", "access-control-allow-origin": "*", "access-control-expose-headers": "", "access-control-max-age": "7200", "cache-control": "no-cache", "connection": "close", "content-type": "application/json; charset=utf-8", "date": "Mon, 18 May 2020 03:53:48 GMT", "referrer-policy": "strict-origin-when-cross-origin", "transfer-encoding": "chunked", "vary": "Origin", "x-content-type-options": "nosniff", "x-download-options": "noopen", "x-frame-options": "SAMEORIGIN", "x-permitted-cross-domain-policies": "none", "x-request-id": "a20c0e66-a9c0-4180-a3a1-79ff8197667e", "x-runtime": "0.129725", "x-xss-protection": "1; mode=block" }, "config": { "url": "/api/auth/", "method": "post", "data": "{\"name\":\"\",\"email\":\"\",\"password\":\"\",\"password_confirmation\":\"\"}", "headers": { "Accept": "application/json, text/plain, */*", "Content-Type": "application/json;charset=utf-8" }, "baseURL": "/", "transformRequest": [ null ], "transformResponse": [ null ], "timeout": 0, "xsrfCookieName": "XSRF-TOKEN", "xsrfHeaderName": "X-XSRF-TOKEN", "maxContentLength": -1, "axios-retry": { "retryCount": 0, "lastRequestTime": 1589774028785 } }, "request": {} }
true
function() { return { // Standard message: this.message, name: this.name, // Microsoft description: this.description, number: this.number, // Mozilla fileName: this.fileName, lineNumber: this.lineNumber, columnNumber: this.columnNumber, stack: this.stack, // Axios config: this.config, code: this.code }; }

該当のソースコード

sign_up.vue

<template>
  <div class="signup-form">
    <form @submit.prevent="registration">
      <ul>
        <li v-for="list in getMessage" :key="list.length">
          {{ list }}
        </li>
      </ul>
      <p><input v-model="name" type="text" placeholder="ニックネーム" /></p>
      <p>
        <input v-model="email" type="text" placeholder="example@example.com" />
      </p>
      <p><input v-model="password" type="password" placeholder="password" /></p>
      <p>
        <input
          v-model="password_confirmation"
          type="password"
          placeholder="password"
        />
      </p>
      <div class="signup-btn">
        <button type="submit">Sign up</button>
      </div>
    </form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      error: null,
      name: '',
      email: '',
      password: '',
      password_confirmation: ''
    }
  },
  computed: {
    ...mapGetters({
      'getMessage'
    })
  },
  methods: {
    registration() {
      this.$store.dispatch('sign_up', {
        name: this.name,
        email: this.email,
        password: this.password,
        password_confirmation: this.password_confirmation
      })
    }
  }
}
</script>

store/actions.js

export default {
  // サインアップ処理
  async sign_up({ context, commit, $axios }, authData) {
    const payload = {
      messasge: ''
    }
    await this.$axios
      .post('/api/auth/', {
        name: authData.name,
        email: authData.email,
        password: authData.password,
        password_confirmation: authData.password_confirmation
      })
      .then((response) => {
        payload.message = response.data
        this.$router.push('/')
      })
      .catch((errors) => {
        payload.message = errors
        console.log(errors)
      })
      .finally(() => {
        commit('setMessage', payload)
      })
  }
}

store/mutations.js

export default {
  setMessage(state, payload) {
    state.message = payload.message
  }
}

store/index.js

import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'

const store = () => {
  return new Vuex.Store({
    state: {
      message: ''
    },
    getters: {
      getMessage(state) {
        return state.message
      }
    },
    mutations,
    actions
  })
}
export default store

下記はdevise_token_authのgithubに記載されているユーザー登録時のエラーハンドリングです。

def render_create_error
      render json: {
        status: 'error',
        data:   resource_data,
        errors: resource_errors
      }, status: 422
    end

試したこと

actions.jsにおいて下記を変更しても表示されませんでした。

 .catch((errors) => {
        payload.message = errors # これをerrors.dataやerrors.errorsなどに変更したが表示されない
        console.log(errors)
      })

postmanというアプリでAPIに同じPOSTリクエストを送ったところ、下記が返ってきました。

{
    "status": "error",
    "data": {
        "id": null,
        "provider": "email",
        "uid": "",
        "name": null,
        "image": null,
        "email": null,
        "allow_password_change": false,
        "created_at": null,
        "updated_at": null
    },
    "errors": {
        "password": [
            "can't be blank"
        ],
        "email": [
            "can't be blank"
        ],
        "name": [
            "can't be blank"
        ],
        "full_messages": [
            "Password can't be blank",
            "Email can't be blank",
            "Name can't be blank"
        ]
    }
}