Laravel Vue pagination, adding comment to thread

I'm trying to re-create a similar pagination as in this video: Click

Inhere, the following happens:

• You submit the form (that's in its own 'new-reply' component), the 'onSubmit' method gets triggered
• Inhere, you post the data with axios, and emit 'data' to the 'replies' component.
• The replies component contains this: <new-reply @created="add"></new-comment>, so the add method gets triggered, which pushes the created data to the items array, which is used to display all reply items.

The issue here, is when you're on the first page of this reply navigation, and you add a reply, the reply visually gets added at that page, while that's not what should happen, because it should only be added on the last page.

Now, i've already fixed one issue, so now the reply will only be added to the items-array when you're currently on the last page.

However, when i'm on the first page, and add a reply, i want to fetch the last page of replies so i can instantly see my last added reply.

Currently i've added this in my add method:

        add(item) {
            // If the current data-set does not have a next page, push to current array.
            if(!this.dataSet.next_page_url) { 
                this.items.push(item);
                this.$emit('added');
            } else {
                // If it does, fetch the last page dataset.
                this.fetch(this.dataSet.last_page);
            }
        },

I thought this would be foolproof, until i noticed that i'm currently using the last_page value of the existing (old) dataSet. So when i have my pagination set to 25 replies per page, and i add the 51th, while my old dataset only knows about 2 pages, my last page will still be 2, so i won't see my last reply.

Anyone familiar with this type of issue, and / or knows a clean fix for this?

Thanks!

The complete project that relates to the video i've posted, can be found here: Click

The file that contains the un-edited add method can be found here: Click