Issue with instant search and vue routing,

Hi, I’m trying to implement instant search with URL update to list items as shown on this page

When I use the same code, as soon as I select any filter or enter query param for search whole page refreshes and URL is being cleared. I’m not too familiar with this implementation but also guessing this could be an issue with Vue routing but couldn’t find which one causes this issue.

When I enter URL parameters to URL and try to directly go to the page everything is selected correctly but when I click to filter within instant search view it does full reset the whole search.

I really don’t know what else can cause this issue. Any help would be appreciated.

export default {
  components: {
    ProductCard,
    CollapsiblePanel,
  },
  data() {
    const vueRouter = this.$router;
    return {
      searchClient: algoliasearch(
        this.$config.algoliaClientId,
        this.$config.algoliaSearchApiKey
      ),
      showQuickView: false,
      selectedProduct: null,
      routing: {
        router: {
          read() {
            return vueRouter.currentRoute.query;
          },
          write(routeState) {
            vueRouter.push({
              query: routeState,
            });
          },
          createURL(routeState) {
            return vueRouter.resolve({
              query: routeState,
            }).href;
          },
          onUpdate(cb) {
            this._onPopState = event => {
              const routeState = event.state;
              // at initial load, the state is read from the URL without
              // update. Therefore the state object is not there. In this
              // case we fallback and read the URL.
              if (!routeState) {
                cb(this.read());
              } else {
                cb(routeState);
              }
            };
            window.addEventListener('popstate', this._onPopState);
          },
          dispose() {
            window.removeEventListener('popstate', this._onPopState);
            this.write();
          },
        },
        stateMapping: {
          stateToRoute(uiState) {
            return {
              query: uiState.products.query,
              product_type:
                uiState.products.refinementList &&
                uiState.products.refinementList.product_type &&
                uiState.products.refinementList.product_type.join('~'),
              page: uiState.products.page,
            };
          },
          routeToState(routeState) {
            return {
              products: {
                query: routeState.query,
                refinementList: {
                  product_type: routeState.product_type && routeState.product_type.split('~'),
                },
                page: routeState.page,
              },
            };
          },
        },
      }
    };
  },
}