Make availableLocales reactive

[markusand]

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.

[kazupon]

Thank you for your feedback! You can contribute it! We are waiting for your PR :)

[markusand]

Thanks for your answer. I'd love to be a contributor, but I'm afraid I don't know the code so deep to be confident. Moreover, the proposed change would be a breaking change and I'm sure there are plenty of procedures for how you want to handle this.