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

vue-i18n/packages/vue-i18n-core/src/composer.ts

Line 2559 in e9ab3e0

return Object.keys(_messages.value).sort()

to something like the following would do the trick.

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

Alternative

No response

Additional context

No response

Validations

• Read the Contributing Guidelines
• Read the Documentation
• 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.