LaravelのエラーをVuexを使ってVueコンポーネント上で表示する

<?php
namespace App\Http\Requests;
use Illuminate\Foundation\Http\FormRequest;
use App\Folder;
class FolderRequest extends FormRequest
{
    public function authorize()
    {
-       return false; //ここを変更
+       return true;
    }

    public function rules() //ここにバリデーションを追加
    { 
        return [
            'body' => [
                'required',
                'max:10',       
            ]
        ];
    }

    public function attributes()
    {
        return [
            'body' => 'フォルダ名',
        ];
    }
}

    public function store(FolderRequest $request, Folder $folder) 
    {      
            $folder->fill($request->all());
            $folder->save();
            $folders = Folder::where('user_id', $request->user()->id)->get()->sortByDesc('created_at');
            return $folders;
    }

import Vue from "vue";
import Vuex from "vuex";

import folder from "./folder"

Vue.use(Vuex);

const store = new Vuex.Store({
    modules: {
        folder,
    }
});

export default store;

import axios from "axios";
const state = {
  folders: null,
  folderErrorMessages: null
}

const getters = {
  allfolders: state => state.folders
}

const mutations = {
  setFolders(state, folders) {
    state.folders = folders
  },
  setFolderErrorMessages(state, messages) { 
    state.folderErrorMessages = messages
  }
}

const actions = {
  async add(context, data) {
    const response = await axios.post("/api/folders/add", data)//Laravelで定義したフォルダ追加APIを叩く
    //成功したときの処理
    if (response.status === 200) {
      context.commit('setFolders', response.data)//得られた結果をsetFoldersに渡して、stateを更新
      return false //処理を終了
    }
    //失敗したときの処理
    if (response.status === 422) { 
      context.commit('setFolderErrorMessages', response.data.errors)
    } 
  },
}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
};

  async add(context, data) {
    const response = await axios.post("/api/folders/add", data)//Laravelで定義したフォルダ追加APIを叩く
    //成功したときの処理
    if (response.status === 200) {
      context.commit('setFolders', response.data)//得られた結果をsetFoldersに渡して、stateを更新
      return false //処理を終了
    }
    //失敗したときの処理
    if (response.status === 422) { 
      context.commit('setFolderErrorMessages', response.data.errors)
    } 
  },

<template>
  <div v-if="validationErrors" class="m-2">
    <ul class="alert alert-danger list-unstyled">
      <li v-for="(value, index) in validationErrors" :key="index">{{value}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    errors: Object
  }, //errorsプロパティで親コンポーネントからのエラーを受け取る。
  computed: {
    //propsを直接使わないようにcomputedで詰め替えを行う。
    validationErrors() {
      let errors = Object.values(this.errors)
      errors = errors.flat()
      return errors;
    }
  }
}
</script>

<template>
  <div id="overlay">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title w-100" id="myModalLabel">フォルダを追加</h4>
          <button type="button" class="close" @click="$emit('close')">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
　　　　　　//エラーメッセージコンポーネント
          <validation-errors :errors="folderErrors" v-if="folderErrors"/>
          <form @submit.prevent="$emit('add', new_folder)">
            <input v-model="new_folder.body" type="text" class="form-control m-2">
            <div class="input-group">
              <button class="btn btn-md btn-default light-red m-2 px-3" type="submit" :disabled="!new_folder.body">
                作成
              </button>
              <button class="btn btn-md btn-light m-2 px-3" type="button" @click="$emit('close'),clearError">
                キャンセル
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import ValidationErrors from "../errors/ValidationErrors"
export default {
  components: {
    ValidationErrors
  },
  data() {
    return {
      new_folder: {
        body: ''
      }
    }
  },
  methods: {
    clearError() {
      this.$store.commit('folder/setFolderErrorMessages', null)
    },
  computed: {
    ...mapState({
      folderErrors: state => state.folder.folderErrorMessages
    })
  },
  created() {
    this.clearError() //モーダル表示前にエラーをクリア
  }
}
</script>

<style>
 //省略
</style>

  computed: {
    ...mapState({
      folderErrors: state => state.folder.folderErrorMessages
    })
  },

<validation-errors v-if="folderErrors" :errors="folderErrors"/>

 clearError() {
      this.$store.commit('folder/setFolderErrorMessages', null)
},

  created() {
    this.clearError() //モーダル表示前にエラーをクリア
  }