Support for multiple scopes

[Aztriltus]

Is your feature request related to a problem? Please describe.

In my projects, I usually split up the translation files for a language into different files. E.g.

/locales
- en
  - common.ts
  - moduleA.ts
  - moduleB.ts
  - index.ts // exports all the files as single json

Then in my /locales/en/index.ts, I have

// index.ts
export default {
  common: englishCommonLocale,
  moduleA: englishModuleALocale,
  moduleB: englishModuleBLocale,
  ...
}

To use a single scope, I could do this

const t = useScopedI18n('common')

However, I can't use multiple scopes, especially when the component/page uses a combination of scopes

Describe the solution you'd like

Ideally we can define an array of scopes like

const t = useScopedI18n(['common', 'moduleA'])

Describe alternatives you've considered

Currently, since my project isn't very big, we didn't use useScopedI18n and instead opted for useI18n directly.

We could have considered trying the following, but we didn't try it

const tCommon = useScopeI18n('common')
const tModuleA = useScopedI18n('moduleA')

Happy to hear how you guys solve this or whether there is a better way than my approach!

[addlistener]

I use these a lot

const tCommon = useScopeI18n('common')
const tModuleA = useScopedI18n('moduleA')