Flash messages display and sometimes they don't - laravel

Question

I'm using a spatie/laravel-flash for displaying some flash messages. It works when I use simple HTML forms, but when I use Vue.js templates, the message doesn't show. (and sometimes they don't) after submitting the form and go to the next request.
main layout
<div class="col-lg-12 mb-2">
#include('layouts.partials.flash_message')
</div>
<section class="py-5">
#yield('content')
</section>
layouts.partials.flash_message
#if(flash()->message)
<div class="{{ flash()->class }} alert-dismissible" role="alert">
<button type="button" class="close close-white" data-dismiss="alert">×</button>
{{ flash()->message }}
</div>
#endif
create.blade.php
#extends('layouts.main_layout')
#section('content')
<create-school> </create-school>
#endsection
Vue.js template store() method
store()
{
axios.post('/master/schools', {
name: this.name,
}.then((response) => {
this.name = ''
}));
}
Laravel store method
<?php
public function store(Request $request)
{
$school = School::create([
'name' => $request->name,
]);
flash('success message', 'alert alert-success');
return back();
}

Answer 1

Since you are using ajax to store your data, you will need to provide the message as a response in that request. So basically the store method on your controller would look like
public function store(Request $request)
{
$school = School::create([
'name' => $request->name,
]);
return response($school, 201);
}
201 is the HTTP code to indicate a resource was created, and the by the RFC you should return the resource in the response.
In your Vue file, the store method would then be
store()
{
axios.post('/master/schools', {
name: this.name,
}.then((response) => {
this.name = ''
// Modify your DOM or alert the user
alert('Resource created')
}));
}
As a recomendation, you should aways validate user input before storing.