How to track json data changes through browserSync?

Question

Node.js

Hello Guys. I don't even know how to formulate my next problem more clearly. Half a year ago, I created a topic here where I needed to get json data from n-number of json files into one json file. In these files, I store text information, which I then output through the each
contacts.json loop

"contactsItems":
  [
    {
      "title" : "Полное ФИО",
      "id" : "fullname",
    },
      "title" : "Возраст",
      "id" : "age",
    }
  ]
}

contacts.pug

div.contacts__inner
  each item in jsons.contacts.contactsItems
    label(for=item.id) #{item.title}
    input(id=item.id)

This solution works, but in order for the changes made to be displayed in the browser, I need to rebuild and restart the server. And so every time.
Then I thought that I need to jsonwrap the code in dachshunds:

gulp.task("jsonData", function() {
  const modules = fs.readdirSync( dir )
  modules.forEach( item => {
    const module = path.join( dir, item )
    if ( ! fs.lstatSync( module ).isDirectory() ) return
    const jsons = fs.readdirSync( module ).filter( item => path.extname( item ) === '.json' )
    jsons.forEach( json => {
      const name = path.basename( json, path.extname( json ) )
      const file = path.join( dir, item, json )
        data[name] = JSON.parse( fs.readFileSync( file ) )
    })
  })
});

and call it gulp.watchlike this:

gulp.watch("src/modules/**/*.json", gulp.series("jsonData", "pages")).on('change', server.reload);

But when I put this code in tax, it gives me:

Problems?