Vercel Edge Split Cache / Custom Cache Key

Hi everyone. As I found out, Vercel does not support any cache key customizations based on Vary header or other header manipulation. I am trying find a solution to split edge cache (for html response ) based on device ( mobile, desktop or user agent generally ) in a Nuxt3 project. Vercel support suggested me that I have to use edge middleware alongside rewrites in order to force certain requests to point to the current cache bucket. Current behaviour is that no matter if I add query params or try to rewrite the / into /desktop /mobile via de middleware, it is returning the same cache entry. ( the first one that is called ) I ll attach some code snippets of edge middleware and vercel.json file

export const config = {
  matcher: "/", // Apply only to the homepage
};

export default function middleware(request: Request) {
  const userAgent = request.headers.get("user-agent") || "";
  let deviceType = "desktop";

  // Detect mobile device
  if (/mobile/i.test(userAgent)) {
    deviceType = "mobile";
  }

  const url = new URL(request.url);

  // Rewrite URL for mobile or desktop
  if (url.pathname === "/") {
    url.pathname = `/${deviceType}`;
    return new Response(null, {
      headers: { "x-middleware-rewrite": url.toString() },
    });
  }

  return new Response(null, {
    headers: { "x-middleware-next": "1" },
  });
}

{
  "rewrites": [
    {
      "source": "/mobile",
      "destination": "/"
    },
    {
      "source": "/desktop",
      "destination": "/"
    }
  ],
  "headers": [
    {
      "source": "/mobile",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, s-maxage=3600, stale-while-revalidate"
        }
      ]
    },
    {
      "source": "/desktop",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, s-maxage=3600, stale-while-revalidate"
        }
      ]
    }
  ]
}

Do you have any suggestions or better knowledge regarding this topic? I appreciate any answers! Thanks