Resetting VueJS Pagination on watch change - wordpress

Question

I am working on a small VueJS app that pulls in WordPress posts via the API. Everything works great with pagination to load more posts, however I am not too sure how I can reset the entire XHR getPosts method when you change the user ID radio field.
When you change the author ID currently, it will not reset the results. I believe it should be something in the watch: area to destroy the current page - but not too sure. Thanks!
https://codepen.io/sco/pen/aRwwGd
JS
Vue.component("posts", {
template: `
<ul>
<slot></slot>
</ul>
`
});
Vue.component("post", {
props: ["title", "excerpt", "permalink"],
template: `
<li>
<h3 v-html="title"></h3>
<div v-if="excerpt" v-html="excerpt"></div>
<a :href="permalink">Read More</a>
</li>
`
});
var App = new Vue({
el: "#app",
data: {
greeting: "Load more Posts Vue + WP REST API",
page: 0,
posts: [],
totalPages: "",
apiURL: "https://poststatus.com/wp-json/wp/v2/posts/?per_page=2",
isLoading: "",
show: true,
authors: [1, 590],
currentAuthor: ""
},
watch: {
currentAuthor: "fetchData"
},
methods: {
getPosts: function() {
var xhr = new XMLHttpRequest();
var self = this;
self.page++;
self.isLoading = "is-loading";
xhr.open(
"GET",
self.apiURL + "&page=" + self.page + "&author=" + self.currentAuthor
);
xhr.onload = function() {
self.totalPages = xhr.getResponseHeader("X-WP-TotalPages");
if (self.page == self.totalPages) {
self.show = false;
}
var newPosts = JSON.parse(xhr.responseText);
newPosts.forEach(function(element) {
self.posts.push(element);
});
self.isLoading = null;
//console.log(self.apiURL + self.page)
};
xhr.send();
}
}
});
HTML
<section id="app" class="wrapper">
<div class="container">
<div class="box">
<template v-for="author in authors">
<div class="author-toggle">
<input type="radio"
:id="author"
:value="author"
name="author"
v-model="currentAuthor">
<label :for="author">{{ author }}</label>
</div>
</template><br>
<h3 v-if="page>0">Showing Page {{page}} of {{totalPages}}</h3>
<progress v-if="page>0" class="progress" :value="page" :max="totalPages">{{page}}</progress>
<posts v-if="posts">
<post v-for="post in posts" class="post" :id="'post' + post.id" :title="post.title.rendered" :permalink="post.link" :key="post.id">
</post>
</posts>
<button :class="isLoading + ' ' +'button is-primary'" v-if="show" #click="getPosts(page)">Load Posts</button>
</div>
</div>
</section>

Answer 1

You can reset page, posts, and totalPages inside the watcher:
watch: {
currentAuthor() {
this.page = 0;
this.totalPages = 0;
this.posts = [];
this.getPosts();
}
}
your codepen with required changes