Deployment to production showing translation keys as opposed to the translation value.

[hbendix]

I might be missing something obvious here, but bear with me.

I use vue-i18n for a small website and have English and German locales. Whenever I deploy the app to the webserver using FileZilla, any new translations in the respective json files show the key instead of the translation on the site. In a new incognito tab, however, the new translation is shown.

I figured this is a caching error, but even after multiple hard refreshes on the website with the issue, I still see the translation key as opposed to the translation. I am at a loss as to why this might be happening.

I am loading the locales via JSON, as detailed:

fetch(`/locales/${lang}.json?url`, {
          headers: [
            ['Accept-Language', lang],
          ],
        })
          .then(resp => resp.json())
          .then(resp => {
            document.querySelector('html').setAttribute('lang', lang)
            i18n.setLocaleMessage(lang, encodeURIs(resp) as LocaleMessageDictionary<VueMessageType>)
            mainStore.languagesLoaded.push(lang)
            setLanguage(lang, callback)
          })

When I navigate to: https://www.examplewebsite.com/locales/en.json I can see the new translation files have been copied across and are there in the file, so it's not a file mismatch.

This issue might fall outside the scope of vue-i18n hence why I am raising a Discussion Q&A. Any help is greatly appreciated.