Reload of JSON language files

I store translations in JSON files and configure nuxt-i18n like this:

    ['nuxt-i18n', {
      locales: [locale.language],
      vueI18n: {
        messages: {
          [locale.code]: require('./locales/' + locale.code + '.json')
        }
      },
      defaultLocale: locale.code
    }]

My use case is that I use nuxt generate to generate separate sites for all languages that are served from different domains, so I only specify one language per build.

The problem I’m facing is that changes to ./locales/.json are only visible in the app after I restart the dev server.

Having

    watch: [
      '~/locales'
    ],

in nuxt.config.js does cause the page to reload when I save locales files, but the changes are not visible.

Any thoughs on this?

<div align="right">_{This question is available on Nuxt.js community (#c28)}</div>

[nghiepdev]

using lazy-load-translations to reload the translations.

 [ 'nuxt-i18n',
      {
        locales: [
          {
            code: 'en',
            name: 'English',
            file: 'en-US.js',
          },
        ],
        lazy: true,
        langDir: 'locales/',
      }
]

// locales/en-US.js
export default require('./en.json')

[katafractari]

I’m currently using nodemon for this purpouse. Of course a full restart of the dev server is still needed to reload the translations.

package.json

{
  "scripts": {
    "dev": "nodemon --watch locales --watch config --exec \"cross-env NODE_ENV=development LOCALE=en nuxt\""
  }
}