webpack devServer Hot reload / HMR reloading but not compiling VueJS components

Using webpack dev server on a vuejs project, when I edit a file the web page is reloaded but not updated.

When sniffing the websocket communication between the client and webpack server I can see this after editing LoginComponent.vue:

The “type”: “static-changed” makes me believe that webpack doesn’t know that it has to compile .vue files on change, and I have no idea how to fix that.

Here is my vue.config.js:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    optimization: {
      runtimeChunk: 'single',
    },
  },
  devServer: {
    client: {
      progress: true,
    },
    static: {
      directory:'/dontmanagestaticfiles'
    },
    port: 80,
    allowedHosts: 'all',
    headers: {
      'Access-Control-Allow-Origin': '*'
    },
    
    // hot: true,
    liveReload: true,

    watchFiles: {
      paths: ['src/**'],
      options: {
        // ignored: ['nodes_modules'],
        usePolling: true,
        aggregateTimeout: 300,
        interval: 500,
      }
    },
  },
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions = {
          isCustomElement: tag => tag.startsWith('ion-')
        };
        return options;
      });
  }
})