Nuxt3 (SSR) useCookie Composable With Vercel Cache-Control | Nuxt | Page 1

I am currently building a site that is using Nuxt3 frontend (SSR) hosted on vercel, with a Strapi CMS backend (hosted on Digital Ocean for what it's worth.) I am having trouble with the nuxt composable useCookie, it works perfectly locally but when I deploy it onto Vercel it doesn't appear to work as intended all the time.

I am using useCookie in conjunction with useState to set a light/dark mode cookie for my site. The snippet of code looks like:

const colorMode = useCookie("colorMode", {
  default: () => "light",
  path: "/"
});
let colorModeState = useState("colorMode", () => colorMode.value || "light");
useHead({
  htmlAttrs: { class: colorModeState.value }
});
function setColorMode() {
  if (process.client) {
    if (colorModeState.value == "light") {
      document.documentElement.classList.replace("dark", "light");
    } else {
      document.documentElement.classList.replace("light", "dark");
    }
  }
}
function toggleColorMode() {
  colorModeState.value = colorModeState.value == "light" ? "dark" : "light";
  colorMode.value = colorModeState.value;
  setColorMode();
}

My current cache-control headers are: s-maxage=1, stale-while-revalidate=59, I think maybe the cache is caching the cookie value also because if I change the color mode but wait over 60 seconds before refreshing it correctly keeps the colorMode. However I don't know how to get useCookie to work without setting the cache-control headers very low.

#Nuxt3 (SSR) useCookie Composable With Vercel Cache-Control