Make pagination for my custom component

[shubhra14]

Hi there, sorry to bother you again. Hoping for some advice from you.

If i understand correctly, the current pagination component is dependent on the route path to fetch the current page number.

I am making some custom components to create post grids and was wondering how to create pagination for the said component independent of the route path since there's no need to change the route and there will be multiple grids on the single page.

I have created something similar before like so:

var postsList = new Vue({
                el: "#app",
                data: {
                    posts: [],
                    page: 1,
                    perPage: 10,
                    pageNumber: ''
                },
                mounted: function() {
                    this.fetchData();
                },
                methods: {
                    fetchData: function( page = this.page, perPage = this.perPage ) {

                        axios.get( '/wp-json/wp/v2/gallery', { 
                            params: {
                                    per_page: perPage,
                                    page: page
                            }
                        })
                        .then(response => {
                            this.posts = response.data,
                            this.pageNumber = response.headers['x-wp-totalpages']
                        })
                        .catch((error) => {
                                console.error(error)
                        })
                    }
                },
                watch: {
                    "perPage": function(pp) {
                        if(pp < 10 && pp > 0){
                        this.fetchData(1, pp);
                        this.page = 1;
                        }
                    }
                }

            })

<nav>
    <button type="button" v-if='page > 1' v-on:click="fetchData(page -= 1)" class="btn nav-prev">Newer</button>
    <button type="button" v-if='page != pageNumber' v-on:click="fetchData(page += 1)" class="btn nav-next">Older</button>
</nav>

I am a bit confused as to how to create the pagination with how the theme is currently setup. This is my grid component:

<template>
    <div class="sw-module">
        <div class="sw-fa-wrapper sw-grid-1">
          <div v-if="posts.length" class="sw-fa-grid">
              <post-list
                v-for="post in posts"
                :key="post.id"
                :post="post"
                :size="post.media_414x276"
              />
          </div>
        </div>
  </div>
</template>

<script>
import PostList from '@/components/grids/PostList'
import ListPagination from '@/components/grids/ListPagination'

export default {
  name: 'GridOne',
  components: {
    PostList,
    ListPagination
  },
  props: {
    type: {
      type: String,
      required: true
    },
    offset: {
      type: Number,
      required: false
    },
    per_page: {
      type: Number,
      required: false
    }
  },
  data() {
    return {
      request: {
        type: this.type,
        params: { 
          per_page: this.per_page || this.$store.state.site.posts_per_page,
          offset: this.offset,
          page: 1
        }, 
        showLoading: true 
      },
      totalPages: 0
    }
  },
  computed: {
    posts() {
      return this.$store.getters.requestedItems(this.request)
    }
  },
  methods: {
    getPosts() {
      return this.$store.dispatch('getItems', this.request)
    },
    setTotalPages() {
      this.totalPages = this.$store.getters.totalPages(this.request)
    }
  },
  created() {
    this.getPosts().then(() => this.setTotalPages())
  }
}
</script>

<grid-one 
          type="video"
          :per_page=3
      />