Vite not detecting changes (vue/pug)

Question

Vite fails to detected changes in PUG files that are referenced by other PUG files. For example:

div 
    include ./pug/index-2.pug

The index-2.pug is placed next to index.pug, but Vite only detects changes for the parent file. Maybe that is because index-2.pug is not referenced in the .vue file directly. But that's a huge deal breaker! Is there any way to fix this?

Update:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    port: 8080
  }
})

and package.json

{
  "name": "booqall_ui",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "axios": "^1.4.0",
    "buffer": "^6.0.3",
    "pinia": "^2.1.3",
    "pug": "^3.0.2",
    "socket.io-client": "^4.7.0",
    "underscore": "^1.13.6",
    "vite-plugin-pug": "^0.3.2",
    "vue": "^3.3.4",
    "vue-router": "^4.2.2",
    "vue-toast-notification": "^3.1.1"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.2.0",
    "@tsconfig/node18": "^2.0.1",
    "@types/node": "^18.16.18",
    "@types/underscore": "^1.11.5",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vue/eslint-config-prettier": "^7.1.0",
    "@vue/eslint-config-typescript": "^11.0.3",
    "@vue/tsconfig": "^0.4.0",
    "eslint": "^8.39.0",
    "eslint-plugin-vue": "^9.11.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.8.8",
    "sass": "^1.63.6",
    "typescript": "~5.0.4",
    "vite": "^4.3.9",
    "vue-tsc": "^1.6.5"
  }
}

Answer 1

After investigating this issue it turned out to be a Design Flaw in Vite. The framework has heavily designed based on the assumption that all markup languages work similar to Html without any advanced functionalities. For that reasons, it cannot understand any dependency between PUG files. In fact when a change is made to a pug dependency, it is detected! but the framework is too dump to understand that it is a dependency of another pug and that other pug should be reloaded. I absolutely discourage Vite after running to this issue as we had to migrate back to Webpack.