update dependencies

example/vue/package.json

@@ -8,20 +8,20 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "core-js": "^3.6.5",
-    "i18next": "20.3.1",
-    "i18next-browser-languagedetector": "6.1.1",
-    "i18next-http-backend": "1.2.6",
-    "vue": "^3.0.0"
+    "core-js": "^3.21.0",
+    "i18next": "21.6.10",
+    "i18next-browser-languagedetector": "6.1.3",
+    "i18next-http-backend": "1.3.2",
+    "vue": "^3.2.29"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
+    "@vue/cli-plugin-babel": "~4.5.15",
+    "@vue/cli-plugin-eslint": "~4.5.15",
+    "@vue/cli-service": "~4.5.15",
+    "@vue/compiler-sfc": "^3.2.29",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0"
+    "eslint-plugin-vue": "^8.4.1"
   },
   "eslintConfig": {
     "root": true,

example/vue/src/Suspenser.vue

@@ -13,7 +13,7 @@
 import App from './App.vue'
 
 export default {
-  name: 'Suspenser',
+  name: 'SuspenserComponent',
   components: {
     App
   }

example/vue/src/components/TranslationShowCase.vue

@@ -2,9 +2,9 @@
   <div class="hello">
     <h1>{{ $t("welcome") }}</h1>
     <p>
-      <Trans i18nKey="descr">
+      <TransComponent i18nKey="descr">
         <a href="https://cli.vuejs.org" target="_blank" rel="noopener" /><i>👋</i>
-      </Trans>
+      </TransComponent>
     </p>
     <div>
       <div>

example/vue/src/vue-i18next.js

@@ -70,7 +70,7 @@ export const createI18n = (i18next) => ({
     })
 
     // install component
-    app.component('Trans', { // Try to make this as similar as possible to: https://react.i18next.com/latest/trans-component
+    app.component('TransComponent', { // Try to make this as similar as possible to: https://react.i18next.com/latest/trans-component
       props: {
         tag: {
           type: String,