fix: Translations set to null if key doesn't exist (#146)

src/index.ts

@@ -1,4 +1,4 @@
-import { reactive, Plugin, computed, ComputedRef } from 'vue'
+import {reactive, Plugin, computed, ComputedRef, watchEffect} from 'vue'
 import { OptionsInterface } from './interfaces/options'
 import { PluginOptionsInterface } from './interfaces/plugin-options'
 import { LanguageInterface } from './interfaces/language'
@@ -391,7 +391,9 @@ export class I18n {
    * Get the translation for the given key and watch for any changes.
    */
   wTrans(key: string, replacements: ReplacementsInterface = {}): ComputedRef<string> {
-    this.activeMessages[key] = this.findTranslation(key) || this.findTranslation(key.replace(/\//g, '.')) || key
+    watchEffect(() => {
+      this.activeMessages[key] = this.findTranslation(key) || this.findTranslation(key.replace(/\//g, '.')) || key
+    })
 
     return computed(() => this.makeReplacements(this.activeMessages[key], replacements))
   }

test/plurization.test.ts

@@ -142,3 +142,15 @@ it.each([
 
   expect(choose(message, number, lang)).toBe(correctMessage);
 });
+
+it('checks if watching wTransChoice works if key does not exist', async () => {
+    await global.mountPlugin('<div />');
+
+    const translated = wTransChoice('Not existing translation :count', 1);
+
+    expect(translated.value).toBe('Not existing translation 1');
+
+    await loadLanguageAsync('en');
+
+    expect(translated.value).toBe('Not existing translation 1');
+})

test/translate.test.ts

@@ -245,3 +245,15 @@ it('allows to use html tags on translations even if the key does not exist', asy
 
   expect(trans('<div>Not Exist</div>')).toBe('<div>Not Exist</div>');
 })
+
+it('checks if watching wTrans works if key does not exist', async () => {
+  await global.mountPlugin('<div />');
+
+  const translated = wTrans('Not existing translation');
+
+  expect(translated.value).toBe('Not existing translation');
+
+  await loadLanguageAsync('en');
+
+  expect(translated.value).toBe('Not existing translation');
+})