From c1ea134c35282d7125c589638b3bfbe6b385ed09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0t=C4=9Bp=C3=A1n=20Gran=C3=A1t?=
 <granat.stepan@gmail.com>
Date: Thu, 20 Jun 2024 10:44:32 +0200
Subject: [PATCH] fix: vue $t update every time language or translation has
 changed (#3348)

---
 packages/vue/src/VueTolgee.ts | 33 +++++++++++++++++----------------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/packages/vue/src/VueTolgee.ts b/packages/vue/src/VueTolgee.ts
index 4be97943e2..747fc1f11a 100644
--- a/packages/vue/src/VueTolgee.ts
+++ b/packages/vue/src/VueTolgee.ts
@@ -1,4 +1,5 @@
 import type { App } from 'vue';
+import { ref } from 'vue';
 import {
   getTranslateProps,
   TolgeeInstance,
@@ -19,23 +20,23 @@ export const VueTolgee = {
       throw new Error('Tolgee instance not passed in options');
     }
 
-    app.mixin({
-      beforeCreate() {
-        this.$options.__keySubscription = tolgee.onNsUpdate(() => {
-          this.$forceUpdate();
-        });
-      },
-      unmounted() {
-        this.$options.__keySubscription.unsubscribe();
-      },
-      methods: {
+    const createTFunc = () => {
+      return (...props) => {
         // @ts-ignore
-        $t(...props) {
-          // @ts-ignore
-          const params = getTranslateProps(...props);
-          const { ns } = params;
-          this.$options.__keySubscription.subscribeNs(ns);
-          return tolgee.t(params);
+        const params = getTranslateProps(...props);
+        return tolgee.t(params);
+      };
+    };
+
+    const tFunc = ref(createTFunc());
+    tolgee.on('update', () => {
+      tFunc.value = createTFunc();
+    });
+
+    app.mixin({
+      computed: {
+        $t() {
+          return tFunc.value;
         },
       },
     });