Locale property of useI18n seems as it is not Reactive

Hi vue-i18n authors, I am working on Vue 3 project and trying to switch locale via URL i18n.locale=to.params.lang. In the components where I am using ...useI18n() inside the return of setup() to retrievelocale , but locale property does not change dynamically as expected. Thanks!

[yusuf-io]

Actually in my app I use object destructuring, but for purpose of clarity I used ...useI18n() in my aforementioned example. @ux-engineer Thank you for your advice.

[ux-engineer]

@YusufISMAILOGLU I’d advise against using this syntax:

return {
  ...useI18n(),
};

This way you are exposing everything to the template when actually needing just one property. Instead consider using object-desctructed properties:

const { locale } = useI18n();

return {
  locale,
};

Also in some cases, you might need to wrap the returned property as ref, but I’m not yet sure when this is needed to be more specific…perhaps not helpful here:

const { locale } = useI18n();

return {
  locale: ref(locale),
};