Vue and Laravel menu roles - How to use laravel permissions in vue - Non spa

Hello,

I have just installed vue in Larave.I create a component navbar with:

template>
    <div>
            <div style="margin-bottom: 10px;">
            <el-button v-on:click="isCollapse = !isCollapse">Button</el-button>
            </div>
            <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span slot="title">Navigator One</span>
                    </template>
                    <el-menu-item-group>
                        <span slot="title">Group One</span>
                        <el-menu-item index="1-1">item one</el-menu-item>
                        <el-menu-item index="1-2">item two</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="Group Two">
                        <el-menu-item index="1-3">item three</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="1-4">
                        <span slot="title">item four</span>
                        <el-menu-item index="1-4-1">item one</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-menu-item index="2">
                    <i class="el-icon-menu"></i>
                    <span slot="title">Navigator Two</span>
                </el-menu-item>
                <el-menu-item index="3" disabled>
                    <i class="el-icon-document"></i>
                    <span slot="title">Navigator Three</span>
                </el-menu-item>
                <el-menu-item index="4">
                    <i class="el-icon-setting"></i>
                    <span slot="title">Navigator Four</span>
                </el-menu-item>
            </el-menu>
    </div>
</template>
<style>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
</style>

<script>
    export default {
        data() {
            return {
                isCollapse: false
            };
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

Let's say I created a middleware in laravel with 2 roles: admin and manager.

How can I actually have my menu items showing or not showing according to the role? In a SPA I normally load a totally different menu according to the role I receive from the api call.

But with Laravel using vue as a non spa, I am a bit confused,.Do I need to create 2 components. ie: 1 navbar for admins and 1 for the managers and use blade Auth to differenciate between on page load?

Thank you.