matomo: one i18next instance per element

packages/matomo/src/dbp-matomo-demo.js

-import {i18n} from './i18n.js';
+import {createInstance} from './i18n.js';
 import {css, html} from 'lit-element';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import {AuthKeycloak, LoginButton} from '@dbp-toolkit/auth';
@@ -12,7 +12,8 @@ export class MatomoDemo extends ScopedElementsMixin(DBPLitElement) {
 
     constructor() {
         super();
-        this.lang = 'de';
+        this._i18n = createInstance();
+        this.lang = this._i18n.language;
         this.entryPointUrl = '';
         this.matomoUrl = '';
         this.matomoSiteId = -1;
@@ -38,9 +39,14 @@ export class MatomoDemo extends ScopedElementsMixin(DBPLitElement) {
         };
     }
 
-    connectedCallback() {
-        super.connectedCallback();
-        i18n.changeLanguage(this.lang);
+    update(changedProperties) {
+         changedProperties.forEach((oldValue, propName) => {
+            if (propName === "lang") {
+                this._i18n.changeLanguage(this.lang);
+            }
+        });
+
+        super.update(changedProperties);
     }
 
     track(action, message) {

packages/matomo/src/i18n.js

-import {createInstance} from '@dbp-toolkit/common/i18next.js';
+import {createInstance as _createInstance} from '@dbp-toolkit/common/i18next.js';
 
 import de from './i18n/de/translation.json';
 import en from './i18n/en/translation.json';
 
-export const i18n = createInstance({en: en, de: de}, 'de', 'en');
\ No newline at end of file
+export function createInstance() {
+    return _createInstance({en: en, de: de}, 'de', 'en');
+}
\ No newline at end of file