How to solve hot reload and/or live reload in Astro with devcontainer?

Question

I am starting a project in Astro and using a devcontainer to work on it. The issue is that every change I make to the files doesn't seem to take effect, and I have to restart the application for the changes to be recognized.

In my research, I found temporary solutions, such as adding this configuration to the devcontainer

"forwardPorts": [4321, 3000],
"containerEnv": {
    "CHOKIDAR_USEPOLLING": "true"
}

This worked for me, but it stopped working when I seemingly added integration with Vue.js. I've tried adding the following Vite configuration that I found in an issue to fix it, but with no success.

// in astro.config.mjs file

import { defineConfig } from 'astro/config';

import tailwind from "@astrojs/tailwind";
import vue from "@astrojs/vue";

// https://astro.build/config
export default defineConfig({
  integrations: [tailwind(), vue()],
  vite: {
    server:{
      host: "0.0.0.0",
      hmr: { clientPort: 3000 },
      port: 3000, 
      watch: { usePolling: true }
    }
  }
});

Here, I'm sharing my devcontainer to get more assistance on the matter. If there's a solution to my issue, it might be in this file.

{
    "name": "lyricnation_frontend",
    "image": "mcr.microsoft.com/devcontainers/typescript-node:20",
    "customizations": {
        "vscode": {
            "extensions": [
                "dbaeumer.vscode-eslint",
                "astro-build.astro-vscode",
                "Vue.volar"
            ]
        },
        "settings": {
            "terminal.integrated.shell.linux": null,
            "terminal.integrated.shell.osx": null,
            "terminal.integrated.shell.windows": null,
            "typescript.tsdk": "/usr/local/lib/node_modules/typescript/lib"
        }
    },
    "forwardPorts": [4321, 3000],
    "containerEnv": {
        "CHOKIDAR_USEPOLLING": "true"
    }
}