My Page is not reloading and I have to manually Refresh the Page to see my changes. What could be the issue here?

// Start a server with BrowserSync to preview the site in
function server(done) {
  browser.init(
    { // mirror server headers to dev env
      middleware: function (req, res, next) {

        let CSP = "default-src 'self' *.coronawarn.app; img-src 'self' *.coronawarn.app data:";
        if(req.url.indexOf("/science") != -1){
          CSP = "default-src 'self' 'unsafe-inline' 'unsafe-eval' *.coronawarn.app; img-src 'self' *.coronawarn.app data:";
        }else if(req.url.indexOf("/analysis") != -1){
          CSP = "default-src 'self' 'unsafe-inline' 'unsafe-eval' *.coronawarn.app; img-src 'self' *.coronawarn.app data:; connect-src 'self' https://obs.eu-de.otc.t-systems.com/";
        }
        

        next();
      },
      server: {
        baseDir: PATHS.dist,
        serveStaticOptions: {
          extensions: ['html','json']
        }
      },
      port: PORT,
      reloadDelay: 2000,
      open: !isCI() // do not open webbrowser if running in CI
    },
    done
  );
}

// Reload the browser with BrowserSync
function reload(done) {
  browser.reload();
  done();
}

my watch is here :

function watch(done) {
  if (isCI()) {
    console.log('Running in CI, skipping watch task.');
    done();
    return;
  }
  gulp
    .watch('src/pages/**/*.html')
    .on('all', gulp.series(pages, reload));
  gulp
    .watch('src/{layouts,partials}/**/*.html')
    .on('all', gulp.series(resetPages, pages, reload));
  gulp
      .watch('src/data/**/*.{js,json,yml}')
      .on('all', gulp.series(resetPages, pages, reload));
}

and resetPages :

function resetPages(done) {
  panini.refresh();
  done();
}

my main goal is to reload src/data folder which contains json that render the page.