laravel mix hot reload on vuejs with laravel in laradock isn't working

I am running npm run hot in workspace container in laradock for vuejs in laravel app.

Everything runs as usual except that there is no live changes on the page and the public js code in /app/js is not updated. However, new js file name is added to mix-manifest.json. Below are webpack.mix.js and mix-manifest for your reference. Pls advice. Thanks.

mix-manifest.json

{
    "/app/js/main.js": "/app/js/main.js",
    "/app/css/style.css": "/app/css/style.css",
    "/app/js/main.1049867fcc436b45d95b.hot-update.js": "/app/js/main.1049867fcc436b45d95b.hot-update.js",
    "/app/js/main.8668477626f63534a669.hot-update.js": "/app/js/main.8668477626f63534a669.hot-update.js",
    "/app/js/main.7d3c16f73042f1bca9a7.hot-update.js": "/app/js/main.7d3c16f73042f1bca9a7.hot-update.js"
}

webpack.mix.js

const  mix  = require('laravel-mix');

// for HMR
mix.options({
  hmrOptions: {
    host: 'mydomain.local',  // site's host name
    port: 81,
  }
});

var webpackConfig = {
  output: {
    filename: 'app/js/main.js',
    publicPath: 'http://mydomain.local:81/app/js',
  },
   devServer: {
    proxy: {
      host: '0.0.0.0',  // host machine ip
      port: 81,
      public: 'http://mydomain.local:81'
    },
    watchOptions:{
      aggregateTimeout:200,
      poll:5000
    },
  }
}

mix.webpackConfig(webpackConfig);
mix.js('resources/vueapp/src/main.js', 'public/app/js')
   .sass('resources/vueapp/src/styles/style.scss', 'public/app/css');