Gulp changes reflects only on manual refreshing not automatically

I’m reaching out for some assistance regarding an issue I’ve encountered with my Gulpfile setup. I’ve configured the browser sync option in the file, and while changes are correctly getting reflected in the destination file, the browser does not auto-refresh. Instead, I have to manually refresh the browser to see the updates.I would really appreciate any help or guidance on how to fix this issue and get the auto-refresh working correctly.Thank you in advance for your time and support!

gulpfile.js

const gulp = require("gulp"),
  sass = require("gulp-sass")(require("sass")),
  plumber = require("gulp-plumber"),
  notify = require("gulp-notify"),
  sourcemaps = require("gulp-sourcemaps"),
  postcss = require("gulp-postcss"),
  autoprefixer = require("autoprefixer"),
  cssnano = require("gulp-cssnano"),
  uglify = require("gulp-uglify"),
  browserSync = require("browser-sync").create(),
  injectPartials = require("gulp-inject-partials"),
  del = require("del"),
  zip = require("gulp-zip"),
  concat = require("gulp-concat");

// PATHS
const paths = {
  styles: {
    src: "src/scss/**/*.scss",
  },
  mincss: {
    src: "src/mincss/*",
  },
  bundle: {
    dest: "assets/theme-css/",
    filename: "bundle.min.css",
  },
  minjs: {
    src: [
      "src/minjs/jquery.min.js",
      "src/minjs/bootstrap.bundle.min.js",
      "src/minjs/**/*.js",
      "src/js/**/*.js",
    ],
    dest: "assets/theme-js/",
  },
  image: {
    src: "src/img/**/*",
    dest: "assets/img/",
  },
  fonts: {
    src: "src/fonts/*",
    dest: "assets/fonts/",
  },
  html: {
    src: "src/templates/**/*.html",
    dest: "./",
  },
};

// WELCOME
gulp.task("hello", function (done) {
  console.log("WELCOME TO GULP");
  done();
});

// BUNDLE-CSS: SCSS + pre-minified CSS -> bundle.min.css
gulp.task("bundle-css", function () {
   console.log("SCSS file changed, recompiling...");
  return gulp
    .src([paths.mincss.src, paths.styles.src])
    .pipe(plumber({ errorHandler: notify.onError("CSS Error: <%= error.message %>") }))
    .pipe(sourcemaps.init())
    .pipe(sass().on("error", sass.logError))
    .pipe(postcss([
      autoprefixer({ overrideBrowserslist: ["last 2 versions"], cascade: false })
    ]))
    .pipe(cssnano())
    .pipe(concat(paths.bundle.filename))
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest(paths.bundle.dest))
    .pipe(browserSync.stream());
});

// MINIFY JS
gulp.task("minjs", function () {
   console.log("SCSS file changed, recompiling...");
  return gulp
    .src(paths.minjs.src)
    .pipe(plumber({ errorHandler: notify.onError("JS Error: <%= error.message %>") }))
    .pipe(uglify())
    .pipe(concat("single.min.js"))
    .pipe(gulp.dest(paths.minjs.dest));
});

// IMAGES
gulp.task("image", function () {
  return gulp.src(paths.image.src).pipe(gulp.dest(paths.image.dest));
});

// FONTS
gulp.task("fonts", function () {
  return gulp.src(paths.fonts.src).pipe(gulp.dest(paths.fonts.dest));
});

// HTML PARTIALS
gulp.task("ptl_render", function () {
  return gulp
    .src([paths.html.src, "!src/templates/partial/*.html"])
    .pipe(plumber({ errorHandler: notify.onError("HTML Error: <%= error.message %>") }))
    .pipe(injectPartials({ removeTags: true }))
    .pipe(gulp.dest(paths.html.dest));
});

// WATCH WITH BROWSER SYNC
gulp.task("watch", function () {
  browserSync.init({
    server: {
      baseDir: "./",
      notify:true
    },
    injectChanges: true,  // Ensures that CSS is injected
    reloadOnRestart: true, // Ensures the page is reloaded if necessary
  });

  gulp.watch([paths.styles.src, paths.mincss.src], gulp.series("bundle-css"));
  gulp.watch(paths.html.src, gulp.series("ptl_render"));
  gulp.watch(paths.minjs.src, gulp.series("minjs"));
  gulp.watch(paths.image.src, gulp.series("image"));
  gulp.watch(paths.fonts.src, gulp.series("fonts"));

  // Reload browser when any of these files are changed
  gulp.watch([
    "assets/theme-css/**/*.css",
    "assets/theme-js/**/*.js",
    "*.html",
    "assets/img/**/*",
    "assets/fonts/**/*"
  ]).on("change", browserSync.reload);
});

// SERVE
gulp.task("serve", gulp.parallel(["bundle-css", "ptl_render", "minjs","image","fonts"]));

// DEFAULT
gulp.task("default", gulp.series("serve", "watch"));

// CLEAN TASKS
gulp.task("clearAll", function () {
  return del(["assets", "./*.html", "./build"]);
});
gulp.task("clearBuild", function () {
  return del("./build");
});

// ZIP PROJECT
gulp.task("zip", function () {
  return gulp
    .src([
      "./**/*",
      "!./node_modules/**",
      "!./src/**",
      "!./gulpfile.js",
      "!./package-lock.json",
      "!./package.json",
    ])
    .pipe(zip("project.zip"))
    .pipe(gulp.dest("./zip"));
});

// BUILD TO /build FOLDER
gulp.task("build", function () {
  return gulp
    .src([
      "./**/*",
      "!./node_modules/**",
      "!./src/**",
      "!./gulpfile.js",
      "!./package-lock.json",
      "!./package.json",
    ])
    .pipe(gulp.dest("./build"));
});

For some reason this works for me:

// gulp.watch(paths.css.src).on('change', browserSync.reload);  // doesn't work

gulp.watch(paths.css.src).on('change', function () {
  browserSync.reload();                                        // this works
}); 

It looks like you would want to target paths.bundle.dest for your css destination, for example. That is, where the results of your css manipulations end up.

The point being that the simpler callback version above does NOT work for me but the second version does!