How to change data in a template and in data?

I am trying to make pagination with axios. In data, I have currentPage variable.

data() {
  return {
    currentPage: 1,
  };

},
Then I use nextPage method by click

nextPage() {
  this.currentPage = this.currentPage + 1;
  this.$store.dispatch("fetchUsersActive", {
    access_token: this.token,
    set_page: this.currentPage,
  });
}

Then in action, I set a condition - if I’ll swap next page and it will be the last one, then the page will back to the previous one.

export const fetchUsersActive = ({
commit,
}, data) => {
commit('SET_LOADING', true);
const page = data.set_page !== null ? `page=${data.set_page}&` : ""
axios.get("api/management/users?" + limit + page + sortBy0 + sortBy1, {
        headers: {
            "x-access-token": data.access_token,
        },
    })
    .then((response) => {
        if (!response.data || response.data.data.length === 0) {
            data.set_page = data.set_page - 1;
            commit('LIMIT_PAGE', false);
        } else {
            commit("SET_USERS_ACTIVE", response.data)
            commit("SET_USERS", response.data)
        }
    })
    .catch((err) => console.log(err))
    .finally(() => commit('SET_LOADING', false))

}

Then I set data in pagination

<div class="pagination-row2">
        <div class="pagination">
          <a @click="previousPage" href="#">&laquo;</a>
          <a v-if="!limitPage && currentPage > 0" class="active" href="#">{{
            this.currentPage - 1
          }}</a>
          <a v-else class="active" href="#">{{ currentPage }}</a>
          <a @click="nextPage" href="#">&raquo;</a>
        </div>
      </div>

The problem is that when I swap pages, there makes a difference between currentPage in data and currentPage in the template …


I don’t know what causes that. The issue is in my conception? Maybe should I carry this entire operation out only in action, and in the template only put data from getter without conditions in template?