Hello there; I am new to Laravel and Vue.js. I have encountered an issue when submitting a form with validation problems. The error message for a required input field, such as the "Brand Name" field, appears correctly, but after successfully submitting the form, only the first letter of the response message is displayed in uppercase, like "Y" instead of the full message "Your Data Added Successfully". Any idea how I can resolve this issue? Thank you. Here is my controller:

<?php

namespace App\Http\Controllers;

use App\PhoneBook;
use Illuminate\Http\Request;
use Validator;

class PhoneBookController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('phonebook');
    }
   }

    public function add(Request $request)
    {
        //prepare data for validation
        $validationarray=Validator::make($request->all(),
            [
                'name' => 'required',
                'phone' => 'required|min:2|required',
                'email' => 'required',
                ]
            ,[],[
                "name"=>"Brand Name",
                'phone' => 'phone',
                'email' => 'Email',
            ]);

        if($validationarray->fails())
        {
            foreach ($validationarray ->messages()->getMessages() as $field_name =>$message):
                $response['message']=$message;
            endforeach;
            $response['status']="failed";
            return response()->json($response);
        }

        $branddata=array(
            'name'          =>$request->name,
            'phone'     =>$request->phone,
            'email'     =>$request->email,
        );

        $add=PhoneBook::create($branddata)->id;
        if(false !=$add)
        {

            return response(['status'=>'success',"message"=>"Your Data Added Successfully"]);

        }else{
            return response(['status'=>'failed',"message"=>"Error Adding data please try again !!"]);


        }



    }

My route:

Route::post('phonebook/add',"PhoneBookController@add")->name("cart.deleteProductFromCart");

My view template code:

<template>
<div>
    <div class="modal fade" id="addData" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <span v-if="list.status=='success'" >Record submitted successfully!</span>

                    <div   v-model="list.message" >{{list.message?list.message[0]:''}}</div>
                    <div class="form-group">

                        <label for="exampleInputEmail1">Brand Name</label>
                            <input type="text" name="name" v-model="list.name" class="form-control" id="exampleInputEmail1" placeholder="Example : Kia - Renault">
                            <p class="help-block">Example : Kia - Renault</p>

                    </div>
                        <div class="form-group">
                            <label  class="col-form-label">phone:</label>
                            <input type="text" name="phone" v-model="list.phone" class="form-control" id="reckipient-name">
                            <p class="help-block">Example : Kia - Renault</p>

                        </div>
                        <div class="form-group">
                            <label  class="col-form-label">email:</label>
                            <input type="text" class="form-control"  v-model="list.email" name="email" id="recikpient-name">
                            <p class="help-block">Example : Kia - Renault</p>

                        </div>

                </div>
                <div class="modal-footer">

                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" @click="save">Send message</button>
                </div>
            </div>
        </div>
    </div>
</div>
</template>


<script>
    export default {

        name: "addData",
        data: function () {
            return {
                list: {
                    name: '',
                    phone: '',
                    email: '',
                    message:'',

                },



            }
        },
        methods: {
            save: function () {
              axios.post('/phonebook/add',this.$data.list)
                    .then((response) => this.list.message=response.data.message)
                  .catch((error) => this.list.message=error.response.data.message)

            }
        }
    }

</script>
<style scoped>

</style>

[![enter image description here][1]][1]
[1]: https://i.sstatic.net/sZpDS.png