Как вывести две пагинации на одной странице в nuxt js?

У меня есть две модели из апихи на Django. Я их отображаю на одной странице с помощью nuxt js. Для каждой из них нужно вывести пагинацию. Если я перехожу по страницам одной пагинации, то другая ведёт себя зеркально. Это приводит к ошибке 404 если в одной модели записей меньше, чем в другой. При каждом переходе перекидывает к хедеру, хотелось бы оставаться в рамках блока с итерируемой по страницам пагинации модели. Возможно ли решить эту проблему? Извиняюсь за огромной хардкод - практикуюсь на наксте несколько дней.

<template>
  <div class="container">

    // вывод модели Тренировки
    <h1 class="my-3">Вывод наименования тренировки</h1>
    <div class="row">
      <div v-for="workout in workouts" :key="workout.slug" class="col-md-4">
          <div class="card mb-4 shadow-sm">
            <img :src="workout.image" alt="" class="card-img-top">
            <div class="card-body">
              <h4 class="card-title">{{ workout.title }}</h4>
              <div v-html="workout.description" class="truncate"></div>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <nuxt-link :to="`/workouts/${workout.slug}`" class="btn btn-sm btn-outline-secondary">Подробнее</nuxt-link>
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>
    // Пагинация для модели Тренировки
    <nav aria-label="Paginate me">
      <ul class="pagination justify-content-center">
        <nuxt-link v-if="previous_w != null" class="page-link" :to="previous_w" tabindex="-1">Предыдущая</nuxt-link>
        <li v-else class="page-item disabled">
          <a class="page-link disabled" href="#" tabindex="-1">Предыдущая</a>
        </li>
        <span v-for="i in total_w">
          <li  v-if="current_page_w === i || ($route.query.page === '/' && i === 1)" class="page-item active">
            <nuxt-link class="page-link" :to="`?page=${i}`">{{i}}</nuxt-link></li>
          <li v-else class="page-item">
            <nuxt-link class="page-link" :to="`?page=${i}`">{{i}}</nuxt-link></li>
        </span>
        <nuxt-link v-if="next_w != null" class="page-link" :to="next_w">Следующая</nuxt-link>
        <li v-else class="page-item disabled">
          <a class="page-link" href="#">Следующая</a>
        </li>
      </ul>
    </nav>
    <br>


    // вывод модели Новости
    <h1 class="my-3">Последние записи блога</h1>
    <div class="row">
      <div v-for="post in posts" :key="post.slug" class="col-md-4">
          <div class="card mb-4 shadow-sm">
            <img :src="post.image" alt="" class="card-img-top">
            <div class="card-body">
              <h4 class="card-title">{{ post.title }}</h4>
              <div v-html="post.description" class="truncate"></div>
              <div class="mb-2">
                <span v-for="tg in post.tag">
                  <nuxt-link :to="`/tags/${tg}`" class="mr-1 badge badge-info">#{{ tg }}</nuxt-link>
                </span>
              </div>
              <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                  <nuxt-link :to="`/posts/${post.slug}`" class="btn btn-sm btn-outline-secondary">Подробнее</nuxt-link>
                </div>
                <small class="text-muted">{{ post.created_at }}</small>
              </div>
            </div>
          </div>
      </div>
    </div>
    // Пагинация для модели Новости
    <nav aria-label="Paginate me">
      <ul class="pagination justify-content-center">
        <nuxt-link v-if="previous_p != null" class="page-link" :to="previous_p" tabindex="-1">Предыдущая</nuxt-link>
        <li v-else class="page-item disabled">
          <a class="page-link disabled" href="#" tabindex="-1">Предыдущая</a>
        </li>
        <span v-for="i in total_p">
          <li  v-if="current_page_p === i || ($route.query.page === '/' && i === 1)" class="page-item active">
            <nuxt-link class="page-link" :to="`?page=${i}`">{{i}}</nuxt-link></li>
          <li v-else class="page-item">
            <nuxt-link class="page-link" :to="`?page=${i}`">{{i}}</nuxt-link></li>
        </span>
        <nuxt-link v-if="next_p != null" class="page-link" :to="next_p">Следующая</nuxt-link>
        <li v-else class="page-item disabled">
          <a class="page-link" href="#">Следующая</a>
        </li>
      </ul>
    </nav>
    <br>    

  </div>

</template>

<script>
import axios from "axios";
export default {
  // достаю из урла page
  watchQuery: ['page'],
  // переменные для хранения данных, полученных из апихи
  data() {
    return {
      workouts: [],
      posts: [],
      total_w: [],
      total_p: [],
      next_w: [],
      previous_w: [],
      next_p: [],
      previous_p: [],
      current_page_w: 0,
      current_page_p: 0
    }
  },
  async asyncData({route}) {
    // console.log(route.query) вернёт, к примеру, {page: "2"} - 2
    console.log(route.query.page);

    // этот page_w(_p) подставляю в урл GET запроса(page беру из route)
    let page_w = route.query.page !== undefined ? `?page=${route.query.page}` : '';
    let page_p = route.query.page !== undefined ? `?page=${route.query.page}` : '';
    console.log(page_w);
    console.log(page_p);

    // GET запрос к апихе
    const workouts = await axios.get(`http://127.0.0.1:8000/api/workouts/${page_w}`);
    // адрес следующей/предыдущей страницы
    let next_w = workouts.data.next != null ? workouts.data.next.split('/')[5] : workouts.data.next;
    let previous_w = workouts.data.previous != null ? workouts.data.previous.split('/')[5] : workouts.data.previous;

    const posts = await axios.get(`http://127.0.0.1:8000/api/posts/${page_p}`);
    let next_p = posts.data.next != null ? posts.data.next.split('/')[5] : posts.data.next;
    let previous_p = posts.data.previous != null ? posts.data.previous.split('/')[5] : posts.data.previous;

    let current_page_w = route.query.page
    let current_page_p = route.query.page
    return {
      // возврат данных в Nuxt
      workouts: workouts.data.results,
      posts: posts.data.results,

      total_w: Math.ceil(workouts.data.count / 3),
      total_p: Math.ceil(posts.data.count / 3),

      next_w: next_w,
      previous_w: previous_w,

      next_p: next_p,
      previous_p: previous_p,

      current_page_w: Number(current_page_w),
      current_page_p: Number(current_page_p),
    }
  }
}
</script>

<style>

</style>