Paginate API response object with multiple sub arrays

I have this response from a REST API service:

{
    "Business": [
        {
            "link": "...",
            "og": "...",
            "source": "...",
            "source_icon": "...",
            "title": "..."
        },
    ],
    "Entertainment": [
        {
            "link": "...",
            "og": "...",
            "source": "...",
            "source_icon": "...",
            "title": "..."
        },
    ],
    "Health": [
        {
            "link": "...",
            "og": "...",
            "source": "...",
            "source_icon": "...",
            "title": "..."
        },
    ],
    "Science": [
        {
            "link": "...",
            "og": "...",
            "source": "...",
            "source_icon": "...",
            "title": "..."
        },
    ],
    "Sports": [
        {
            "link": "...",
            "og": "...",
            "source": "...",
            "source_icon": "...",
            "title": "..."
        },

    ],
    "Technology": [
        {
            "link": "...",
            "og": "...",
            "source": "...",
            "source_icon": "...",
            "title": "..."
        },
    ],
    "US": [
        {
            "link": "...",
            "og": "...",
            "source": "...",
            "source_icon": "...",
            "title": "..."
        },
    ],
    "World": [
        {
            "link": "...",
            "og": "...",
            "source": "...",
            "source_icon": "...",
            "title": "..."
        },
    ]
}

In my Vue app I’ve created this function to get the data and I’m using a ref to manage them inside my application:

import { ref, onMounted } from 'vue';
import axios from 'axios';
import { NewsResponse } from '@/utils';

const baseURL = '...';

const isLoading = ref<boolean>(true);
const newsFeed = ref<NewsResponse>();
//const pageSize = 12;


onMounted(() => {
  fetchNewsFeed();
});

const fetchNewsFeed = () => {
  axios.get(baseURL)
    .then((res) => {
      newsFeed.value = res.data;
      isLoading.value = false;
      console.log('api responsen',newsFeed.value);
      
    })
    .catch((err) => {
      console.log(err);
    })
}

Since each category into the response object will be an array, at the moment I’m managing it in my template using a v-for loop, all is working fine, but each array can have from 46 to 50 elements inside and this after looping the elements will result in a long age to scroll.

 <div 
    class="grid grid-cols-4 gap-4 py-3"
    v-for="(articlesCollection, cat) in newsFeed" 
    :key="cat">
    <div 
      class="card shadow-lg w-fit my-2 rounded-md"
      v-for="(article, index) in articlesCollection"
      :key="index"
    >
      <figure>
        <img class="w-full h-48" :src="article.og">
      </figure>
      <div class="card-body">
        <div class="badge badge-primary text-white">
          {{ cat }}
        </div>
        <a 
          class="no-underline" 
          :href="article.link"
        >
          <h1 class="card-title text-sm">
            {{ article.title }}
          </h1>
        </a>
        <div class="card-actions">
          <div class="badge badge-outline">
            {{ article.source }}
          </div>
        </div>
      </div>
    </div>
  </div>

My idea is to have 12 elements in a grid of 4 element for each single row and when the user reach the end of the page load new elements like the infinite scroll will do normally. How I can correctly paginate the elements in this case? I’ve looked at this question, but in my case not sure if I can use slice, due to the fact that I will have multiple array inside the response object.