Repository: xiCO2k/laravel-vue-i18n (ts)

Issue:
Translation set to null if key doesn't exist
In our project, we don't have translations for simple strings in `en_US.json`, only in any other language. So, when we use wTrans within our code, the value is initially set to the key, but then once `loadLanguageAsync` finishes it is set to null by [this piece of code](https://github.com/xiCO2k/laravel-vue-i18n/blob/main/src/index.ts#L357) because the translation key doesn't exist.

Here is a test to reproduce our issue.
```js
it('checks if watching translation works if key does not exist', async () => {
    await global.mountPlugin('<div />');

    const translated = wTrans('Welcome to the Vue!');

    expect(translated.value)
        .toBe('Welcome to the Vue!');

    await loadLanguageAsync('en');

    // Fails because translated.value now equals to null
    expect(translated.value)
        .toBe('Welcome to the Vue!');
})
```

One possible solution I found is by having a watchEffect within wTrans, but I have no idea if it can result in some performance issues, so it would be wise to check first. Hopefully, you will find a solution.

```js
wTrans(key: string, replacements: ReplacementsInterface = {}): ComputedRef<string> {
  watchEffect(() => {
    this.activeMessages[key] = this.findTranslation(key) || this.findTranslation(key.replace(/\//g, '.')) || key
  })

  return computed(() => this.makeReplacements(this.activeMessages[key], replacements))
}
```

Pull request:
fix: Translations set to null if key doesn't exist
Closes #129

Patch:
diff --git a/src/index.ts b/src/index.ts
index d198261..4c70d1a 100644
--- a/src/index.ts
+++ b/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 patch:
diff --git a/test/plurization.test.ts b/test/plurization.test.ts
index 2e2448f..2a4ceda 100644
--- a/test/plurization.test.ts
+++ b/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');
+})
\ No newline at end of file
diff --git a/test/translate.test.ts b/test/translate.test.ts
index 1e3b434..b7a649d 100644
--- a/test/translate.test.ts
+++ b/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');
+})
\ No newline at end of file