Nuxt 3 with Nuxt content queryContent doesn’t work after nuxt build during the production but works fine in dev environment

I am developing the Nuxt 3-based Nuxt content website and everything works fine but for the pages/tags/[tags].vue the queryContent() does not work for the 1st time during the production deployment when I reload again it works. However, in the dev (npm run dev) environment, everything works fine. I have created a reproduction of the issue in CodeSandBox

Environment
“@nuxt/content”: “^2.13.2”,

“turbo”: “^2.0.9”,

“nuxt”: “^3.13.2”,

“vue”: “^3.5.10”

Following is my nuxt.config.js:

export default {
  compatibilityDate: "2024-08-31",

  modules: [
    "@nuxtjs/tailwindcss",
    "unplugin-fonts/nuxt",
    "@nuxtjs/i18n",
    "@nuxtjs/color-mode",
    "@nuxt/image",
    "@nuxt/content",
    "@nuxtjs/sitemap",
  ],

  ssr: true,
  target: 'static',

  site: {
    url: process.env.NUXT_PUBLIC_SITE_URL || "http://localhost:3000/",
    name: "Test Application",
    trailingSlash: true,
  },

  sitemap: {
    hostname: process.env.BASE_URL || "http://localhost:3000/",
  },

  //To support and display the .md files from /content using @nuxt/content
  content: {
    // To highlight the code sections using the theme
    highlight: {
      theme: {
        default: "aurora-x",
        dark: "everforest-dark",
        sepia: "monokai",
      },
      langs: ["json", "xml", "java", "shell"],
    },

    markdown: {
      remarkPlugins: ["remark-reading-time"], //To get the reading time for each .md file in /content
      anchorLinks: false, // Do not underline and highlight the h2, h3, h4 etc
    },
  },

  //To support the dark/light mode theme using @nuxtjs/color-mode
  colorMode: {
    classSuffix: "",
    preference: "system",
    fallback: "dark",
  },

  app: {
    head: {
      link: [
        {
          rel: "icon",
          type: "image/x-icon",
          href: `/img/favicon.ico`,
        },
      ],
    },
  },
  
  //Get the config from .env files
  runtimeConfig: {
    apiSecret: "123",
    public: {},
  },

  // auto import components
  components: [
    {
      path: "~/components",
      pathPrefix: false,
    },
  ],

  extends: [],

  css: [],

  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
  },

  i18n: {
    locales: [
      {
        code: "en",
        files: ["en.json", "en-home.json"],
      },
    ],
    lazy: true,
    langDir: "../locales",
    defaultLocale: "en",
  },

  plugins: [{ src: "@/plugins/aos", ssr: false, mode: "client" }],
};

Following is my code in pages/[tags].vue where the queryContent returns empty list for the 1st load in production but works fine during 2nd reload:

<script setup>
//Get the tag name associated with the route
const route = useRoute();
const tag = route?.params?.tags;
console.log("Tag Obtained from URL : " + tag);

// Fetch all documents
const { data: docs } = await useAsyncData("docs", () => queryContent().find());

console.log("1. FOUND LENGTH : " + docs.value.length);

// Filter documents based on the tag
const filteredDocs = computed(() => {
  console.log("2. FOUND LENGTH : " + docs.value.length);
  if (!docs.value) return [];
  const matchingDocs = docs.value.filter((doc) =>
    doc.navigation?.tags?.includes(tag)
  );
  console.log("Matching PAGES : " + matchingDocs.length);
  return matchingDocs;
});
</script>

I saw many similar issues on the GitHub and tried the provided solution but none worked foe me:

https://github.com/nuxt/content/issues/2593
https://github.com/nuxt/content/issues/1762

How to fix the issue with Nuxt content queryContent in production after the Nuxt build?