vue js user state management is not working properly on vue js 3

working with Laravel 10 and Vue js 3 with vuex 4. I have following mainapp.vue file specially manage for menu items as well.

<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(){
       this.$store.commit('updateUser', this.user)
    }
}
</script>

my store.js file is

import { createStore } from 'vuex';

const store = createStore({
    state : {
        conuter : 1000, 
        deleteModalObj : {
            showDeleteModal: false, 
            deleteUrl : '', 
            data : null, 
            deletingIndex: -1, 
            isDeleted : false,

        }, 
        user: null, 
        
    }, 
    getters: {
        getCounter(state){
           return state.conuter
        }, 
        getDeleteModalObj(state){
            return state.deleteModalObj;
        },
       
      
        
    },

    mutations: {
        changeTheCounter(state, data){
            state.conuter += data
        }, 

        setDeleteModal(state, data){
            const deleteModalObj = {
                showDeleteModal: false, 
                deleteUrl : '', 
                data : null, 
                deletingIndex: -1, 
                isDeleted : data,
            }
            state.deleteModalObj = deleteModalObj
        },
        setDeletingModalObj(state, data){

            console.log('setDeletingModalObj mutation called');
        console.log('Data received:', JSON.parse(JSON.stringify(data))); // Convert Proxy to plain object for logging


            state.deleteModalObj = data

            console.log('Updated deleteModalObj state:', JSON.parse(JSON.stringify(state.deleteModalObj)));
        },
        updateUser(state, data){
            console.log('Updating user in Vuex:', data);
            state.user = data
        },
     }, 
     actions :{
        changeCounterAction({commit}, data){
            commit('changeTheCounter', data)
        }
    }

});

export default store;

working with Laravel 10 and Vue js 3 with vuex 4. I have following mainapp.vue file specially manage for menu items as well.

    <!--~~~~~~~~ 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 />

my store.js file is

import { createStore } from 'vuex';

const store = createStore({ state : { conuter : 1000, deleteModalObj : { showDeleteModal: false, deleteUrl : '', data : null, deletingIndex: -1, isDeleted : false,

    }, 
    user: null, 
    
}, 
getters: {
    getCounter(state){
       return state.conuter
    }, 
    getDeleteModalObj(state){
        return state.deleteModalObj;
    },
   
  
    
},

mutations: {
    changeTheCounter(state, data){
        state.conuter += data
    }, 

    setDeleteModal(state, data){
        const deleteModalObj = {
            showDeleteModal: false, 
            deleteUrl : '', 
            data : null, 
            deletingIndex: -1, 
            isDeleted : data,
        }
        state.deleteModalObj = deleteModalObj
    },
    setDeletingModalObj(state, data){

        console.log('setDeletingModalObj mutation called');
    console.log('Data received:', JSON.parse(JSON.stringify(data))); // Convert Proxy to plain object for logging


        state.deleteModalObj = data

        console.log('Updated deleteModalObj state:', JSON.parse(JSON.stringify(state.deleteModalObj)));
    },
    updateUser(state, data){
        console.log('Updating user in Vuex:', data);
        state.user = data
    },
 }, 
 actions :{
    changeCounterAction({commit}, data){
        commit('changeTheCounter', data)
    }
}

});

export default store;

I have following welcome.blade.php file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fullstack Blog</title>
    <link rel="stylesheet" href="/css/all.css">

    <script>
        (function () {
            window.Laravel = {
                csrfToken: '{{ csrf_token() }}',
                user: @json(Auth::user())
            };
            console.log('Laravel User:', window.Laravel.user);
        })();
    </script>
</head>
<body>
    
    <div id="app">
    <pre>{{ json_encode(Auth::user()) }}</pre>
    @if(Auth::check())
        <mainapp :user='@json(Auth::user())'></mainapp>
    @else
        <mainapp :user="false"></mainapp>
    @endif
</div>


    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

but in my mainapp.vue file <div v-if="$store.state.user"> is not working it means not displaying my menu items and my console printing here but in welcome.blade.php file console.log('Laravel User:', window.Laravel.user); is printing current user object but mainapp.vue file console console.log('mainapp user',this.user); and store.js console.log('Updating user in Vuex:', data); is printing undefined how could I pass blade file user data to vue file via vuex