vue js props not working properly in Laravel App

working with Laravel 10 Vue Js 3 and Vuex 4 with state management. I have following welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Full stack blog</title>

        <link rel="stylesheet" href="/css/all.css">
        <script>
            (function () {
                window.Laravel = {
                    csrfToken: '{{ csrf_token() }}',
                    user: @json(Auth::user()) // Passing the user data
                };
            })();
        </script>
    </head>
    <body>
        <div id="app">
            @if(Auth::check())
                <mainapp :user="@json(Auth::user())"></mainapp>
            @else 
                <mainapp :user="false"></mainapp>
            @endif
         
        </div>
    </body>
    <script src="{{ mix('/js/app.js') }}"></script>
</html>

and mainapp.vue is

<template>
  <div>
    
    <div v-if="$store.state.user">
      <!--========== ADMIN SIDE MENU one ========-->
      <div class="_1side_menu">
        <div class="_1side_menu_logo">
          <h3 style="text-align:center;">Logo Image</h3>
          <!--<img src="/img/logo.jpg" style="width: 108px;margin-left: 68px;"/>-->
        </div>

        <!--~~~~~~~~ MENU CONTENT ~~~~~~~~-->
        <div class="_1side_menu_content">
          <div class="_1side_menu_img_name">
            <p class="_1side_menu_name">Admin</p>
          </div>

          <!--~~~ MENU LIST ~~~~~~-->
          <div class="_1side_menu_list">
            <ul class="_1side_menu_list_ul">
              <li><router-link to="/"><Icon type="ios-speedometer" /> Dashboard</router-link></li>
              <li><router-link to="tags"><Icon type="ios-speedometer" /> Tags</router-link></li>
              <li><router-link to="category"><Icon type="ios-speedometer" /> Category</router-link></li>
              <li><router-link to="adminusers"><Icon type="ios-speedometer" /> Admin users</router-link></li>
              <li><a href="/logout"><Icon type="ios-speedometer" /> Logout</a></li>
            </ul>
          </div>
        </div>
      </div>
      <!--========== ADMIN SIDE MENU ========-->

      <!--========= HEADER ==========-->
      <div class="header">
        <div class="_2menu _box_shadow">
          <div class="_2menu_logo">
            <ul class="open_button">
              <li>
                <Icon type="ios-list" />
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!--========= HEADER ==========-->
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
    props: ['user'],
    data(){
       return {
          isLoggedIn : false, 
       }
    }, 
    created(){
      console.log(this.user)
       console.log('mainapp user',this.user);
        this.$store.commit('updateUser', this.user)
       
    }
}
</script>

store.js

import { createStore } from 'vuex';

const store = createStore({
    state: {
       user: false, 
    }, 
    mutations: {
        updateUser(state, data) {
            console.log('updateUser mutation called with data:', data); // Debugging line
            state.user = data; // Update user state
            console.log('state.user after update:', state.user); // Debugging line
        }
    }, 

    
});
export default store;

in my Laravel blade file print user object data well. but not passed them to mainapp.vue file what is the problem and how could I fix this problem as well?

Please or to participate in this conversation.