如何将数据从服务器端laravel传递到路由器视图

我希望能够将道具从服务器端传递到路由器视图插槽GroupView.vue这是完整的故事：

GroupsController@index

public function index()
    {
        $groups = Group::paginate(5) ; 
        return view("groups",compact("groups"));    
    }

然后在我的groups.blade.php中

<section class="w-1/2 ml-5">

    <p class="font-basic tracking-normal text-3xl mb-4 mt-4 font-normal text-black mr-2">Groups</p>

    @include('partials.filters.groups')

    @forelse ($groups as $group)

    <groups-view inline-template :groups="{{ $group }}">
        <article id="groups-feed" class="bg-white w-3/4 p-4 mb-2 rounded-sm shadow-md">
            <div class="flex" id="groupPicture">

                <router-link :to="{ name : 'groupView', params : { groupId : group.id , groups : group } }" tag="a">
                    <img class="h-18 w-18 rounded-full mr-4 mt-2" src="{{ asset('assets/images/'.$group->default_avatar) }}" alt="Criminals View" >
                </router-link>

                <div class="flex-1">
                    <h3 class="mt-4 font-basic text-2xl">{{  $group->display_name }}</h3>
                    <p class="mt-2">Motto :  <em class="font-basic font-bold roman">{{ $group->motto  }}</em></p>
                </div>
            </div>
        </article>  
    </groups-view>

    @empty

    <h3>No groups are added yet..</h3>

    @endforelse

    {{ $groups->links() }}

</section>


<router-view></router-view>

我希望能够在我的路由器视图中传递数据，例如

GroupView.vue

<script>
export default {
    props : ['groups'],

    name: 'GroupView',

    data () {
        return {
            group : this.groups
        }
    }
};
</script>

这就是我输出路由器视图的地方

<template>
    <section class="w-2/5 ml-2 font-basic" id="groupView">
        <p class="font-basic tracking-normal text-2xl mb-4 mt-4 font-normal text-black mr-2">Group Profile of {{ this.group.full_name }}</p>

</template>

{{this.Group.full_name}的组配置文件

我应该在GroupView.vue的脚本中传递它吗

<script>
export default {
    props : ['groups'],

    name: 'GroupView',

    data () {
        return {
            group : this.groups
        }
    }
};
</script>

导出默认值{
道具：[“组”]，
名称：'GroupView'，
数据（）{
返回{
组：这个。组
}
}
};

我将如何在我的GroupView.vue中显示groups.座右铭