Vue.js + Webpack + Gulp how to implement HMR for JS?

Question

Node.js

I ran into a problem how to update js scripts within this assembly without reloading the entire page.
Assembly link www.fayloobmennik.net/5815874
The task that collects for the first time

gulp.task('serve', ['styles', 'vendor', 'watch'], function () {
    browserSync.init({
        browser: "google chrome",
        proxy: {
            target: "prodacton",
            middleware: [
                webpackDevMiddleware(compiler, {
                    // IMPORTANT: dev middleware can't access config, so we should
                    // provide publicPath by ourselves
                    publicPath: '/site/templates/scripts/',
                    stats: {
                        colors: true,
                        chunks: false
                    },
                    // for other settings see
                    // http://webpack.github.io/docs/webpack-dev-middleware.html
                }),
                // compiler should be the same as above
                webpackHotMiddleware(compiler)
            ]
        },
    });
});

Here is the observer

// Watch
gulp.task('watch', function () {

    // Watch for changes in `app` folder
    gulp.watch([
        config.app + '/**/*.php',
        config.app + '/**/*.inc',
        config.app + '/images/**/*'
    ]).on('change', browserSync.reload);

    // Watch .sass files
    gulp.watch(config.app + '/styles/**/*.scss', ['styles']);

});