Persisting non-widget data in url

I am using multiple indices on a single page. It looks through Products, Materials and Posts (defaulting to Products). I need to be able to basically get/set the index via the URL. The path looks like this /products?filters=filter1&filters=filter2&categories=category1

In vue, I am using the “products” section of the url to set a variable named index .

Now the issue: When I click on “materials”, I need the url to change to /materials? .

Using createURL , parseURL , stateToRoute and routeToState functions, I can get the filters and categories working properly, but they do not have access to my index variable. How can I access variables set in vue from inside my router functions so that I can set index="materials" and use that to set my url in createURL ?

Below is a simplified, rough example of what I need to do.

export default {
  data() {
    return {
      routing: {
        router: historyRouter({
          createURL({ qsModule, routeState, location }) {
            ...
            return "/${this.index}";
            // this.index is undefined.

          },
          parseURL({ qsModule, location }) {
            var pathname = location.pathname;
            var paths = pathname.split("/").filter(Boolean);
            var rootPath = paths.shift();
            this.index = rootPath;
            // cannot access index
          }
        }
      },
      index: "materials"
    }
  }
}

Seems like a ridiculously simple task, and yet I am not able to get it working. I am about to stop using Algolia altogether because of this one issue. Does anyone have any input?