Make availableLocales reactive

[markusand]

trafficstars

Clear and concise description of the problem

Using availableLocales in a component is a list of strings that doesn't update reactively when adding new messages.

const { availableLocales } = useI18n();  // string[]

i18n.global.setLocaleMessage('ca', messages); // Does not trigger an update to availableLocales 

Suggested solution

Would be useful if availableLocales was a computed list so any list or selector or whatever that is using it can update automatically

const { availableLocales } = useI18n(); // ComputedRef<string[]>

Not sure if changing line https://github.com/intlify/vue-i18n/blob/e9ab3e0933b8ac9cb859578235b363876065fdf2/packages/vue-i18n-core/src/composer.ts#L2559 to something like the following would do the trick.

return computed(() => Object.keys(_messages.value).sort());

Alternative

No response

Additional context

No response

Validations

• [X] Read the Contributing Guidelines
• [X] Read the Documentation
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.