Fi vue js load more

elementApi.php

'api/reviews.json' => function() {
            return [
                'elementType' => Entry::class,
                'elementsPerPage' => 3,
                'pageParam' => 'pg',
                'criteria' => ['section' => 'customerReviews'],
                'transformer' => function(Entry $entry) {

                    $image = $entry->customerPhoto->one();
                    $userImage = Imgix::$plugin->imgixService->transformImage( $image, [ 'width' => 120 ], ['lossless' => 0,'auto' => 'compress','fm' => 'jpg','q' => 90,'lazyload' => true ]);
                    
                    return [
                        'title' => $entry->title,
                        'url' => $entry->url,
                        'ImageUrl' => $userImage,
                        'overviewTitle' => $entry->overviewTitle,
                        'reviewBody' => $entry->reviewBody,
                        'titleRoleAndCompany' => $entry->titleRoleAndCompany,
                        'dateTime' => $entry->postDate,
                    ];
                },
            ];
        },

reviews.twig

<section style="background-color: #eaeee3;" class="z-2 relative">
		<div class="container center pt5">

		{% set reviews = block.reviewsArea.orderBy('postDate desc') %}

		{% paginate reviews.limit(3) as reviewInfo, reviews %}

		<div class="w-100 mt0">
			<div class="product-collection-title mt4 w-100"><p>Customer Reviews</p></div>
		</div>

		<div id="reviews-extra" class="Grid--gutters flex flex-wrap flex-row justify-start items-start pb3-ns pb4 mb3-ns">

	        <div v-for="review in reviews" class="Grid-cell w-third-ns w-third-m w-100 h-100 relative pb4 pr3 review mb4">

					<div class="ba b--navy pa4 lh-copy">
						<p class="fw5">${ review.overviewTitle }</p>
						<div class="pr4 mb4-ns mb2">
							<truncate action-class="link text-blue o-40 underline-hover" clamp="Show more" :length="90" less="Show Less" type="html" :text="review.reviewBody"></truncate>
						</div>
						<div class="flex flex-row justify-start items-center">
							<div class="tc aspect-ratio aspect-ratio--1x1-ns dib" style="padding-bottom: 55px;width: 55px;display: inline-block;">
								<img :src="review.ImageUrl.transformed.url" class="br-100 dib aspect-ratio--object v-mid w-100">
							</div>
							<div class="dib v-mid w-80 no-margin pl3"><p class="product-title-regular"><span class="fw5">${ review.titleRoleAndCompany }</span> / ${ review.dateTime.date | moment("from", "now") }</p></div>
						</div>
					</div>
					<div class="bottom-0 left-2 absolute inline-pointer-down"></div>

	        </div>

		    <div class="blog-archives-wrapper" v-show="showSpinner">
		        <div class="row top-xs">
		            <div class="blog-load-more">
		                
		            </div>
		        </div>
		    </div>
		    <div class="tr pb5-ns pb4 w-100" v-show="nextPage">
				<button id="loadMore" v-on:click="loadMoreReviews()" data-page="0" data-batch="3" class="input-reset title-textsmall-all relative text-blue border-button-style link lh-tight dib tl">
					Load more <span class="dib v-mid absolute right-1 top-0 bottom-0" style="line-height: 1.4em;">						
						<svg id="arrow_down" width="14" height="14" xmlns="http://www.w3.org/2000/svg" class="svg-blue-stroke v-mid db h-100" viewBox="0 0 22.9 13.5">
							<path fill="none" stroke="#002643" stroke-width="2" d="M21.5 1.8l-10 9.7-10-9.7"/>
						</svg>
					</span>
				</button>
			</div>
		</div>
	</div>
	</section>

vue.js

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import truncate from 'vue-truncate-collapsed'
Vue.use(require('vue-moment'));
// check the container exists
if($('#reviews-extra').length){
  // if it does do the vue stuff
	Vue.use(VueAxios, axios, truncate)
	new Vue({
	  el: '#reviews-extra',
		delimiters: ['${', '}'],
		components: {
			'truncate': truncate
		},
	    data() {
	    	return {
		        nextPage: 2,
		        showSpinner: 1,
		        reviews: [],
	    	}
	    },
	    methods: {
	        loadMoreReviews: function() {
	        	const v_this = this;
	            this.showSpinner = 1;
              //important part here
            // v_this is the vue object that contains the data needed
	            this.axios.get('/api/reviews.json?pg=' + this.nextPage).then(function(data) {
	            	const reviews = data.data.data;
	                reviews.forEach(function (review) {
					          v_this.reviews.push(review);
					        });
	                v_this.nextPage = v_this.nextPage + 1;
	                if (data.data.meta.pagination.total_pages == data.data.meta.pagination.current_page)
	                    v_this.nextPage = 0;
	                v_this.showSpinner = 0;
	            });
	        },
	        prerenderLink: function(e) {
	            var head = document.getElementsByTagName("head")[0];
	            var refs = head.childNodes;
	            ref = refs[ refs.length - 1];

	            var elements = head.getElementsByTagName("link");
	            Array.prototype.forEach.call(elements, function(el, i) {
	                if (("rel" in el) && (el.rel === "prerender"))
	                    el.parentNode.removeChild(el);
	            });

	            var prerenderTag = document.createElement("link");
	            prerenderTag.rel = "prerender";
	            prerenderTag.href = e.currentTarget.href;
	            ref.parentNode.insertBefore(prerenderTag,  ref);
	        }
	    },
	    mounted() {
	    	//this.loadMoreReviews();
	    	const v_this = this;
	        this.axios.get('/api/reviews.json').then(function(data) {
	        	const reviews = data.data.data;
	                reviews.forEach(function (review) {
					  v_this.reviews.push(review);
					});
	            if (data.data.meta.pagination.total_pages > 1)
	                v_this.nextPage = 2;
	            v_this.showSpinner = 0;
	        });
		}
	});
}