Gridsome mounted method is only running on page reload

Question

I am using the vue mounted lifecyle method to fetch data. The data is stored in algolia. I use the search api to connect and fetch it. The data is only loaded when I refresh the site. It does not run on page navigation.

methods: {
    async fetchInventory(data = {}) {
        try {
            this.isLoading = true;
            const result = await index.search("", {hitsPerPage: 12});

            this.auctions = result.hits;

            this.totalItems = result.nbHits;
            this.totalPages = result.nbPages;
            this.isLoading = false;
        } catch (error) {
            this.isLoading = false;
            console.log(error);
        }
    },
},
mounted() {
    this.fetchInventory();
}

Answer 1

If this is client side rendering you may need to wait until nextTick OR use earlier/later hook:

mounted() {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

May need to use beforeCreate or created hook if rendering serverside.

Also how is page navigation being done? if you're using navigation API or a library that may be critical to fixing the issue