paginating from my response

How have you come to have this response; what Paginator are you using?

You can use a length aware paginator, just suggestion. It's covered in the laravel API.

They are just a href links.

I am on mobile, I will boot my desktop.

@boyjarv see this video: https://laracasts.com/series/javascript-techniques-for-server-side-developers/episodes/1 Server fetched partials and adapt to your case.

Basically a next

        $("#nextp").click(function (event)
        {
            var variable = $('#counter').html();
            var newvar = parseInt(variable) + 1;
            var maxpage = parseInt($('#mp').html());
            if (newvar > maxpage) {
                newvar = maxpage;
            }
            $('#counter').text(newvar);
            var url = '<?php echo DIR . "account/index?page="; ?>' + newvar;

            var element = document.getElementById('div1');
            fload(url, element);
        });

<a href="javascript:void(0);" id="nextp">next</a>  // a link

And the fetch:

    function fload(url, element)
    {
        fetch(url)
                .then(function (response) {
                    return response.text();
                })
                .then(function (body) {
                    element.innerHTML = body;
                });
    }

I use a partial page load, but you should be able to adapt the video and example to your use case. I use some hidden fields to track max page and current page, in example I just used counter.

Example and suggestions only. Also a suggestion, take more lessons, many free javascript lessons on laracasts.

You could make a class to interact with the response data:

class Paginator {
  constructor (response) {
    this.response = response;
    this.path = window.location.pathname;
    this.query = new URLSearchParams(window.location.search);
  }
  nextPage () {
    let offset = this.response.offset + this.response.limit;
    this.query.set('offset', (offset < this.response.total) ? offset : this.response.offset);
    return `${this.path}?${this.query}`;
  }
  prevPage() {
    // similar implementation
  }
}
let p = new Paginator(response);

// p.nextPage()

You will basically pass the response into the Paginator class, and nextPage, prevPage urls - you could go further if you need more from your Paginator

You are welcome.

Vue component script:

import { mapState } from 'vuex'
    export default {
        name: 'Character',
        data() {
            return {
                charImageUrl: '',
                charImageSize: 'detail.jpg',
                charStores: [],
                charSeries: [],
                charEvents: [],
                personalData: {
                    name: 'BONZO',
                    imgUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTn9gW4RiQbFYtV8YUcZGd-iocJ98Nq9oZ38A&usqp=CAU'
                }
            }
        },
        computed: {
            ...mapState({
                character: state => state.character,
                preUrl: state => state.charImageUrl,
                stories: state => state.charStories,
                series: state => state.charSeries,
                events: state => state.charEvents,
                pd: state => state.personalData
            })
        },
        mounted() {
            console.log('pd:', this.pd)
            
            this.$store.dispatch('getCharacter', this.$route.params.id, this.personalData)
            this.getImage()
            this.setPersonalData()
        },
        methods: {
            getImage() {
                this.charImageUrl = `${this.preUrl}/${this.charImageSize}`
            },
            setPersonalData() {
                this.$store.commit("setPersonal", this.personalData)
            }
        }
    }

VUX:

import { createStore } from 'vuex'
import axios from 'axios'
import { public_key } from '../marvel'

export default createStore({
  state: {
    characters: [],
    character: [],
    charImageUrl: '',
    charStories: [],
    charSeries: [],
    charEvents: [],
    personalData: {
      name: '',
      imageUrl: ''
    }
  },
  mutations: {
    getCharacters(state) {
      state.characters = []
      axios.get(`http://gateway.marvel.com/v1/public/characters?apikey=${public_key}`)
        .then((res) => {
          console.log('res: ', res)
            res.data.data.results.forEach((item) => {
                state.characters.push(item)
            })
        })
        .catch((err) => {
            console.log(err)
        })
    },
    getCharacter(state, id){
      state.character = []
      state.charStories = []
      state.charSeries = []
      state.charEvents = []
      axios.get(`http://gateway.marvel.com/v1/public/characters/${id}?apikey=${public_key}`)
      .then(res => {
          res.data.data.results.forEach((item) => {
              state.character.push(item)
              state.charImageUrl = `${item.thumbnail.path}/`
              item.stories.items.forEach((story) => {
                state.charStories.push(story)
              })
              item.series.items.forEach((programme) => {
                state.charSeries.push(programme)
              })
              item.events.items.forEach((event) => {
                state.charEvents.push(event)
              })
          })
      })
      .catch((err) => {
          console.log(err)
      })
    },
    setPersonal (state, personalData) {
      state.personalData = personalData
    }
  },
  actions: {
    getCharacters: context => {
      context.commit('getCharacters')
    },
    getCharacter(context, id) {
      context.commit('getCharacter', id)
    }
  },
  modules: {
  }
})