Laravel-mix+brower-sync cannot listen for changes in .vue files. How do I configure them?

topic description

when I modify the .vue file, the browser does refresh, but the content is not updated. At this time, I go to change any js file, and the contents of the previous changes to the .vue file will be updated and displayed to the browser. Caching has been disabled.

related codes

webpack.mix.js

// "laravel-mix": "^1.7.2",
const { mix } = require("laravel-mix");
const path = require("path");


mix.webpackConfig({
  output: {
    publicPath: "/",
    chunkFilename: "js/[name].[chunkhash].js"
  },
  resolve: {
    alias: {
      "config": "assets/js/config",
      "lang": "assets/js/lang",
      "plugins": "assets/js/plugins",
      "vendor": "assets/js/vendor",
      "dashboard": "assets/js/dashboard",
      "home": "assets/js/home",
      "demo": "assets/js/demo",
      "js": "assets/js",
    },
    modules: [
      "node_modules",
      path.resolve(__dirname, "resources")
    ]
  },
});
mix.options({
    extractVueStyles: true
});

let themes = [
  "resources/assets/sass/themes/default-theme.scss",
  "resources/assets/sass/themes/gray-theme.scss",
];

themes.forEach((item) => {
  mix.sass(item, "public/css/themes").version();
})

mix.browserSync({
        proxy: "https://192.168.1.222:8082",
        files: [
            "./resources/views/**/*.blade.php",
            "./resources/assets/js/**/*.js",
            "./resources/assets/js/**/*.vue",
        ]
})
.js("resources/assets/js/app.js", "public/js")
.sass("resources/assets/sass/app.scss", "public/css")
.js("resources/assets/js/home.js", "public/js")
.sass("resources/assets/sass/home.scss", "public/css")
.js("resources/assets/js/demo.js", "public/js")
.version()
;

what result do you expect? What is the error message actually seen?

after modifying the .vue file, the browser refreshes and updates the modified content on the .vue file.

Menu