I'm creating a project in nuxt and I'm learning to use i18n for translations. Currently the structure of the translations is:

lang
   english
      header.js
      footer.js
   spanish
      header.js
      footer.js
   es-ES.js
   en-US.js

header and footer are files that simply export a json object with their respective translations

es-ES.js or en-US.js are files that collect all the .js from the spanish and english folders.

Nuxt.config.js

i18n: {
locales: [
  {
    code: 'en',
    file: 'en-US.js',
    iso: 'en-US',
  },
  {
    code: 'es',
    file: 'es-ES.js',
    iso: 'es-ES',
  },
],
lazy: true,
langDir: 'lang/',
defaultLocale: 'es-ES',
detectBrowserLanguage: false,
 },

I want to have in each .js file of the translations a json with all the translations separately. For now everything works, both the translations of the header.js and those of the aside.js

The problem is that if, for example, in the header.js file I have the following:

export default {
title: 'StackOverflow'
}

and in the footer.js I want to reference the header.title :

export default {
text: this.title + ' All rights reserved'
}

It doesnt work. And if the title of the project changes, I would like to change it only in the header.js and that in all the .js files it would not be necessary to change it since it refers to the header.title