Fix: Synchronous Watcher Issue Caused by Locale Setting Order (#2104)

Author: lcjnil

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

@@ -2110,17 +2110,17 @@ export function createComposer(options: any = {}): any {
   const locale = computed({
     get: () => _locale.value,
     set: val => {
+      _context.locale = val
       _locale.value = val
-      _context.locale = _locale.value
     }
   })
 
   // fallbackLocale
   const fallbackLocale = computed({
     get: () => _fallbackLocale.value,
     set: val => {
+      _context.fallbackLocale = val
       _fallbackLocale.value = val
-      _context.fallbackLocale = _fallbackLocale.value
       updateFallbackLocale(_context, _locale.value, val)
     }
   })

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

@@ -64,14 +64,35 @@ describe('locale', () => {
   test('reactivity', async () => {
     const fn = vi.fn()
 
-    const { locale } = createComposer({})
+    const { locale, t } = createComposer({
+      messages: {
+        en: {
+          test: 'en'
+        },
+        'en-US': {
+          test: 'en-US'
+        }
+      }
+    })
     watch(locale, fn)
     locale.value = 'en'
     await nextTick()
 
     expect(fn).toBeCalled()
     expect(fn.mock.calls[0][0]).toEqual('en')
     expect(fn.mock.calls[0][1]).toEqual('en-US')
+
+    let result = ''
+    locale.value = 'en'
+
+    watch(locale, () => (result = t('test')), {
+      immediate: true,
+      flush: 'sync'
+    })
+    expect(result).toEqual('en')
+    locale.value = 'en-US'
+    await nextTick()
+    expect(result).toEqual('en-US')
   })
 })