gulp watch task not running even though i am using gulp version4 syntax

Question

i have a problem with gulp watch task , it's not giving any result when i run it , the syntax is correct for gulpv4 ,here is my gulpfile.js

/* Variables  */

var gulp = require("gulp");
var concat = require("gulp-concat");
var prefix = require("gulp-autoprefixer");
var sass = require("gulp-sass")(require("sass"));
var twig = require("gulp-twig");
var imagemin = require("gulp-imagemin");
var watch = require("gulp-watch");
var jshint = require("gulp-jshint");
var browserSync = require("browser-sync").create();


/* SCSS TASK */

gulp.task("scss", function () {
  return gulp
    .src('src/scss/main.scss')
    .pipe(sass())
    .pipe(prefix("last 2 versions"))
    .pipe(concat("style.css"))
    .pipe(gulp.dest('dist/css'))
});

/* JAVASCRIPT  TASK */

gulp.task("js", function () {
     return gulp
    .src("src/js/main.js")
    .pipe(jshint())
    .pipe(concat("main.js"))
    .pipe(gulp.dest("dist/js"))
});

/* IMAGES TASK */

gulp.task("image", function () {
    return gulp
    .src("src/assets/images/*.{jpg,png,svg}") 
    .pipe(imagemin())
    .pipe(gulp.dest("dist/assets/images"))
});


/* TWIG TASK */

gulp.task("twig", function () {
  "use strict";
  return gulp
    .src("src/templates/index.twig")
    .pipe(
      twig({
        data: {
          title: "TransitFlow Website - Services",
          benefits: ["Fast", "Flexible", "Secure"],
        },
      })
    )
    .pipe(gulp.dest("dist/pages"));
});

/* BROWSER-SYNC TASK */

gulp.task("browser-sync", function () {


  browserSync.init({
    server: {
      baseDir: "./dist/pages",
    },
    notify: false,
  });
});


/* Watch TASK */

gulp.task('watch',function () {
    gulp.watch('src/scss/main.scss', gulp.series('scss')),
    gulp.watch('src/templates/pages/index.twig', gulp.series('twig')),
    gulp.watch('src/assets/images/*.{jpg,png,svg}', gulp.series('image'));
});

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

also here is my package.json file

{
  "name": "transiflow-website",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "gulp-project",
    "twig-project",
    "scss-project",
    "transitflow-website"
  ],
  "author": "khadija asehnoune",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^4.3.1",
    "jquery": "^3.5.1"
  },
  "devDependencies": {
    "bootstrap-icons": "^1.10.5",
    "browser-sync": "^2.29.1",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^8.0.0",
    "gulp-cli": "^2.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^7.0.0",
    "gulp-jshint": "^2.1.0",
    "gulp-sass": "^5.1.0",
    "gulp-twig": "^1.2.0",
    "gulp-watch": "^5.0.1",
    "jshint": "^2.13.6"
  }
}

enter image description here

i have tried changing the syntax and the paths many times but with no luck . i am just starting on gulp so i dont really know how it works that much , i would appreciate any help from you guys !