vue client side axios router

i’m trying to get vue-router to work with blogger feeds json api, i managed to make it work but on reload it goes back to the first page, i tried to add html components and template in routes parameter but it did not work, i tried everything i begun to wonder if it is even possible, here is my code:

  new Vue({
    el: '#app',
    router: new VueRouter({}),
    vuetify: new Vuetify({}),
    data() {
      return {
        feedAPI: '/feeds/posts/default?alt=json&start-index=',
        items_all: [],
        items: [],
        Totalposts: null,
        Totalpages: null,
        Startindex: 1,
        pageNumber: null,
        keyword: '',
        results: [],
        Postsperpage: 5,
      }
    },
    methods: {
      getPosts() {
        axios.get(this.feedAPI + this.Startindex + '&max-results=' + this.Postsperpage).then(async (response) => {
          const items = await response.data;
          this.items_all = items.feed;
          this.items = this.items_all.entry;
          var totalPosts = this.items_all.openSearch$totalResults.$t;
          this.Totalposts = totalPosts;
          var itemsPerPage = this.items_all.openSearch$itemsPerPage.$t;
          this.Postsperpage = itemsPerPage;
          var totalPages = Math.ceil(this.Totalposts / this.Postsperpage);
          this.Totalpages = totalPages;
          this.$router.push({
            query: Object.assign({}, this.$route.query.pageNumber, {
              page: this.pageNumber || 1
            })
          });
          this.$nextTick(() => {
            this.pageNumber
          });
        })
      },
      onPageChange() {
        this.Startindex = Math.ceil((this.pageNumber * this.Postsperpage) - (this.Postsperpage - 1));
        this.getPosts();
      },
      top() {
        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      },
      getResults() {
        if (this.keyword.length > 2) {
          axios.get("/feeds/posts/default?alt=json&q=" + this.keyword).then(res => (this.results = res.data.feed.entry)).catch(err => console.log(err));
        }
      }
    },
    watch: {
      keyword: function(newVal) {
        if (newVal.length > 3) {
          this.getResults();
        }
      }
    },
    computed: {},
    created() {
      this.getResults()
    },
    mounted() {
      this.getPosts();
    }
  });

for the html :

          <v-text-field v-model="keyword" @input="getResults" placeholder="Type to Search"></v-text-field>
          <div v-if="getResults">
            <span v-for="result in results">
              <a v-for="i in result.link" v-if="i.rel == 'alternate'" :href="i.href" :title="result.title.$t" v-html="i.title"></a>
              <br />
            </span>
          </div>
<div v-for="item in items">
<h3><a v-for="i in item.link" v-if="i.rel == 'alternate'" :href="i.href" :title="item.title.$t" v-html="i.title"></a></h3>
</div>
<v-pagination v-model="pageNumber" :length="Totalpages" @input="onPageChange" prev-icon="mdi-menu-left" next-icon="mdi-menu-right" v-on:click.native="top"></v-pagination>