brower-sync via gulp file does not reload although browserSync.reload is wired to on('change')

Question

I serve a site in development via browser-sync and have tried to wire up the sub-directories, so that the browser on files changes reloads. -- However the browser does not reload when I kick of the server with

$ gulp serve

and load the site in a browser and then change index.html. After this the display in the browser does not update by itself.

Do I do something wrong in my gulpfile?:

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();

var site = "site"

function browser_sync_init() {
    browserSync.init({
        server: {
            baseDir: site,
            index: "index.html"
        },

        port: 8080,
        ui: false,
        open: false,
    });
}

gulp.task('serve', function() {

    browser_sync_init();

    gulp.watch(site+"/scripts/*.js").on('change', browserSync.reload);
    gulp.watch(site+"/*.html").on('change', browserSync.reload);
});

gulp.task('default', gulp.series('serve'));

Thanks for any pointers!