fix: components not updating correctly when changing language

The issue was caused by incorrect handling of the `i18n.global.locale` value in the Composition API.

When using `createI18n` with `legacy: false`, `i18n.global.locale` is a reactive ref.
Assigning directly with `i18n.global.locale = lang;` breaks reactivity.

The correct usage is : `i18n.global.locale.value = lang;`.

However, this assignment was unnecessary because the value is already updated automatically when the language changes.

All scripts using `const { locale } = useI18n({ useScope: "global" });` are updated to use `locale.value` instead of just `locale`, to ensure correct reactive behavior.

Fixes: #1597, #1772, and possibly other related issues.

src/components/Event/DateCalendarIcon.vue

@@ -27,7 +27,7 @@ import { useI18n } from "vue-i18n";
 
 const { locale } = useI18n({ useScope: "global" });
 
-const localeConverted = locale.replace("_", "-");
+const localeConverted = computed(() => locale.value.replace("_", "-"));
 
 const props = withDefaults(
   defineProps<{
@@ -40,15 +40,15 @@ const props = withDefaults(
 const dateObj = computed<Date>(() => new Date(props.date));
 
 const month = computed<string>(() =>
-  dateObj.value.toLocaleString(localeConverted, { month: "short" })
+  dateObj.value.toLocaleString(localeConverted.value, { month: "short" })
 );
 
 const day = computed<string>(() =>
-  dateObj.value.toLocaleString(localeConverted, { day: "numeric" })
+  dateObj.value.toLocaleString(localeConverted.value, { day: "numeric" })
 );
 
 const weekday = computed<string>(() =>
-  dateObj.value.toLocaleString(localeConverted, { weekday: "short" })
+  dateObj.value.toLocaleString(localeConverted.value, { weekday: "short" })
 );
 
 const smallStyle = computed<string>(() => (props.small ? "1.2" : "2"));

src/components/Event/FullAddressAutoComplete.vue

@@ -346,7 +346,7 @@ const asyncData = async (query: string): Promise<void> => {
   try {
     const queryVars = {
       query,
-      locale: locale,
+      locale: locale.value,
       type: props.resultType,
     };
 
@@ -428,7 +428,7 @@ const reverseGeoCode = async (e: LatLng, zoom: number) => {
       latitude: e.lat,
       longitude: e.lng,
       zoom,
-      locale: locale as unknown as string,
+      locale: locale.value as unknown as string,
     });
     if (!result) return;
     addressData.value = result.reverseGeocode;

src/utils/i18n.ts

@@ -43,7 +43,6 @@ export const i18n = createI18n({
 const loadedLanguages = [DEFAULT_LOCALE];
 
 function setI18nLanguage(lang: string): string {
-  i18n.global.locale = lang;
   setLanguageInDOM(lang);
   return lang;
 }

src/views/About/PrivacyView.vue

@@ -23,10 +23,10 @@ const { locale } = useI18n({ useScope: "global" });
 const { result: configResult } = useQuery<{ config: IConfig }>(
   PRIVACY,
   () => ({
-    locale: locale,
+    locale: locale.value,
   }),
   () => ({
-    enabled: locale !== undefined,
+    enabled: locale.value !== undefined,
   })
 );
 

src/views/About/TermsView.vue

@@ -26,10 +26,10 @@ const { result: termsResult, loading: termsLoading } = useQuery<{
 }>(
   TERMS,
   () => ({
-    locale: locale,
+    locale: locale.value,
   }),
   () => ({
-    enabled: locale !== undefined,
+    enabled: locale.value !== undefined,
   })
 );