Google Tag Manager cookies not being set in Nuxt 3 app

Question

I'm trying to implement Google Tag Manager tracking in a Nuxt 3 app, including getting cookie consent from the user. I've been following some documentations and tutorials but the cookies do not get set and the engagement with the page does not get tracked.

I'm using the following packages:

• @dargmuesli/nuxt-cookie-control
• @gtm-support/vue-gtm

For the vue-gtm package, I have the following settings:

nuxt.config.ts

runtimeConfig: {
    public: {
     ...
      gtm_id: "GTM-PWKB3XLT",
      gtm_enabled: true,
      gtm_debug: process.env.ENVIRONMENT === "development" ? true : false,
    },
  },

plugins/vue-gtm.client.js

import { createGtm } from "@gtm-support/vue-gtm";

export default defineNuxtPlugin((nuxtApp) => {
  const runtimeConfig = useRuntimeConfig().public;
  const cookieControl = useCookieControl();
  const gtmCookieGroupName = "analytics";

  nuxtApp.vueApp.use(
    createGtm({
      id: runtimeConfig.gtm_id,
      defer: false,
      compatibility: false,
      enabled:
        runtimeConfig.gtm_enabled &&
        cookieControl.cookiesEnabledIds.value?.includes(gtmCookieGroupName),
      debug: runtimeConfig.gtm_debug,
      loadScript: true,
      vueRouter: useRouter(),
      trackOnNextTick: false,
    })
  );
});

Then, for the nuxt-cookie-control package, I have the following settings in my nuxt.config.ts file:

  modules: [
    [
      "@dargmuesli/nuxt-cookie-control",
      {
        barPosition: "bottom-right",
        closeModalOnClickOutside: true,
        colors: {
          ...
        },
        cookies: {
          necessary: [
            {
              description: "These cookies are necessary to make our site work",
              id: "website",
              name: "Website & API",
              targetCookieIds: ["ncc_c", "ncc_e"],
            },
          ],
          optional: [{
              description: "This cookie tracks site usage behvaiour",
              id: "analytics", // if unset, `getCookieId(cookie)` returns the cookie's slugified name instead, which e.g. is used to fill the state's `enabledCookieIds` list
              // use a short cookie id to save bandwidth!
              name: "Google Tag Manager",
              links: {
                "https://policies.google.com/technologies/partner-sites":
                  "Privacy Policy",
                "https://policies.google.com/terms": "Terms of Service",
              },
              targetCookieIds: ["_ga", "_ga_<container-id>", "_gat", "_gid"],
            },],
        },
        cookieExpiryOffsetMs: 1000 * 60 * 60 * 24 * 365, // one year
        cookieNameIsConsentGiven: "ncc_c",
        cookieNameCookiesEnabledIds: "ncc_e",
        cookieOptions: {
          path: "/",
        },
        isAcceptNecessaryButtonEnabled: true,
        isControlButtonEnabled: false,
        isCookieIdVisible: false,
        isCssEnabled: false,
        isCssPonyfillEnabled: false,
        isIframeBlocked: false,
        isModalForced: false,
        locales: ["en"],
        localeTexts: {
          ...
        },
      },
    ],
  ],

And I added this to my default layout file:

<template>
  <div class="bg-background relative">
    <LandingHeader />
    <slot />
    <LandingFooter />
    <CookieControl locale="en" />
  </div>
</template>
<script setup>
const { cookiesEnabledIds } = useCookieControl();

watch(
  () => cookiesEnabledIds.value,
  (current, previous) => {
    if (!previous?.includes("analytics") && current?.includes("analytics")) {
      // cookie with id `analytics` got added
      const $gtm = useGTM();
      $gtm.enable();
      window.location.reload();
    }
  },
  { deep: true }
);
</script>

Lastly, I saw one tutorial suggesting a composable to enable gtm.

composables/useGTM.js

import { useGtm as useVueGTM } from "@gtm-support/vue-gtm";

export const useGTM = () => {
  const gtm = useVueGTM();
  return gtm;
};

Despite all this, when the user clicks on the "Accept" button on the cookie consent popup, the only cookies that are being set are ["ncc_c", "ncc_e"]. While my expectation would be that also the other cookies should be set: ["_ga", "_ga_<container-id>", "_gat", "_gid"]

I have been searching for solutions but nothing that I tried has done the trick. Any tips?