隐藏菜单取决于角色，在Nuxtjs中使用laravel权限不起作用

Question

我正在使用nuxtjs and Vuetify作为前端和laravel作为后端来构建Web App。我想在用户认证后根据角色隐藏菜单。我也使用laravel spatie和laravel-permission包来设置权限。

我想绑定v-role="role"值，但是不起作用。

这是我在Vuetify中的代码

<v-list dense rounded>
    <div v-for="(item, i) in menus" :key="i" router exact>
        <v-list-item v-if="!item.children" :key="i" :to="item.to">
            <v-list-item-content>
                <v-list-item-title>
                    <v-icon left>{{ item.icon }}</v-icon>
                    {{ item.name }}
                </v-list-item-title>
            </v-list-item-content>
        </v-list-item>
        <v-list-group :v-role="role" v-else :key="i.name" :value="false">
            <template v-slot:activator>
                <v-list-item-content>
                    <v-list-item-title>
                        <v-icon left>{{ item.icon }}</v-icon>
                        {{ item.name }}
                    </v-list-item-title>
                </v-list-item-content>
            </template>
            <v-list-item
                v-for="(subMenu, i) in item.children"
                :to="subMenu.to"
                :key="i"
                exact
                class="subMenu"
                v-role="'administrator'"
            >
                <v-list-item-content>
                    <v-list-item-title>
                        <v-icon left>{{ subMenu.icon }}</v-icon>
                        {{ subMenu.name }}
                    </v-list-item-title>
                </v-list-item-content>
            </v-list-item>
        </v-list-group>
    </div>
</v-list>

这是我的脚本代码

<script>
    export default {
        data() {
            return {
                toggle: true,
                menus: [
                    {
                        name: "Dashboard",
                        icon: "mdi-view-dashboard",
                        to: "/",
                        role: "administrator",
                    },
                ]
          }
       }
</script>

我该如何存档？预先感谢...