How to split posts into Chunks with Vue, Laravel, and Inertia?

Question

I have a page where I need to display posts, but I want to group these posts into chunks of 5 items each. For example, every 5 posts should be wrapped in a new container. So every 5 posts I should have the following:

Blog.vue

<script setup>

import MainLayout from "@/Layouts/MainLayout.vue";
import {Head} from "@inertiajs/vue3";
import {onMounted} from "vue";

const props = defineProps({
    posts: {
        type: Object
    }
});
</script>
<div class="flex overflow-x-auto my-6 gap-4 md:grid md:grid-cols-3 md:w-auto md:gap-6">
    <div v-for="post in props.posts" :key="post.id" class="w-72 md:flex flex-shrink-0 flex-grow-0">
        <div>
            <img src="/images/placeholder-post.png" alt="Place Holder">
        </div>
        <div class="w-52 py-2">
            <h2 class="text-gray-300 font-semibold py-2">{{ post.title }}</h2>
            <p class="text-gray-300 font-light">{{ post.excerpt }}</p>
        </div>
    </div>
</div>

I am using Inertia and the data comes from the PostController.php

public function index()
    {
        $posts = Post::all();

        return Inertia::render('Blog', [
            'posts' => $posts->map->only(
                'id',
                'title',
                'body',
                'slug',
                'excerpt',
                'image'
            )
        ]);
    }

I have tried to paginate the data from the controller and try to use that paginate items in the Blog component but did not work as expected as I don't actually want to paginate the items.

I've also tried to use this method: https://github.com/vuejs/Discussion/issues/177 but did not work either.