не получается передать данные через props из laravel в vue

грубо говоря передаю данные юзера через welcome.blade.php в appcomponent:

<div id="app">
    <app-component :user='@json($user)'></app-component>
</div>

в компоненте передаю данные в футер

<template>
    <div id="app">
        <router-view :user="user"></router-view>
        <app-footer :user="user"></app-footer>
    </div>
</template>
<script>
import AppFooter from './AppFooter.vue';

export default {
    name: 'AppComponent',
    props: {
        user: {
            type: Object,
            required: true
        }
    },
    components: {
        AppFooter
    }
};
</script>

через футер у меня происходит смена основного контента на экране через маршруты

   data() {
        return {
            buttons: [
                { icon: homeIcon, text: "Home", route: "/" },
                { icon: walletIcon, text: "Wallet", route: "/wallet" },
                { icon: userIcon, text: "Profile", route: "/account" }
            ]
        };
    },
    methods: {
        navigateTo(route) {
            this.$router.push({
                path: route,
                props: { user: this.user }
            });
        }
    }

вот мой роутер

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import Wallet from './components/Wallet.vue';
import Account from './components/Account.vue';

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/wallet',
        name: 'Wallet',
        component: Wallet
    },
    {
        path: '/account',
        name: 'Account',
        component: Account,
        props: true
    }
];

const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router;

вся проблема в том, что не открывается страница account я так понимаю что не передается туда user помогите, что сделал не так в передаче данных