Vue.js + Webpack + Gulp как реализовать HMR для JS?

Question

[Bogdan Odarchenko]

Столкнулся с проблемой как в рамках данной сборки реализовать обновления js скриптов без перезагрузки всей страницы.

Ссылка на сборку www.fayloobmennik.net/5815874

Задача которая собирает первый раз

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)
            ]
        },
    });
});

Вот наблюдатель

// 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']);

});