Adding a "Load More" button to add next 4 posts from WordPress API in Vue

Question

I'm trying to add a load more button that will display the next 4 posts each time it's clicked (and then either disappear or become inactive when there are no more posts) from the WordPress API in Vue, but I can't seem to get it to work properly.

Here is the code I have so far:

<template>
  <div class="videos">
    <div class="inner grid">
      <div class="video" v-for="video in videos" :key="video.id">
        <div class="video-info-pane">
          <div class="video-img" :style="{ backgroundImage: 'url(' + video.acf.video_poster + ')' }">
            <div class="mask"></div>
                        <i class="fa fa-play"></i>            
          </div>
          <div class="video-info-pane-title">
            <h3 class="video-title">
              <router-link :to="{ name: 'videos', params: { id: video.slug }}">
                <strong v-html="video.title.rendered"></strong>
              </router-link>
            </h3>
            <div class="video-info-pane-title-inner">
              <router-link :to="{ name: 'games', params: { id: video.acf.game[0].post_name }}">
                <img :title="video.acf.game[0].post_title" class="slide-info-img" :src="video.acf.game_icon">
              </router-link>
              <div class="video-details">
                <span class="second video-date">{{video.formatted_date}}</span>
                <span class="second video-length">{{video.acf.video_length}}</span>
              </div>
              <router-link :to="{ name: 'videos', params: { id: video.slug }}" class="video-link">
                <strong>Details &rarr;</strong>
              </router-link>
            </div>
          </div>  
        </div>    
      </div>
    </div>
    <button @click="addMoreVideos" class="btn">Load More</button>
  </div>  
</template>

<script> 
  import axios from "axios"
  export default{
    name: 'Videos',
    data() {
      return {
        videosUrl: 'https://robertsfrontend.com/games/wp-json/wp/v2/videos?_embed',
        queryOptions: {
          per_page: 4,
          page: 1,
          offset: 1,
          _embed: true
        },
        videos: [],
      }
    },
    methods: {
      getRecentVideos() {
        axios
          .get(this.videosUrl, { params: this.queryOptions })
          .then(response => {
            this.videos = response.data;
          })
      },
      addMoreVideos: function() {
        this.queryOptions += 4
        this.getRecentVideos();
      }      
    },
    mounted() {
      this.getRecentVideos();
    }
  }
</script>

Answer 1

In addMoreVideos: this.queryOptions.per_page += 4;