I have a Vue Nuxt 2 website where I use middleware to resolve URLs. However, I'm experiencing an issue where requests are conflicting between users. I am using vue storefront as well.

If one user opens product abc and another user opens product xyz at the same time, I sometimes get xyz loaded instead of abc.

Middleware Code (url-resolver.ts):

import { Middleware } from '@nuxt/types';
import { usePageStore } from '~/stores/page';
import { Logger } from '~/helpers/logger';
import { RoutableInterface } from '~/modules/GraphQL/types';

const urlResolverMiddleware: Middleware = async (context) => {
  const pageStore = usePageStore();
  const { path } = context.route;
  
  const clearUrl = path.replace(/[a-z]+\/[cp|]\//gi, '').replace(`/${context.i18n.locale}`, '');
  
  Logger.debug('middleware/url-resolver', clearUrl);

  const { data, errors } = await context.app.$vsf.$magento.api.route(clearUrl);
  
  Logger.debug('middleware/url-resolver/result', { data, errors });

  const results: RoutableInterface | null = data?.route ?? null;

  if (!results || errors?.length) context.error({ statusCode: 404 });
  
  pageStore.$patch((state) => {
    state.routeData = results;
  });
};

export default urlResolverMiddleware;

stores > pages.ts :

import { defineStore } from 'pinia';

interface PageState {
  routeData: any;
}

export const usePageStore = defineStore('page', {
  state: (): PageState => ({
    routeData: null,
  }),
});

How can I ensure that each user gets only their requested product without conflicts?