watch route.params.lang for changes in url

src/components/LanguageButton.vue

@@ -10,7 +10,7 @@
   
   
 <script setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter, useRoute } from 'vue-router';
 
@@ -21,7 +21,7 @@ const route = useRoute();
 // Create a reactive variable to track the selected language
 const selectedLanguage = ref(locale.value);
 
-function handleLanguageChange(event) {
+function handleLanguageChange() {
     switchLanguage(selectedLanguage.value);
 }
 
@@ -38,6 +38,18 @@ function switchLanguage(lang) {
     });
   }
 }
+
+// Watch for changes in route language parameter to sync with selectedLanguage
+watch(
+  () => route.params.lang,
+  (newLang) => {
+    if (newLang && locale.value !== newLang) {
+      locale.value = newLang;
+      selectedLanguage.value = newLang;
+    }
+  },
+  { immediate: true }
+);
 </script>