Why does Browser sync only update index.html when building a project in gulp?

Question

gulp.js

I'm new, making a portfolio website using Gulp, and using BrowserSync to reload after making changes to the page. Here is my project structure:

Here is the app folder structure:

The problem is that browsec sync only updates index.html and its associated css. It does not update other pages, although it should, here is my code from gulpfile.js.

var gulp = require('gulp');
var sass = require('gulp-sass');
sass.compiler = require('node-sass');
var scssCombine = require('gulp-scss-combine');
var concat = require('gulp-concat');
var clean = require('gulp-clean');
var sourcemaps = require('gulp-sourcemaps');
var plumber = require('gulp-plumber');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;

gulp.task('clean-scss', function () {
  return gulp.src('app/sass/common/style.scss', {read: false})
    .pipe(clean());
});

gulp.task('scssCombine', function () {
  return gulp.src('app/sass/*.scss')
    .pipe(scssCombine())
    .pipe(concat('style.scss'))
    .pipe(gulp.dest('app/sass/common'));
});

gulp.task('sass', function () {
  return gulp.src('app/sass/common/style.scss')
    .pipe(sourcemaps.init())
    .pipe(plumber())
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('app/css/'))
    .pipe(reload({stream: true}));
});

gulp.task('serve', function () {
  browserSync.init({
    server: "app"
  });
  gulp.watch('app/sass/*.scss', gulp.series('clean-scss', 'scssCombine', 'sass'));
  gulp.watch('app/*.html').on('change', reload);
});

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

As you can see, gulp.watch should watch all sass and html files, but this does not happen, help me figure out what is wrong.