From 418d0596e7bfac844509ce31b9ec2e2bf574def4 Mon Sep 17 00:00:00 2001
From: Aaron Zielstorff <aaron.zi@web.de>
Date: Fri, 30 Aug 2024 22:03:04 +0200
Subject: [PATCH] adds eslint and action for lint checking

---
 ...{build-aas-ui.yml => build-aas-web-ui.yml} |   0
 .github/workflows/lint-aas-web-ui.yml         |  27 +
 .github/workflows/prettier.yml                |  35 -
 aas-web-ui/eslint.config.mjs                  |  97 ++
 aas-web-ui/package.json                       |  17 +-
 aas-web-ui/src/App.vue                        |   7 +-
 .../src/UserPlugins/HelloWorldPlugin.vue      |  23 +-
 aas-web-ui/src/components/AASTreeview.vue     |  85 +-
 aas-web-ui/src/components/AASViewer.vue       |   3 +-
 aas-web-ui/src/components/About.vue           |  12 +-
 .../src/components/AppNavigation/AASList.vue  | 162 ++--
 .../AppNavigation/AASListDetails.vue          |  40 +-
 .../AppNavigation/AppNavigation.vue           | 275 +++---
 .../src/components/AppNavigation/AutoSync.vue |  17 +-
 .../src/components/AppNavigation/MainMenu.vue |  92 +-
 .../components/AppNavigation/RegisterAAS.vue  |  16 +-
 .../src/components/AppNavigation/Settings.vue |   3 +-
 .../AppNavigation/Settings/StatusSwitch.vue   |  12 +-
 .../AppNavigation/Settings/ThemeSwitch.vue    |  18 +-
 .../components/AppNavigation/UploadAAS.vue    |   8 +-
 .../src/components/ComponentVisualization.vue | 120 ++-
 .../src/components/Dashboard/Dashboard.vue    |  20 +-
 .../Dashboard/DashboardEditElement.vue        |  25 +-
 .../components/Dashboard/DashboardElement.vue |  70 +-
 .../components/Dashboard/DashboardGroup.vue   |  18 +-
 aas-web-ui/src/components/MainWindow.vue      |  26 +-
 .../src/components/SubmodelElementView.vue    | 191 ++--
 .../AnnotatedRelationshipElement.vue          |   4 +-
 .../src/components/SubmodelElements/Blob.vue  |  65 +-
 .../components/SubmodelElements/Entity.vue    |  27 +-
 .../src/components/SubmodelElements/File.vue  |  47 +-
 .../SubmodelElements/InvalidElement.vue       |  22 +-
 .../MultiLanguageProperty.vue                 |  61 +-
 .../components/SubmodelElements/Operation.vue |  89 +-
 .../components/SubmodelElements/Property.vue  |  48 +-
 .../src/components/SubmodelElements/Range.vue |  10 +-
 .../SubmodelElements/ReferenceElement.vue     |  80 +-
 .../SubmodelElements/RelationshipElement.vue  |  82 +-
 .../components/SubmodelElements/Submodel.vue  |   7 +-
 .../SubmodelElementCollection.vue             |   7 +-
 .../SubmodelElements/SubmodelElementList.vue  |   7 +-
 .../ValueTypes/BooleanType.vue                |  83 +-
 .../ValueTypes/DateTimeStampType.vue          |  87 +-
 .../ValueTypes/NumberType.vue                 |  66 +-
 .../ValueTypes/StringType.vue                 |  57 +-
 aas-web-ui/src/components/SubmodelList.vue    |  73 +-
 .../SubmodelPlugins/BillsOfMaterial.vue       |  37 +-
 .../components/SubmodelPlugins/CADPreview.vue |  49 +-
 .../SubmodelPlugins/ContactInformation.vue    |  21 +-
 .../SubmodelPlugins/DigitalNameplate.vue      |  31 +-
 .../HTWFuehrungskomponente.vue                |  58 +-
 .../SubmodelPlugins/HandoverDocumentation.vue |  51 +-
 .../SubmodelPlugins/ImagePreview.vue          |  36 +-
 .../SubmodelPlugins/JSONArrayProperty.vue     |  52 +-
 .../components/SubmodelPlugins/PDFPreview.vue |  34 +-
 .../SubmodelPlugins/TechnicalData.vue         |  25 +-
 .../SubmodelPlugins/TimeSeriesData.vue        | 183 ++--
 .../SubmodelPlugins/_SubmodelEntrypoint.vue   |  55 +-
 .../UIComponents/AssetInformation.vue         |  11 +-
 .../UIComponents/CollectionWrapper.vue        |  19 +-
 .../UIComponents/ConceptDescription.vue       |  32 +-
 .../UIComponents/DataSpecificationContent.vue |  62 +-
 .../UIComponents/DescriptionElement.vue       |   6 +-
 .../UIComponents/DisplayNameElement.vue       |   2 +-
 .../UIComponents/GenericDataVisu.vue          |  59 +-
 .../UIComponents/IdentificationElement.vue    |  14 +-
 .../components/UIComponents/SemanticID.vue    |   4 +-
 .../UIComponents/SubmodelElementGroup.vue     |  50 +-
 .../UIComponents/SubmodelElementWrapper.vue   |  31 +-
 .../src/components/UIComponents/VTreeview.vue |  32 +-
 .../src/components/Widgets/AreaChart.vue      |  48 +-
 .../src/components/Widgets/BarChart.vue       |  32 +-
 aas-web-ui/src/components/Widgets/Button.vue  |  15 +-
 .../src/components/Widgets/ColumnChart.vue    |  32 +-
 .../src/components/Widgets/DisplayField.vue   |  13 +-
 .../src/components/Widgets/DonutChart.vue     |  36 +-
 aas-web-ui/src/components/Widgets/Gauge.vue   |  36 +-
 .../src/components/Widgets/Histogram.vue      |  53 +-
 .../src/components/Widgets/InputField.vue     |  17 +-
 aas-web-ui/src/components/Widgets/Lamp.vue    |  11 +-
 .../src/components/Widgets/LineChart.vue      |  50 +-
 .../src/components/Widgets/RadialChart.vue    |  34 +-
 .../src/components/Widgets/ScatterChart.vue   |  46 +-
 aas-web-ui/src/components/Widgets/Switch.vue  |  21 +-
 aas-web-ui/src/main.ts                        |  31 +-
 aas-web-ui/src/mixins/DashboardHandling.ts    |  66 +-
 aas-web-ui/src/mixins/RequestHandling.ts      |  16 +-
 .../src/mixins/SubmodelElementHandling.ts     |  58 +-
 aas-web-ui/src/mixins/WidgetHandling.ts       |  28 +-
 aas-web-ui/src/plugins/index.ts               |   7 +-
 aas-web-ui/src/plugins/vuetify.ts             |   1 -
 aas-web-ui/src/router.ts                      |   8 +-
 aas-web-ui/src/store/AuthStore.ts             |   3 +-
 aas-web-ui/src/vue-shims.d.ts                 |   2 +-
 aas-web-ui/tsconfig.json                      |   2 +-
 .../{vite.config.ts => vite.config.mts}       |   9 +-
 aas-web-ui/yarn.lock                          | 913 +++++++++++++++++-
 97 files changed, 2859 insertions(+), 2024 deletions(-)
 rename .github/workflows/{build-aas-ui.yml => build-aas-web-ui.yml} (100%)
 create mode 100644 .github/workflows/lint-aas-web-ui.yml
 delete mode 100644 .github/workflows/prettier.yml
 create mode 100644 aas-web-ui/eslint.config.mjs
 rename aas-web-ui/{vite.config.ts => vite.config.mts} (83%)

diff --git a/.github/workflows/build-aas-ui.yml b/.github/workflows/build-aas-web-ui.yml
similarity index 100%
rename from .github/workflows/build-aas-ui.yml
rename to .github/workflows/build-aas-web-ui.yml
diff --git a/.github/workflows/lint-aas-web-ui.yml b/.github/workflows/lint-aas-web-ui.yml
new file mode 100644
index 00000000..8c33fb44
--- /dev/null
+++ b/.github/workflows/lint-aas-web-ui.yml
@@ -0,0 +1,27 @@
+name: Lint AAS Web UI
+
+on:
+  pull_request:
+    paths:
+      - 'aas-web-ui/**'
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./aas-web-ui
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+
+      - name: Install Dependencies
+        run: yarn install
+
+      - name: Run Linter
+        run: yarn lint:check
diff --git a/.github/workflows/prettier.yml b/.github/workflows/prettier.yml
deleted file mode 100644
index 48ba78fd..00000000
--- a/.github/workflows/prettier.yml
+++ /dev/null
@@ -1,35 +0,0 @@
-name: Code Formatting
-
-on:
-  pull_request:
-    branches: [main]
-    paths:
-      - 'aas-web-ui/**'
-
-jobs:
-  prettier:
-    name: Prettier Check
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Repository
-        uses: actions/checkout@v4
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '22'
-
-      - name: Install Prettier
-        run: |
-          npm install --global prettier@latest
-          npm install --global prettier-plugin-vue
-
-      - name: Run Prettier
-        run: |
-          cd aas-web-ui
-          prettier_output=$(prettier --check --config ./.prettierrc --ignore-path ./.prettierignore --no-error-on-unmatched-pattern **/*.ts **/*.vue **/*.json **/*.js)
-          echo "$prettier_output"
-          if ! echo "$prettier_output" | grep -q 'All matched files use Prettier code style!'; then
-            echo "Formatting issues found"
-            exit 1
-          fi
diff --git a/aas-web-ui/eslint.config.mjs b/aas-web-ui/eslint.config.mjs
new file mode 100644
index 00000000..e86006f9
--- /dev/null
+++ b/aas-web-ui/eslint.config.mjs
@@ -0,0 +1,97 @@
+import js from '@eslint/js';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import prettier from 'eslint-plugin-prettier';
+import pluginPromise from 'eslint-plugin-promise';
+import simpleImportSort from 'eslint-plugin-simple-import-sort';
+import vue from 'eslint-plugin-vue';
+import ts from 'typescript-eslint';
+
+export default [
+    {
+        ignores: ['{dist,public}/**/*', 'vue-shim.d.ts'],
+    },
+
+    {
+        languageOptions: {
+            ecmaVersion: 'latest',
+        },
+    },
+
+    // js
+    js.configs.recommended,
+
+    // ts
+    ...ts.configs.recommended,
+    {
+        rules: {
+            '@typescript-eslint/no-explicit-any': 'warn',
+            '@typescript-eslint/no-unused-expressions': ['error', { allowTernary: true }],
+        },
+    },
+
+    // vue
+    ...vue.configs['flat/recommended'],
+    {
+        // files: ['*.vue', '**/*.vue'],
+        languageOptions: {
+            parserOptions: {
+                parser: ts.parser,
+            },
+        },
+    },
+    {
+        rules: {
+            'vue/multi-word-component-names': 'off',
+            'vue/no-unused-vars': ['error', { ignorePattern: '^_' }],
+            'vue/max-attributes-per-line': ['error', { singleline: 5 }],
+        },
+    },
+
+    // Sort imports
+    {
+        plugins: {
+            'simple-import-sort': simpleImportSort,
+        },
+        rules: {
+            'simple-import-sort/imports': [
+                'error',
+                {
+                    groups: [
+                        [
+                            '^\\u0000', // all side effects (0 at start)
+                            '^[^/\\.].*\u0000$', // external types (0 at end)
+                            '^\\..*\u0000$', // internal types (0 at end)
+                            '^@?\\w', // Starts with @
+                            '^[^.]', // any
+                            '^\\.', // local
+                        ],
+                    ],
+                },
+            ],
+            'simple-import-sort/exports': 'error',
+            '@typescript-eslint/no-explicit-any': ['warn', { ignoreRestArgs: true }],
+        },
+    },
+
+    // Promise
+    pluginPromise.configs['flat/recommended'],
+    {
+        rules: {
+            'promise/always-return': 'off',
+            'promise/catch-or-return': 'off',
+        },
+    },
+
+    // Prettier
+    {
+        plugins: {
+            prettier,
+        },
+        rules: {
+            'prettier/prettier': 'error',
+        },
+    },
+
+    // Disable rules that conflict with Prettier
+    eslintConfigPrettier,
+];
diff --git a/aas-web-ui/package.json b/aas-web-ui/package.json
index a33e0127..366fbc00 100644
--- a/aas-web-ui/package.json
+++ b/aas-web-ui/package.json
@@ -7,7 +7,9 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint:check": "eslint ./",
+    "lint:fix": "eslint --fix ./"
   },
   "dependencies": {
     "@fontsource/roboto": "^5.0.14",
@@ -30,18 +32,27 @@
     "webfontloader": "^1.0.0"
   },
   "devDependencies": {
+    "@eslint/js": "^9.9.1",
+    "@types/eslint__js": "^8.42.3",
     "@types/leaflet": "^1.9.12",
     "@types/md5": "^2.3.5",
     "@types/node": "^22.4.1",
     "@types/three": "^0.166.0",
     "@types/uuid": "^10.0.0",
     "@types/webfontloader": "^1.6.38",
-    "@types/lodash": "^4.17.7",
     "@vitejs/plugin-vue": "^5.1.2",
-    "prettier": "3.3.3",
+    "eslint": "^9.9.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-promise": "^7.1.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-vue": "^9.27.0",
+    "prettier": "^3.3.3",
     "sass": "^1.77.8",
     "typescript": "^5.5.4",
+    "typescript-eslint": "^8.3.0",
     "vite": "^5.4.2",
+    "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-vuetify": "^2.0.4",
     "vue-tsc": "^2.0.29"
   }
diff --git a/aas-web-ui/src/App.vue b/aas-web-ui/src/App.vue
index 484f2be4..44174e31 100644
--- a/aas-web-ui/src/App.vue
+++ b/aas-web-ui/src/App.vue
@@ -16,12 +16,11 @@
 <script lang="ts">
     import { defineComponent } from 'vue';
     import { useRoute, useRouter } from 'vue-router';
-    import { useNavigationStore } from '@/store/NavigationStore';
-    import { useAASStore } from '@/store/AASDataStore';
+    import AppNavigation from '@/components/AppNavigation/AppNavigation.vue';
     import RequestHandling from '@/mixins/RequestHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
-
-    import AppNavigation from '@/components/AppNavigation/AppNavigation.vue';
+    import { useAASStore } from '@/store/AASDataStore';
+    import { useNavigationStore } from '@/store/NavigationStore';
 
     interface AASType {
         endpoints: Array<{
diff --git a/aas-web-ui/src/UserPlugins/HelloWorldPlugin.vue b/aas-web-ui/src/UserPlugins/HelloWorldPlugin.vue
index dbbe14ca..c0112ce6 100644
--- a/aas-web-ui/src/UserPlugins/HelloWorldPlugin.vue
+++ b/aas-web-ui/src/UserPlugins/HelloWorldPlugin.vue
@@ -11,7 +11,7 @@
             <!-- Display SubmodelElement -->
             <SubmodelElementWrapper
                 :SubmodelElementObject="SubmodelElement"
-                @updateValue="updatePluginValue"></SubmodelElementWrapper>
+                @update-value="updatePluginValue"></SubmodelElementWrapper>
         </div>
     </v-container>
 </template>
@@ -19,20 +19,19 @@
 <script lang="ts">
     import { defineComponent } from 'vue';
     import { useTheme } from 'vuetify';
-    import { useAASStore } from '@/store/AASDataStore';
+    import SubmodelElementWrapper from '@/components/UIComponents/SubmodelElementWrapper.vue';
     import RequestHandling from '@/mixins/RequestHandling'; // Mixin to handle the requests to the AAS
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling'; // Mixin to handle typical SubmodelElement-Actions
-
-    import SubmodelElementWrapper from '@/components/UIComponents/SubmodelElementWrapper.vue';
+    import { useAASStore } from '@/store/AASDataStore';
 
     export default defineComponent({
         name: 'PluginJSONArray',
-        SemanticID: 'http://hello.world.de/plugin_submodel', // SemanticID of the HelloWorld-Plugin
-        props: ['submodelElementData'],
+        SemanticID: 'http://hello.world.de/plugin_submodel',
         components: {
             SubmodelElementWrapper,
         },
-        mixins: [RequestHandling, SubmodelElementHandling],
+        mixins: [RequestHandling, SubmodelElementHandling], // SemanticID of the HelloWorld-Plugin
+        props: ['submodelElementData'],
 
         setup() {
             const theme = useTheme();
@@ -50,11 +49,6 @@
             };
         },
 
-        mounted() {
-            // console.log('HelloWorldPlugin mounted');
-            this.initializePlugin(); // Initialize the HelloWorld-Plugin when the component is mounted
-        },
-
         computed: {
             // Get the selected Treeview Node (SubmodelElement) from the store
             SelectedNode() {
@@ -62,6 +56,11 @@
             },
         },
 
+        mounted() {
+            // console.log('HelloWorldPlugin mounted');
+            this.initializePlugin(); // Initialize the HelloWorld-Plugin when the component is mounted
+        },
+
         methods: {
             // Function to initialize the HelloWorld-Plugin
             initializePlugin() {
diff --git a/aas-web-ui/src/components/AASTreeview.vue b/aas-web-ui/src/components/AASTreeview.vue
index 29c3e342..9f6b8c1d 100644
--- a/aas-web-ui/src/components/AASTreeview.vue
+++ b/aas-web-ui/src/components/AASTreeview.vue
@@ -22,8 +22,8 @@
                 </div>
                 <!-- TODO: Replace with Vuetify Treeview Component when it get's released in Q1 2023 -->
                 <VTreeview
-                    v-else
                     v-for="item in submodelData"
+                    v-else
                     :key="item.id"
                     class="root"
                     :item="item"
@@ -35,19 +35,16 @@
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-    import { useNavigationStore } from '@/store/NavigationStore';
-    import { useAASStore } from '@/store/AASDataStore';
-    import { useEnvStore } from '@/store/EnvironmentStore';
+    import VTreeview from '@/components/UIComponents/VTreeview.vue';
     import RequestHandling from '@/mixins/RequestHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
-
-    import VTreeview from '@/components/UIComponents/VTreeview.vue';
+    import { useAASStore } from '@/store/AASDataStore';
+    import { useEnvStore } from '@/store/EnvironmentStore';
+    import { useNavigationStore } from '@/store/NavigationStore';
 
     export default defineComponent({
         name: 'AASTreeview',
         components: {
-            RequestHandling, // Mixin to handle the requests to the AAS
-
             VTreeview,
         },
         mixins: [RequestHandling, SubmodelElementHandling],
@@ -73,8 +70,40 @@
             };
         },
 
-        mounted() {
-            this.initTreeWithRouteParams();
+        computed: {
+            // get selected AAS from Store
+            SelectedAAS() {
+                return this.aasStore.getSelectedAAS;
+            },
+
+            // get the trigger for AAS selection from Store
+            triggerAAS() {
+                return this.navigationStore.getTriggerAASSelected;
+            },
+
+            // gets loading State from Store
+            loading() {
+                return this.aasStore.getLoadingState;
+            },
+
+            // get AAS Registry URL from Store
+            aasRegistryServerURL() {
+                return this.navigationStore.getAASRegistryURL;
+            },
+
+            // get Submodel Registry URL from Store
+            submodelRegistryURL() {
+                return this.navigationStore.getSubmodelRegistryURL;
+            },
+
+            // get the updated Treeview Node from Store
+            updatedNode() {
+                return this.aasStore.getUpdatedNode;
+            },
+            // get the init treeview flag from Store
+            initTree() {
+                return this.aasStore.getInitTreeByReferenceElement;
+            },
         },
 
         watch: {
@@ -111,40 +140,8 @@
             },
         },
 
-        computed: {
-            // get selected AAS from Store
-            SelectedAAS() {
-                return this.aasStore.getSelectedAAS;
-            },
-
-            // get the trigger for AAS selection from Store
-            triggerAAS() {
-                return this.navigationStore.getTriggerAASSelected;
-            },
-
-            // gets loading State from Store
-            loading() {
-                return this.aasStore.getLoadingState;
-            },
-
-            // get AAS Registry URL from Store
-            aasRegistryServerURL() {
-                return this.navigationStore.getAASRegistryURL;
-            },
-
-            // get Submodel Registry URL from Store
-            submodelRegistryURL() {
-                return this.navigationStore.getSubmodelRegistryURL;
-            },
-
-            // get the updated Treeview Node from Store
-            updatedNode() {
-                return this.aasStore.getUpdatedNode;
-            },
-            // get the init treeview flag from Store
-            initTree() {
-                return this.aasStore.getInitTreeByReferenceElement;
-            },
+        mounted() {
+            this.initTreeWithRouteParams();
         },
 
         methods: {
diff --git a/aas-web-ui/src/components/AASViewer.vue b/aas-web-ui/src/components/AASViewer.vue
index de67202c..1d0b70dc 100644
--- a/aas-web-ui/src/components/AASViewer.vue
+++ b/aas-web-ui/src/components/AASViewer.vue
@@ -21,9 +21,8 @@
 <script lang="ts">
     import { defineComponent } from 'vue';
     import { useAASStore } from '@/store/AASDataStore';
-
-    import SubmodelList from './SubmodelList.vue';
     import ComponentVisualization from './ComponentVisualization.vue';
+    import SubmodelList from './SubmodelList.vue';
 
     export default defineComponent({
         name: 'AASViewer',
diff --git a/aas-web-ui/src/components/About.vue b/aas-web-ui/src/components/About.vue
index 0443aab0..35d5ff68 100644
--- a/aas-web-ui/src/components/About.vue
+++ b/aas-web-ui/src/components/About.vue
@@ -37,7 +37,7 @@
         <br />
         <v-list class="bg-background">
             <v-list-item>
-                <template v-slot:prepend>
+                <template #prepend>
                     <v-avatar>
                         <v-icon>mdi-web</v-icon>
                     </v-avatar>
@@ -50,7 +50,7 @@
                 >
             </v-list-item>
             <v-list-item>
-                <template v-slot:prepend>
+                <template #prepend>
                     <v-avatar>
                         <v-icon>mdi-mail</v-icon>
                     </v-avatar>
@@ -67,7 +67,7 @@
         <h2>Contributors</h2>
         <v-list item-props lines="three" class="bg-background">
             <v-list-item>
-                <template v-slot:prepend>
+                <template #prepend>
                     <v-avatar>
                         <v-img src="Zielstorff.jpg">
                             <template #sources>
@@ -86,7 +86,7 @@
             </v-list-item>
             <v-divider inset></v-divider>
             <v-list-item>
-                <template v-slot:prepend>
+                <template #prepend>
                     <v-avatar>
                         <v-img src="Schnicke.jpg">
                             <template #sources>
@@ -105,7 +105,7 @@
             </v-list-item>
             <v-divider inset></v-divider>
             <v-list-item>
-                <template v-slot:prepend>
+                <template #prepend>
                     <v-avatar>
                         <v-img src="Buettner.jpg">
                             <template #sources>
@@ -124,7 +124,7 @@
             </v-list-item>
             <v-divider inset></v-divider>
             <v-list-item>
-                <template v-slot:prepend>
+                <template #prepend>
                     <v-avatar>
                         <v-img src="Fischer.jpg">
                             <template #sources>
diff --git a/aas-web-ui/src/components/AppNavigation/AASList.vue b/aas-web-ui/src/components/AppNavigation/AASList.vue
index e86551b6..de8e26b3 100644
--- a/aas-web-ui/src/components/AppNavigation/AASList.vue
+++ b/aas-web-ui/src/components/AppNavigation/AASList.vue
@@ -7,14 +7,14 @@
                     <!-- Reload Button -->
                     <v-col cols="auto" class="pr-0">
                         <v-tooltip open-delay="600" location="bottom" :disabled="isMobile">
-                            <template v-slot:activator="{ props }">
+                            <template #activator="{ props }">
                                 <v-btn
                                     icon="mdi-reload"
                                     variant="plain"
-                                    @click="reloadList()"
                                     :loading="listLoading"
-                                    v-bind="props">
-                                    <template v-slot:loader>
+                                    v-bind="props"
+                                    @click="reloadList()">
+                                    <template #loader>
                                         <span class="custom-loader"><v-icon light>mdi-cached</v-icon></span>
                                     </template>
                                 </v-btn>
@@ -30,7 +30,7 @@
                             hide-details
                             label="Search for AAS..."
                             clearable
-                            @update:modelValue="filterAASList"></v-text-field>
+                            @update:model-value="filterAASList"></v-text-field>
                     </v-col>
                     <!-- Add existing AAS -->
                     <v-col cols="auto" class="px-0">
@@ -47,10 +47,9 @@
                     item-height="48"
                     :height="isMobile ? 'calc(100svh - 170px)' : 'calc(100vh - 218px)'"
                     class="pb-2 bg-card">
-                    <template v-slot:default="{ item }">
+                    <template #default="{ item }">
                         <!-- Single AAS -->
                         <v-list-item
-                            @click="selectAAS(item)"
                             class="bg-listItem mt-2 mx-2"
                             style="border-top: solid; border-right: solid; border-bottom: solid; border-width: 1px"
                             :style="{
@@ -59,7 +58,8 @@
                                     : isDark
                                       ? '#686868 !important'
                                       : '#ABABAB !important',
-                            }">
+                            }"
+                            @click="selectAAS(item)">
                             <!-- Tooltip with idShort and id -->
                             <v-tooltip
                                 activator="parent"
@@ -76,15 +76,15 @@
                                 </div>
                             </v-tooltip>
                             <!-- idShort of the AAS -->
-                            <template v-if="drawerState" v-slot:title>
+                            <template v-if="drawerState" #title>
                                 <div class="text-primary" style="z-index: 9999">{{ aasNameToDisplay(item) }}</div>
                             </template>
                             <!-- id of the AAS -->
-                            <template v-if="drawerState" v-slot:subtitle>
+                            <template v-if="drawerState" #subtitle>
                                 <div>{{ item['id'] }}</div>
                             </template>
                             <!-- open Details Button (with Status Badge) -->
-                            <template v-if="drawerState" v-slot:append>
+                            <template v-if="drawerState" #append>
                                 <!-- Badge that show's the Status of the AAS -->
                                 <v-badge
                                     :model-value="item['status'] && item['status'] == 'offline'"
@@ -94,26 +94,26 @@
                                     inline></v-badge>
                                 <!-- Information Button -->
                                 <v-btn
-                                    @click.stop="showAASDetails(item)"
                                     icon="mdi-information-outline"
                                     size="x-small"
                                     variant="plain"
-                                    style="z-index: 9000"></v-btn>
+                                    style="z-index: 9000"
+                                    @click.stop="showAASDetails(item)"></v-btn>
                                 <!-- Download AAS -->
                                 <v-btn
                                     v-if="aasRepoURL"
-                                    @click.stop="downloadAAS(item)"
                                     icon="mdi-download"
                                     size="x-small"
                                     variant="plain"
-                                    style="z-index: 9000; margin-left: -6px"></v-btn>
+                                    style="z-index: 9000; margin-left: -6px"
+                                    @click.stop="downloadAAS(item)"></v-btn>
                                 <!-- Remove from AAS Registry Button -->
                                 <v-btn
-                                    @click.stop="showDeleteDialog(item)"
                                     icon="mdi-close"
                                     size="x-small"
                                     variant="plain"
-                                    style="z-index: 9000; margin-left: -6px"></v-btn>
+                                    style="z-index: 9000; margin-left: -6px"
+                                    @click.stop="showDeleteDialog(item)"></v-btn>
                             </template>
                             <v-overlay
                                 :model-value="isSelected(item)"
@@ -127,15 +127,15 @@
             </v-list>
             <!-- AAS Details (only visible if the Information Button is pressed on an AAS) -->
             <AASListDetails
-                :detailsObject="detailsObject"
-                :showDetailsCard="showDetailsCard"
+                :details-object="detailsObject"
+                :show-details-card="showDetailsCard"
                 @close-details="showDetailsCard = false" />
             <!-- Collapse/extend Sidebar Button -->
             <v-list v-if="!isMobile" nav style="width: 100%; z-index: 9000" class="bg-detailsCard pa-0">
                 <v-divider style="margin-left: -8px; margin-right: -8px"></v-divider>
                 <!-- Button to collapse the Sidebar -->
-                <v-list-item @click="collapseSidebar()" class="ma-0">
-                    <template v-slot:prepend>
+                <v-list-item class="ma-0" @click="collapseSidebar()">
+                    <template #prepend>
                         <v-icon class="ml-2">mdi-chevron-double-left</v-icon>
                     </template>
                     <v-list-item-title class="text-caption">Close Sidebar</v-list-item-title>
@@ -150,14 +150,14 @@
             <v-card-text class="pb-0">
                 <span>Are you sure you want to delete the AAS?</span>
                 <v-checkbox v-model="deleteSubmodels" label="Also delete Submodels" hide-details></v-checkbox>
-                <v-alert class="mb-2" variant="tonal" border v-if="deleteSubmodels" color="warning"
+                <v-alert v-if="deleteSubmodels" class="mb-2" variant="tonal" border color="warning"
                     >Warning: If other shells refer to the same submodels, those references are not deleted!</v-alert
                 >
             </v-card-text>
             <v-card-actions>
                 <v-spacer></v-spacer>
                 <v-btn @click="deleteDialogShowing = false">Cancel</v-btn>
-                <v-btn variant="tonal" color="error" @click="confirmDelete" :loading="deleteLoading">Delete</v-btn>
+                <v-btn variant="tonal" color="error" :loading="deleteLoading" @click="confirmDelete">Delete</v-btn>
             </v-card-actions>
         </v-card>
     </v-dialog>
@@ -167,10 +167,10 @@
     import { defineComponent } from 'vue';
     import { useRoute, useRouter } from 'vue-router';
     import { useTheme } from 'vuetify';
-    import { useNavigationStore } from '@/store/NavigationStore';
-    import { useAASStore } from '@/store/AASDataStore';
     import RequestHandling from '@/mixins/RequestHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
+    import { useAASStore } from '@/store/AASDataStore';
+    import { useNavigationStore } from '@/store/NavigationStore';
     import AASListDetails from './AASListDetails.vue';
     // import RegisterAAS from './RegisterAAS.vue';
     import UploadAAS from './UploadAAS.vue';
@@ -214,62 +214,6 @@
             };
         },
 
-        mounted() {
-            // Load the AAS List on Startup if the AAS Registry URL is set
-            if (this.aasRegistryURL !== '') {
-                this.getAASData();
-            }
-
-            // check if the aas Query is set in the URL and if so load the AAS
-            const searchParams = new URL(window.location.href).searchParams;
-            const aasEndpoint = searchParams.get('aas');
-            if (aasEndpoint) {
-                // console.log('AAS Query is set: ', aasEndpoint);
-                let aas = {} as any;
-                let endpoints = [];
-                endpoints.push({ protocolInformation: { href: aasEndpoint } });
-                aas.endpoints = endpoints;
-                // dispatch the AAS set by the URL to the store
-                this.aasStore.dispatchSelectedAAS(aas);
-            }
-
-            // check if the status-check is set in the local storage and if so set the status-check state in the store
-            const statusCheck = localStorage.getItem('statusCheck');
-            if (statusCheck) {
-                // console.log('Status Check is set: ', statusCheck);
-                this.navigationStore.dispatchUpdateStatusCheck(statusCheck === 'true');
-            }
-        },
-
-        watch: {
-            // Watch the AAS Registry URL for changes and reload the AAS List if the URL changes
-            aasRegistryURL() {
-                if (this.aasRegistryURL !== '') {
-                    this.reloadList();
-                    if (this.statusCheck) {
-                        this.addConnectionInterval();
-                    }
-                } else {
-                    this.AASData = [];
-                }
-            },
-
-            // watch for changes in the status-check state and add/remove the connection interval
-            statusCheck() {
-                if (this.statusCheck) {
-                    this.addConnectionInterval();
-                }
-            },
-
-            // watch for changes in the trigger for AAS List reload
-            triggerAASListReload(triggerVal) {
-                if (triggerVal === true) {
-                    this.reloadList();
-                    this.navigationStore.dispatchTriggerAASListReload(false);
-                }
-            },
-        },
-
         computed: {
             // Check if the current Device is a Mobile Device
             isMobile() {
@@ -328,6 +272,62 @@
             },
         },
 
+        watch: {
+            // Watch the AAS Registry URL for changes and reload the AAS List if the URL changes
+            aasRegistryURL() {
+                if (this.aasRegistryURL !== '') {
+                    this.reloadList();
+                    if (this.statusCheck) {
+                        this.addConnectionInterval();
+                    }
+                } else {
+                    this.AASData = [];
+                }
+            },
+
+            // watch for changes in the status-check state and add/remove the connection interval
+            statusCheck() {
+                if (this.statusCheck) {
+                    this.addConnectionInterval();
+                }
+            },
+
+            // watch for changes in the trigger for AAS List reload
+            triggerAASListReload(triggerVal) {
+                if (triggerVal === true) {
+                    this.reloadList();
+                    this.navigationStore.dispatchTriggerAASListReload(false);
+                }
+            },
+        },
+
+        mounted() {
+            // Load the AAS List on Startup if the AAS Registry URL is set
+            if (this.aasRegistryURL !== '') {
+                this.getAASData();
+            }
+
+            // check if the aas Query is set in the URL and if so load the AAS
+            const searchParams = new URL(window.location.href).searchParams;
+            const aasEndpoint = searchParams.get('aas');
+            if (aasEndpoint) {
+                // console.log('AAS Query is set: ', aasEndpoint);
+                let aas = {} as any;
+                let endpoints = [];
+                endpoints.push({ protocolInformation: { href: aasEndpoint } });
+                aas.endpoints = endpoints;
+                // dispatch the AAS set by the URL to the store
+                this.aasStore.dispatchSelectedAAS(aas);
+            }
+
+            // check if the status-check is set in the local storage and if so set the status-check state in the store
+            const statusCheck = localStorage.getItem('statusCheck');
+            if (statusCheck) {
+                // console.log('Status Check is set: ', statusCheck);
+                this.navigationStore.dispatchUpdateStatusCheck(statusCheck === 'true');
+            }
+        },
+
         methods: {
             // Function to determine the name of the aas to be displayed
             aasNameToDisplay(AAS: any) {
diff --git a/aas-web-ui/src/components/AppNavigation/AASListDetails.vue b/aas-web-ui/src/components/AppNavigation/AASListDetails.vue
index cfd30d14..fccaad2f 100644
--- a/aas-web-ui/src/components/AppNavigation/AASListDetails.vue
+++ b/aas-web-ui/src/components/AppNavigation/AASListDetails.vue
@@ -20,11 +20,11 @@
                         <v-spacer></v-spacer>
                         <!-- Close Button -->
                         <v-btn
-                            @click="closeDetails()"
                             icon="mdi-close-circle-outline"
                             size="small"
                             variant="plain"
-                            style="z-index: 2000; margin-right: -8px"></v-btn>
+                            style="z-index: 2000; margin-right: -8px"
+                            @click="closeDetails()"></v-btn>
                     </v-row>
                 </v-card-title>
                 <v-divider></v-divider>
@@ -33,23 +33,23 @@
                     <!-- AAS Identification -->
                     <IdentificationElement
                         class="mb-2"
-                        :identificationObject="detailsObject"
-                        :modelType="'AAS'"
-                        :idType="'Identification (ID)'"
-                        :nameType="'idShort'"></IdentificationElement>
+                        :identification-object="detailsObject"
+                        :model-type="'AAS'"
+                        :id-type="'Identification (ID)'"
+                        :name-type="'idShort'"></IdentificationElement>
                     <v-divider v-if="detailsObject.description && detailsObject.description.length > 0"></v-divider>
                     <!-- AAS Description -->
                     <DescriptionElement
                         v-if="detailsObject.description && detailsObject.description.length > 0"
-                        :descriptionObject="detailsObject.description"
-                        :descriptionTitle="'Description'"
+                        :description-object="detailsObject.description"
+                        :description-title="'Description'"
                         :small="false"></DescriptionElement>
                 </v-list>
                 <v-divider v-if="assetInformation"></v-divider>
                 <!-- Asset Information -->
                 <AssetInformation
                     v-if="assetInformation && Object.keys(assetInformation).length > 0"
-                    :assetObject="assetInformation"></AssetInformation>
+                    :asset-object="assetInformation"></AssetInformation>
             </div>
         </v-expand-transition>
     </v-container>
@@ -57,12 +57,12 @@
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-    import { useNavigationStore } from '@/store/NavigationStore';
+    import AssetInformation from '@/components/UIComponents/AssetInformation.vue';
+    import DescriptionElement from '@/components/UIComponents/DescriptionElement.vue';
+    import IdentificationElement from '@/components/UIComponents/IdentificationElement.vue';
     import RequestHandling from '@/mixins/RequestHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
-    import IdentificationElement from '@/components/UIComponents/IdentificationElement.vue';
-    import DescriptionElement from '@/components/UIComponents/DescriptionElement.vue';
-    import AssetInformation from '@/components/UIComponents/AssetInformation.vue';
+    import { useNavigationStore } from '@/store/NavigationStore';
 
     export default defineComponent({
         name: 'AASListDetails',
@@ -88,6 +88,13 @@
             };
         },
 
+        computed: {
+            // Check if the current Device is a Mobile Device
+            isMobile() {
+                return this.navigationStore.getIsMobile;
+            },
+        },
+
         watch: {
             detailsObject() {
                 // If the AAS Details Card is opened, request asset-information
@@ -97,13 +104,6 @@
             },
         },
 
-        computed: {
-            // Check if the current Device is a Mobile Device
-            isMobile() {
-                return this.navigationStore.getIsMobile;
-            },
-        },
-
         methods: {
             // Function to close the AAS Details Card and emit the event to the parent component
             closeDetails() {
diff --git a/aas-web-ui/src/components/AppNavigation/AppNavigation.vue b/aas-web-ui/src/components/AppNavigation/AppNavigation.vue
index 325c764b..6970c77b 100644
--- a/aas-web-ui/src/components/AppNavigation/AppNavigation.vue
+++ b/aas-web-ui/src/components/AppNavigation/AppNavigation.vue
@@ -8,10 +8,10 @@
                     <img :src="EnvLogoPath" style="min-height: 42px; max-height: 42px" alt="Logo" />
                 </v-card>
                 <!-- Menu Toggle (Desktop) -->
-                <v-menu v-if="!isMobile" :close-on-content-click="false" v-model="mainMenu">
-                    <template v-slot:activator="{ props: menu }">
+                <v-menu v-if="!isMobile" v-model="mainMenu" :close-on-content-click="false">
+                    <template #activator="{ props: menu }">
                         <v-tooltip text="Main Menu" location="bottom" :open-delay="600">
-                            <template v-slot:activator="{ props: tooltip }">
+                            <template #activator="{ props: tooltip }">
                                 <v-app-bar-nav-icon
                                     class="ml-3"
                                     v-bind="mergeProps(menu, tooltip)"></v-app-bar-nav-icon>
@@ -19,7 +19,7 @@
                         </v-tooltip>
                     </template>
                     <!-- Main Menu Component -->
-                    <MainMenu @closeMenu="mainMenu = false"></MainMenu>
+                    <MainMenu @close-menu="mainMenu = false"></MainMenu>
                 </v-menu>
                 <v-spacer></v-spacer>
                 <!-- Settings-Menu for Auto-Sync and Sync-Interval -->
@@ -35,8 +35,8 @@
                     </template>
                 </v-img>
                 <!-- Menu Toggle (Mobile) -->
-                <v-dialog v-if="isMobile" fullscreen v-model="mainMenu" :z-index="9993" :transition="false">
-                    <template v-slot:activator="{ props }">
+                <v-dialog v-if="isMobile" v-model="mainMenu" fullscreen :z-index="9993" :transition="false">
+                    <template #activator="{ props }">
                         <v-btn icon="mdi-cog" v-bind="props" variant="text"></v-btn>
                     </template>
                     <v-card color="card">
@@ -44,7 +44,7 @@
                             <v-toolbar-title>Settings</v-toolbar-title>
                             <v-spacer></v-spacer>
                             <v-toolbar-items>
-                                <v-btn icon="mdi-close" @click="mainMenu = false" class="mr-3"></v-btn>
+                                <v-btn icon="mdi-close" class="mr-3" @click="mainMenu = false"></v-btn>
                             </v-toolbar-items>
                         </v-toolbar>
                         <!-- Auto-Sync and Theme Settings in Mobile View -->
@@ -55,14 +55,14 @@
                         </v-row>
                         <v-divider></v-divider>
                         <!-- Main Menu Component -->
-                        <MainMenu @closeMenu="mainMenu = false"></MainMenu>
+                        <MainMenu @close-menu="mainMenu = false"></MainMenu>
                     </v-card>
                 </v-dialog>
                 <!-- Settings Menu -->
                 <Settings v-if="!isMobile"></Settings>
                 <!-- Auth Status -->
                 <v-tooltip text="Authorization Status" location="bottom" :open-delay="600">
-                    <template v-slot:activator="{ props }">
+                    <template #activator="{ props }">
                         <v-icon v-bind="props" class="mr-3">{{
                             isAuthEnabled ? (authStatus ? 'mdi-lock-check' : 'mdi-lock-remove') : 'mdi-lock-off'
                         }}</v-icon>
@@ -77,7 +77,7 @@
                     text="Authorization Status"
                     location="bottom"
                     :open-delay="600">
-                    <template v-slot:activator="{ props }">
+                    <template #activator="{ props }">
                         <v-icon v-bind="props" @click="logout">mdi-logout</v-icon>
                     </template>
                     <span>Logout</span>
@@ -95,7 +95,7 @@
                 </v-card-text>
             </v-card>
             <span v-else class="text-buttonText">{{ Snackbar.text }}</span>
-            <template v-slot:actions>
+            <template #actions>
                 <v-btn :color="Snackbar.btnColor" variant="plain" @click="closeSnackbar()">
                     <v-icon>mdi-close</v-icon>
                 </v-btn>
@@ -113,27 +113,27 @@
 
         <!-- left Side Menu with the AAS List -->
         <v-navigation-drawer
+            v-if="showAASList && !isMobile"
+            v-model="drawerVisibility"
             :width="336"
             color="appNavigation"
             class="leftMenu"
-            v-if="showAASList && !isMobile"
-            v-model="drawerVisibility"
             @update:model-value="updateDrawerState">
             <AASList />
         </v-navigation-drawer>
         <v-btn
             v-if="showAASList && !isMobile && !drawerVisibility"
-            @click="extendSidebar()"
             style="position: fixed; bottom: 50px; left: 10px; z-index: 10"
-            icon="mdi-chevron-double-right"></v-btn>
+            icon="mdi-chevron-double-right"
+            @click="extendSidebar()"></v-btn>
 
         <!-- Mobile Menu -->
         <v-menu
-            transition="slide-y-reverse-transition"
-            v-model="mobileMenu"
             v-if="showMobileMenu"
+            v-model="mobileMenu"
+            transition="slide-y-reverse-transition"
             style="z-index: 9992">
-            <template v-slot:activator="{ props }">
+            <template #activator="{ props }">
                 <v-btn
                     v-bind="props"
                     :icon="mobileMenu ? 'mdi-close' : 'mdi-dots-vertical'"
@@ -200,22 +200,19 @@
     import { mergeProps } from 'vue';
     import { useRoute } from 'vue-router';
     import { useTheme } from 'vuetify';
-    import { useNavigationStore } from '@/store/NavigationStore';
-    import { useEnvStore } from '@/store/EnvironmentStore';
-    import { useAuthStore } from '@/store/AuthStore';
     import RequestHandling from '@/mixins/RequestHandling';
-
+    import { useAuthStore } from '@/store/AuthStore';
+    import { useEnvStore } from '@/store/EnvironmentStore';
+    import { useNavigationStore } from '@/store/NavigationStore';
     import AASList from './AASList.vue';
     import AutoSync from './AutoSync.vue';
-    import ThemeSwitch from './Settings/ThemeSwitch.vue';
     import MainMenu from './MainMenu.vue';
     import Settings from './Settings.vue';
+    import ThemeSwitch from './Settings/ThemeSwitch.vue';
 
     export default defineComponent({
         name: 'AppNavigation', // Name of the Component
         components: {
-            RequestHandling,
-
             AASList, // Component to display the AAS List
             AutoSync, // Component to display the Auto-Sync Settings
             ThemeSwitch, // Component to display the Theme Switch
@@ -258,6 +255,120 @@
             };
         },
 
+        computed: {
+            // Check if the current Device is a Mobile Device
+            isMobile() {
+                return this.navigationStore.getIsMobile;
+            },
+
+            // Check if the current Theme is dark
+            isDark() {
+                return this.theme.global.current.value.dark;
+            },
+
+            // get snackbar data from store
+            Snackbar() {
+                return this.navigationStore.getSnackbar;
+            },
+
+            // to check if the MainWindow is the current Route
+            showAASList() {
+                return ['MainWindow', 'AASViewer'].includes(this.route.name as string);
+            },
+
+            // get Drawer State from store
+            drawerState() {
+                // Computed Property to control the state of the Navigation Drawer (true -> collapsed, false -> extended)
+                return this.navigationStore.getDrawerState;
+            },
+
+            // Get the Env Variable for the AAS Discovery URL from the store
+            EnvAASDiscoveryPath() {
+                return this.envStore.getEnvAASDiscoveryPath;
+            },
+
+            // Get the Env Variable for the AAS Registry URL from the store
+            EnvAASRegistryPath() {
+                return this.envStore.getEnvAASRegistryPath;
+            },
+
+            // Get the Env Variable for the Submodel Registry URL from the store
+            EnvSubmodelRegistryPath() {
+                return this.envStore.getEnvSubmodelRegistryPath;
+            },
+
+            // Get the Env Variable for the AAS Repo URL from the store
+            EnvAASRepoPath() {
+                return this.envStore.getEnvAASRepoPath;
+            },
+
+            // Get the Env Variable for the Submodel Repo URL from the store
+            EnvSubmodelRepoPath() {
+                return this.envStore.getEnvSubmodelRepoPath;
+            },
+
+            // Get the Env Variable for the Concept Description Repo URL from the store
+            EnvConceptDescriptionRepoPath() {
+                return this.envStore.getEnvConceptDescriptionRepoPath;
+            },
+
+            // Get the Env Variable for the logo path from the store
+            EnvLogoPath() {
+                return this.envStore.getEnvLogoPath;
+            },
+
+            dashboardServicePath() {
+                return this.envStore.getEnvDashboardServicePath;
+            },
+
+            // Determine if Mobile Menu should be shown
+            showMobileMenu() {
+                let showMenu = false;
+                if (this.isMobile && !this.mainMenu) {
+                    showMenu = true;
+                }
+                return showMenu;
+            },
+
+            // Determine if Auto-Sync should be shown
+            showAutoSync() {
+                let showAutoSync = false;
+                if (
+                    this.route.name === 'MainWindow' ||
+                    this.route.name === 'AASList' ||
+                    this.route.name === 'SubmodelList' ||
+                    this.route.name === 'ComponentVisualization' ||
+                    this.route.name === 'AASViewer'
+                ) {
+                    showAutoSync = true;
+                }
+                return showAutoSync;
+            },
+
+            // get the keycloak authStatus from the store
+            authStatus() {
+                return this.authStore.getAuthStatus ? 'Authenticated' : 'Not Authenticated';
+            },
+
+            // Determine if Authorization is enabled
+            isAuthEnabled() {
+                return this.authStore.getAuthEnabled;
+            },
+        },
+
+        watch: {
+            // Watch for changes in the Snackbar Object and close it after the Timeout
+            Snackbar() {
+                if (this.Snackbar.status) {
+                    setTimeout(() => this.closeSnackbar(), this.Snackbar.timeout);
+                }
+            },
+
+            drawerState() {
+                this.drawerVisibility = this.drawerState;
+            },
+        },
+
         mounted() {
             this.isDashboardAvailable();
             // check the local storage for a saved theme preference
@@ -367,120 +478,6 @@
             }
         },
 
-        watch: {
-            // Watch for changes in the Snackbar Object and close it after the Timeout
-            Snackbar() {
-                if (this.Snackbar.status) {
-                    setTimeout(() => this.closeSnackbar(), this.Snackbar.timeout);
-                }
-            },
-
-            drawerState() {
-                this.drawerVisibility = this.drawerState;
-            },
-        },
-
-        computed: {
-            // Check if the current Device is a Mobile Device
-            isMobile() {
-                return this.navigationStore.getIsMobile;
-            },
-
-            // Check if the current Theme is dark
-            isDark() {
-                return this.theme.global.current.value.dark;
-            },
-
-            // get snackbar data from store
-            Snackbar() {
-                return this.navigationStore.getSnackbar;
-            },
-
-            // to check if the MainWindow is the current Route
-            showAASList() {
-                return ['MainWindow', 'AASViewer'].includes(this.route.name as string);
-            },
-
-            // get Drawer State from store
-            drawerState() {
-                // Computed Property to control the state of the Navigation Drawer (true -> collapsed, false -> extended)
-                return this.navigationStore.getDrawerState;
-            },
-
-            // Get the Env Variable for the AAS Discovery URL from the store
-            EnvAASDiscoveryPath() {
-                return this.envStore.getEnvAASDiscoveryPath;
-            },
-
-            // Get the Env Variable for the AAS Registry URL from the store
-            EnvAASRegistryPath() {
-                return this.envStore.getEnvAASRegistryPath;
-            },
-
-            // Get the Env Variable for the Submodel Registry URL from the store
-            EnvSubmodelRegistryPath() {
-                return this.envStore.getEnvSubmodelRegistryPath;
-            },
-
-            // Get the Env Variable for the AAS Repo URL from the store
-            EnvAASRepoPath() {
-                return this.envStore.getEnvAASRepoPath;
-            },
-
-            // Get the Env Variable for the Submodel Repo URL from the store
-            EnvSubmodelRepoPath() {
-                return this.envStore.getEnvSubmodelRepoPath;
-            },
-
-            // Get the Env Variable for the Concept Description Repo URL from the store
-            EnvConceptDescriptionRepoPath() {
-                return this.envStore.getEnvConceptDescriptionRepoPath;
-            },
-
-            // Get the Env Variable for the logo path from the store
-            EnvLogoPath() {
-                return this.envStore.getEnvLogoPath;
-            },
-
-            dashboardServicePath() {
-                return this.envStore.getEnvDashboardServicePath;
-            },
-
-            // Determine if Mobile Menu should be shown
-            showMobileMenu() {
-                let showMenu = false;
-                if (this.isMobile && !this.mainMenu) {
-                    showMenu = true;
-                }
-                return showMenu;
-            },
-
-            // Determine if Auto-Sync should be shown
-            showAutoSync() {
-                let showAutoSync = false;
-                if (
-                    this.route.name === 'MainWindow' ||
-                    this.route.name === 'AASList' ||
-                    this.route.name === 'SubmodelList' ||
-                    this.route.name === 'ComponentVisualization' ||
-                    this.route.name === 'AASViewer'
-                ) {
-                    showAutoSync = true;
-                }
-                return showAutoSync;
-            },
-
-            // get the keycloak authStatus from the store
-            authStatus() {
-                return this.authStore.getAuthStatus ? 'Authenticated' : 'Not Authenticated';
-            },
-
-            // Determine if Authorization is enabled
-            isAuthEnabled() {
-                return this.authStore.getAuthEnabled;
-            },
-        },
-
         methods: {
             mergeProps,
 
diff --git a/aas-web-ui/src/components/AppNavigation/AutoSync.vue b/aas-web-ui/src/components/AppNavigation/AutoSync.vue
index 1fafd427..dcb457e2 100644
--- a/aas-web-ui/src/components/AppNavigation/AutoSync.vue
+++ b/aas-web-ui/src/components/AppNavigation/AutoSync.vue
@@ -19,13 +19,13 @@
                 <!-- Switch to activate/deactive auto-sync -->
                 <v-list-item class="py-0">
                     <v-switch
+                        v-model="autoSyncStatus"
                         label="Auto Sync"
                         color="primary"
                         class="mx-3"
                         hide-details
-                        v-model="autoSyncStatus"
                         @change="updateAutoSync()">
-                        <template v-slot:append>
+                        <template #append>
                             <v-icon>mdi-autorenew</v-icon>
                         </template>
                     </v-switch>
@@ -40,13 +40,13 @@
                 <!-- Input Field to set the sync-interval -->
                 <v-list-item class="py-0">
                     <v-text-field
+                        v-model="intervalTime"
                         density="compact"
                         variant="outlined"
                         type="number"
-                        v-model="intervalTime"
                         hide-details
                         @update:focused="checkMin">
-                        <template v-slot:append-inner>
+                        <template #append-inner>
                             <span>ms</span>
                         </template>
                     </v-text-field>
@@ -69,7 +69,6 @@
 <script lang="ts">
     import { defineComponent } from 'vue';
     import { useNavigationStore } from '@/store/NavigationStore';
-
     import StatusSwitch from './Settings/StatusSwitch.vue';
 
     export default defineComponent({
@@ -94,10 +93,6 @@
             };
         },
 
-        mounted() {
-            this.autoSyncStatus = this.autoSync;
-        },
-
         computed: {
             // Get the auto-sync state from the store
             autoSync() {
@@ -110,6 +105,10 @@
             },
         },
 
+        mounted() {
+            this.autoSyncStatus = this.autoSync;
+        },
+
         methods: {
             // Checks if the input is smaller than 100ms and sets it to 100ms if it is
             checkMin(e: boolean) {
diff --git a/aas-web-ui/src/components/AppNavigation/MainMenu.vue b/aas-web-ui/src/components/AppNavigation/MainMenu.vue
index b821665d..c1fbc1cb 100644
--- a/aas-web-ui/src/components/AppNavigation/MainMenu.vue
+++ b/aas-web-ui/src/components/AppNavigation/MainMenu.vue
@@ -20,7 +20,7 @@
                                 :class="isMobile ? 'bg-card' : 'bg-navigationMenuSecondary'">
                                 <v-list-item>
                                     <v-list-item-title>Endpoints</v-list-item-title>
-                                    <template v-slot:append>
+                                    <template #append>
                                         <v-icon>mdi-chevron-right</v-icon>
                                     </template>
                                 </v-list-item>
@@ -50,138 +50,138 @@
                     :class="isMobile ? 'pt-0 mb-2 px-6 bg-card' : 'pt-4 bg-navigationMenu'">
                     <!-- Configure AAS Discovery URL -->
                     <v-text-field
+                        v-model="aasDiscoveryURL"
                         variant="outlined"
                         density="compact"
                         hide-details
                         class="my-3"
                         :class="isMobile ? '' : 'mr-3'"
                         label="AAS Discovery URL"
-                        v-model="aasDiscoveryURL"
-                        @keydown.native.enter="connectToAASDiscovery()">
-                        <template v-slot:append-inner>
+                        @keydown.enter="connectToAASDiscovery()">
+                        <template #append-inner>
                             <v-btn
                                 size="small"
                                 variant="elevated"
                                 color="primary"
                                 class="text-buttonText"
                                 style="right: -4px"
-                                @click.stop="connectToAASDiscovery()"
                                 :loading="loadingAASDiscovery"
+                                @click.stop="connectToAASDiscovery()"
                                 >Connect</v-btn
                             >
                         </template>
                     </v-text-field>
                     <!-- Configure AAS Registry URL -->
                     <v-text-field
+                        v-model="aasRegistryURL"
                         variant="outlined"
                         density="compact"
                         hide-details
                         class="my-3"
                         :class="isMobile ? '' : 'mr-3'"
                         label="AAS Registry URL"
-                        v-model="aasRegistryURL"
-                        @keydown.native.enter="connectToAASRegistry()">
-                        <template v-slot:append-inner>
+                        @keydown.enter="connectToAASRegistry()">
+                        <template #append-inner>
                             <v-btn
                                 size="small"
                                 variant="elevated"
                                 color="primary"
                                 class="text-buttonText"
                                 style="right: -4px"
-                                @click.stop="connectToAASRegistry()"
                                 :loading="loadingAASRegistry"
+                                @click.stop="connectToAASRegistry()"
                                 >Connect</v-btn
                             >
                         </template>
                     </v-text-field>
                     <!-- Configure Submodel Registry URL -->
                     <v-text-field
+                        v-model="submodelRegistryURL"
                         variant="outlined"
                         density="compact"
                         hide-details
                         class="my-3"
                         :class="isMobile ? '' : 'mr-3'"
                         label="Submodel Registry URL"
-                        v-model="submodelRegistryURL"
-                        @keydown.native.enter="connectToSubmodelRegistry()">
-                        <template v-slot:append-inner>
+                        @keydown.enter="connectToSubmodelRegistry()">
+                        <template #append-inner>
                             <v-btn
                                 size="small"
                                 variant="elevated"
                                 color="primary"
                                 class="text-buttonText"
                                 style="right: -4px"
-                                @click.stop="connectToSubmodelRegistry()"
                                 :loading="loadingSubmodelRegistry"
+                                @click.stop="connectToSubmodelRegistry()"
                                 >Connect</v-btn
                             >
                         </template>
                     </v-text-field>
                     <!-- Configure AAS Repository URL -->
                     <v-text-field
+                        v-model="AASRepoURL"
                         variant="outlined"
                         density="compact"
                         hide-details
                         class="my-3"
                         :class="isMobile ? '' : 'mr-3'"
                         label="AAS Repository URL"
-                        v-model="AASRepoURL"
-                        @keydown.native.enter="connectToEnvironment('AAS')">
-                        <template v-slot:append-inner>
+                        @keydown.enter="connectToEnvironment('AAS')">
+                        <template #append-inner>
                             <v-btn
                                 size="small"
                                 variant="elevated"
                                 color="primary"
                                 class="text-buttonText"
                                 style="right: -4px"
-                                @click.stop="connectToEnvironment('AAS')"
                                 :loading="loadingAASRepo"
+                                @click.stop="connectToEnvironment('AAS')"
                                 >Connect</v-btn
                             >
                         </template>
                     </v-text-field>
                     <!-- Configure Submodel Repository URL -->
                     <v-text-field
+                        v-model="SubmodelRepoURL"
                         variant="outlined"
                         density="compact"
                         hide-details
                         class="my-3"
                         :class="isMobile ? '' : 'mr-3'"
                         label="Submodel Repository URL"
-                        v-model="SubmodelRepoURL"
-                        @keydown.native.enter="connectToEnvironment('Submodel')">
-                        <template v-slot:append-inner>
+                        @keydown.enter="connectToEnvironment('Submodel')">
+                        <template #append-inner>
                             <v-btn
                                 size="small"
                                 variant="elevated"
                                 color="primary"
                                 class="text-buttonText"
                                 style="right: -4px"
-                                @click.stop="connectToEnvironment('Submodel')"
                                 :loading="loadingSubmodelRepo"
+                                @click.stop="connectToEnvironment('Submodel')"
                                 >Connect</v-btn
                             >
                         </template>
                     </v-text-field>
                     <!-- Configure Concept Description Repository URL -->
                     <v-text-field
+                        v-model="ConceptDescriptionRepoURL"
                         variant="outlined"
                         density="compact"
                         hide-details
                         class="my-3"
                         :class="isMobile ? '' : 'mr-3'"
                         label="Concept Description Repository URL"
-                        v-model="ConceptDescriptionRepoURL"
-                        @keydown.native.enter="connectToEnvironment('ConceptDescription')">
-                        <template v-slot:append-inner>
+                        @keydown.enter="connectToEnvironment('ConceptDescription')">
+                        <template #append-inner>
                             <v-btn
                                 size="small"
                                 variant="elevated"
                                 color="primary"
                                 class="text-buttonText"
                                 style="right: -4px"
-                                @click.stop="connectToEnvironment('ConceptDescription')"
                                 :loading="loadingConceptDescriptionRepo"
+                                @click.stop="connectToEnvironment('ConceptDescription')"
                                 >Connect</v-btn
                             >
                         </template>
@@ -205,12 +205,12 @@
 <script lang="ts">
     import { defineComponent } from 'vue';
     import { useRoute } from 'vue-router';
-    import { useNavigationStore } from '@/store/NavigationStore';
-    import { useAASStore } from '@/store/AASDataStore';
-    import { useEnvStore } from '@/store/EnvironmentStore';
     import { useTheme } from 'vuetify';
-    import RequestHandling from '@/mixins/RequestHandling';
     import DashboardHandling from '@/mixins/DashboardHandling';
+    import RequestHandling from '@/mixins/RequestHandling';
+    import { useAASStore } from '@/store/AASDataStore';
+    import { useEnvStore } from '@/store/EnvironmentStore';
+    import { useNavigationStore } from '@/store/NavigationStore';
 
     export default defineComponent({
         name: 'MainMenu',
@@ -250,23 +250,6 @@
             };
         },
 
-        mounted() {
-            this.aasDiscoveryURL = this.aasDiscoveryServerURL;
-            this.aasRegistryURL = this.aasRegistryServerURL;
-            this.submodelRegistryURL = this.submodelRegistryServerURL;
-            this.AASRepoURL = this.aasRepoURL;
-            this.SubmodelRepoURL = this.submodelRepoURL;
-            this.ConceptDescriptionRepoURL = this.conceptDescriptionRepoURL;
-            this.isDashboardAvailable();
-        },
-
-        watch: {
-            // watch for route changes (name) and reset selected AAS and selected Node
-            currentRoute() {
-                this.aasStore.dispatchSelectedAAS({});
-            },
-        },
-
         computed: {
             // Check if the current Device is a Mobile Device
             isMobile() {
@@ -314,6 +297,23 @@
             },
         },
 
+        watch: {
+            // watch for route changes (name) and reset selected AAS and selected Node
+            currentRoute() {
+                this.aasStore.dispatchSelectedAAS({});
+            },
+        },
+
+        mounted() {
+            this.aasDiscoveryURL = this.aasDiscoveryServerURL;
+            this.aasRegistryURL = this.aasRegistryServerURL;
+            this.submodelRegistryURL = this.submodelRegistryServerURL;
+            this.AASRepoURL = this.aasRepoURL;
+            this.SubmodelRepoURL = this.submodelRepoURL;
+            this.ConceptDescriptionRepoURL = this.conceptDescriptionRepoURL;
+            this.isDashboardAvailable();
+        },
+
         methods: {
             // Function to connect to the AAS Discovery Service
             connectToAASDiscovery() {
diff --git a/aas-web-ui/src/components/AppNavigation/RegisterAAS.vue b/aas-web-ui/src/components/AppNavigation/RegisterAAS.vue
index fc7a3466..a947f600 100644
--- a/aas-web-ui/src/components/AppNavigation/RegisterAAS.vue
+++ b/aas-web-ui/src/components/AppNavigation/RegisterAAS.vue
@@ -2,7 +2,7 @@
     <v-btn variant="plain">
         <v-icon size="x-large">mdi-plus</v-icon>
         <v-tooltip activator="parent" open-delay="600" location="bottom">Add existing AAS to AAS Registry</v-tooltip>
-        <v-dialog activator="parent" v-model="RegisterAASDialog" width="600">
+        <v-dialog v-model="RegisterAASDialog" activator="parent" width="600">
             <v-card>
                 <v-card-title>
                     <span class="text-subtile-1">Add existing AAS to AAS Registry</span>
@@ -11,13 +11,13 @@
                 <v-card-text>
                     <!-- Endpoint Textfield of the AAS to be registered -->
                     <v-text-field
+                        v-model="aasEndpoint"
                         variant="outlined"
                         density="compact"
                         label="AAS Endpoint"
                         hint="E.g. http://localhost:4000/shells/<UTF8_BASE64_encoded_aasIdentification>"
                         persistent-hint
-                        clearable
-                        v-model="aasEndpoint"></v-text-field>
+                        clearable></v-text-field>
                 </v-card-text>
                 <v-divider></v-divider>
                 <v-card-actions>
@@ -30,8 +30,8 @@
                         class="text-buttonText"
                         variant="elevated"
                         color="primary"
-                        @click="addAAS()"
                         :loading="registrationLoading"
+                        @click="addAAS()"
                         >Add</v-btn
                     >
                 </v-card-actions>
@@ -44,25 +44,25 @@
                                 <v-row>
                                     <v-col cols="6">
                                         <v-text-field
+                                            v-model="aasIdentification"
                                             variant="outlined"
                                             density="compact"
                                             label="aasIdentification"
                                             clearable
-                                            v-model="aasIdentification"
                                             hide-details
                                             class="mb-2"
                                             @change="encodeIdentification()"></v-text-field>
                                     </v-col>
                                     <v-col cols="6">
                                         <v-text-field
+                                            v-model="EncodedAasIdentification"
                                             variant="outlined"
                                             density="compact"
                                             label="Encoded Identification"
-                                            v-model="EncodedAasIdentification"
                                             hide-details
                                             class="mb-2"
                                             readonly>
-                                            <template v-slot:append-inner>
+                                            <template #append-inner>
                                                 <v-btn
                                                     size="small"
                                                     variant="elevated"
@@ -87,9 +87,9 @@
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-    import { useNavigationStore } from '@/store/NavigationStore';
     import RequestHandling from '@/mixins/RequestHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
+    import { useNavigationStore } from '@/store/NavigationStore';
 
     export default defineComponent({
         name: 'RegisterAAS',
diff --git a/aas-web-ui/src/components/AppNavigation/Settings.vue b/aas-web-ui/src/components/AppNavigation/Settings.vue
index 5b096ab5..9c32222f 100644
--- a/aas-web-ui/src/components/AppNavigation/Settings.vue
+++ b/aas-web-ui/src/components/AppNavigation/Settings.vue
@@ -1,6 +1,6 @@
 <template>
     <v-menu :close-on-content-click="false" location="bottom">
-        <template v-slot:activator="{ props }">
+        <template #activator="{ props }">
             <v-btn v-bind="props" icon="mdi-cog" class="ml-3"></v-btn>
         </template>
         <v-card
@@ -18,7 +18,6 @@
 <script lang="ts">
     import { defineComponent } from 'vue';
     import { useNavigationStore } from '@/store/NavigationStore';
-
     import ThemeSwitch from './Settings/ThemeSwitch.vue';
 
     export default defineComponent({
diff --git a/aas-web-ui/src/components/AppNavigation/Settings/StatusSwitch.vue b/aas-web-ui/src/components/AppNavigation/Settings/StatusSwitch.vue
index 88026276..f711a2f4 100644
--- a/aas-web-ui/src/components/AppNavigation/Settings/StatusSwitch.vue
+++ b/aas-web-ui/src/components/AppNavigation/Settings/StatusSwitch.vue
@@ -1,11 +1,11 @@
 <template>
     <v-switch
-        @change="updateStatusCheck()"
         v-model="statusCheckStatus"
         color="primary"
         class="ml-2"
         hide-details
-        label="AAS Status Checks"></v-switch>
+        label="AAS Status Checks"
+        @change="updateStatusCheck()"></v-switch>
 </template>
 
 <script lang="ts">
@@ -29,10 +29,6 @@
             };
         },
 
-        mounted() {
-            this.statusCheckStatus = this.statusCheck;
-        },
-
         computed: {
             // get the status-check state from the store
             statusCheck() {
@@ -40,6 +36,10 @@
             },
         },
 
+        mounted() {
+            this.statusCheckStatus = this.statusCheck;
+        },
+
         methods: {
             // Function to toggle the status-check
             updateStatusCheck() {
diff --git a/aas-web-ui/src/components/AppNavigation/Settings/ThemeSwitch.vue b/aas-web-ui/src/components/AppNavigation/Settings/ThemeSwitch.vue
index 5fac0ce6..30754c97 100644
--- a/aas-web-ui/src/components/AppNavigation/Settings/ThemeSwitch.vue
+++ b/aas-web-ui/src/components/AppNavigation/Settings/ThemeSwitch.vue
@@ -5,15 +5,15 @@
         </v-list-item>
         <!-- Button toggle to switch theme -->
         <v-btn-toggle v-model="themeOption" color="primary" style="margin-top: -10px" variant="outlined" divided>
-            <v-btn @click="toggleTheme" value="system">
+            <v-btn value="system" @click="toggleTheme">
                 <span>System</span>
                 <v-icon class="ml-2">mdi-desktop-tower-monitor</v-icon>
             </v-btn>
-            <v-btn @click="toggleTheme" value="light">
+            <v-btn value="light" @click="toggleTheme">
                 <span>Light</span>
                 <v-icon class="ml-2">mdi-white-balance-sunny</v-icon>
             </v-btn>
-            <v-btn @click="toggleTheme" value="dark">
+            <v-btn value="dark" @click="toggleTheme">
                 <span>Dark</span>
                 <v-icon class="ml-2">mdi-weather-night</v-icon>
             </v-btn>
@@ -43,12 +43,6 @@
             };
         },
 
-        mounted() {
-            this.dark = this.isDark;
-            // get the theme preference from local storage
-            this.themeOption = localStorage.getItem('theme') || 'system';
-        },
-
         computed: {
             // Check if the current Theme is dark
             isDark() {
@@ -56,6 +50,12 @@
             },
         },
 
+        mounted() {
+            this.dark = this.isDark;
+            // get the theme preference from local storage
+            this.themeOption = localStorage.getItem('theme') || 'system';
+        },
+
         methods: {
             // Function to toggle between dark and light Theme
             toggleTheme() {
diff --git a/aas-web-ui/src/components/AppNavigation/UploadAAS.vue b/aas-web-ui/src/components/AppNavigation/UploadAAS.vue
index 8ec76149..8f3e28c8 100644
--- a/aas-web-ui/src/components/AppNavigation/UploadAAS.vue
+++ b/aas-web-ui/src/components/AppNavigation/UploadAAS.vue
@@ -4,7 +4,7 @@
         <v-tooltip activator="parent" open-delay="600" location="bottom" :disabled="isMobile"
             >Upload AAS File to Environment</v-tooltip
         >
-        <v-dialog activator="parent" v-model="uploadAASDialog" width="600">
+        <v-dialog v-model="uploadAASDialog" activator="parent" width="600">
             <v-card :loading="loadingUpload">
                 <v-card-title>
                     <span class="text-subtile-1">Upload AAS to Environment</span>
@@ -13,15 +13,15 @@
                 <v-card-text>
                     <!-- AAS File Input -->
                     <v-file-input
+                        v-model="aasFile"
                         variant="outlined"
                         density="compact"
                         :multiple="false"
-                        v-model="aasFile"
                         clearable
                         class="my-1 mt-3"
                         label="AAS File Upload"
                         :accept="['.aasx', '.xml', '.json']">
-                        <template v-slot:append-inner>
+                        <template #append-inner>
                             <v-btn
                                 size="small"
                                 variant="elevated"
@@ -41,9 +41,9 @@
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-    import { useNavigationStore } from '@/store/NavigationStore';
     import RequestHandling from '@/mixins/RequestHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
+    import { useNavigationStore } from '@/store/NavigationStore';
 
     export default defineComponent({
         name: 'UploadAAS',
diff --git a/aas-web-ui/src/components/ComponentVisualization.vue b/aas-web-ui/src/components/ComponentVisualization.vue
index 4c2d8cd9..478d255e 100644
--- a/aas-web-ui/src/components/ComponentVisualization.vue
+++ b/aas-web-ui/src/components/ComponentVisualization.vue
@@ -27,8 +27,8 @@
                 style="overflow-y: auto; height: calc(100svh - 170px)">
                 <!-- Add Plugins matched on SemanticId's inside the SubmodelEntrypoint -->
                 <SubmodelEntrypoint
-                    :submodelElementData="submodelElementData"
-                    :selectedNode="SelectedNodeToTransfer"></SubmodelEntrypoint>
+                    :submodel-element-data="submodelElementData"
+                    :selected-node="SelectedNodeToTransfer"></SubmodelEntrypoint>
             </v-card-text>
         </v-card>
     </v-container>
@@ -37,19 +37,15 @@
 <script lang="ts">
     import { defineComponent } from 'vue';
     import { useRoute, useRouter } from 'vue-router';
-    import { useNavigationStore } from '@/store/NavigationStore';
-    import { useAASStore } from '@/store/AASDataStore';
+    import SubmodelEntrypoint from '@/components/SubmodelPlugins/_SubmodelEntrypoint.vue';
     import RequestHandling from '@/mixins/RequestHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
-
-    import SubmodelEntrypoint from '@/components/SubmodelPlugins/_SubmodelEntrypoint.vue';
+    import { useAASStore } from '@/store/AASDataStore';
+    import { useNavigationStore } from '@/store/NavigationStore';
 
     export default defineComponent({
         name: 'ComponentVisualization',
         components: {
-            RequestHandling, // Mixin to handle the requests to the AAS
-            SubmodelElementHandling, // Mixin to handle the SubmodelElements
-
             SubmodelEntrypoint, // Submodel Plugin Entrypoint Component
         },
         mixins: [RequestHandling, SubmodelElementHandling],
@@ -75,24 +71,47 @@
             };
         },
 
-        mounted() {
-            if (Object.keys(this.SelectedNode).length > 0 && this.isMobile) {
-                // initialize if component got mounted on mobile devices (needed there because it is rendered in a separate view)
-                this.initializeView();
-            } else if (Object.keys(this.SelectedNode).length == 0 && this.route.path == '/componentvisualization') {
-                const searchParams = new URL(window.location.href).searchParams;
-                const aasEndpoint = searchParams.get('aas');
-                const path = searchParams.get('path');
+        computed: {
+            // get AAS Registry URL from Store
+            aasRegistryServerURL() {
+                return this.navigationStore.getAASRegistryURL;
+            },
 
-                // check if the aas Query and the path Query are set in the URL and if so initialize
-                if (aasEndpoint && path) {
-                    this.initializeViewWithRouteParams();
+            // get the Submodel Registry URL from Store
+            submodelRegistryServerURL() {
+                return this.navigationStore.getSubmodelRegistryURL;
+            },
+
+            // get selected AAS from Store
+            SelectedAAS() {
+                return this.aasStore.getSelectedAAS;
+            },
+
+            // Get the selected Treeview Node (SubmodelElement) from the store
+            SelectedNode() {
+                return this.aasStore.getSelectedNode;
+            },
+
+            // return the selected Node with the full path to the SubmodelElement
+            SelectedNodeToTransfer() {
+                let aas = { ...this.aasStore.getSelectedAAS };
+                let node = { ...this.aasStore.getSelectedNode };
+                if (aas && aas.endpoints && aas.endpoints[0] && aas.endpoints[0].protocolInformation.href) {
+                    node.pathFull = aas.endpoints[0].protocolInformation.href + '/' + node.path;
                 }
-            }
-        },
+                // console.log('SelectedNodeToTransfer: ', node);
+                return node;
+            },
 
-        beforeUnmount() {
-            clearInterval(this.requestInterval); // clear old interval
+            // Get the real-time object from the store
+            RealTimeObject() {
+                return this.aasStore.getRealTimeObject;
+            },
+
+            // Check if the current Device is a Mobile Device
+            isMobile() {
+                return this.navigationStore.getIsMobile;
+            },
         },
 
         watch: {
@@ -136,47 +155,24 @@
             },
         },
 
-        computed: {
-            // get AAS Registry URL from Store
-            aasRegistryServerURL() {
-                return this.navigationStore.getAASRegistryURL;
-            },
-
-            // get the Submodel Registry URL from Store
-            submodelRegistryServerURL() {
-                return this.navigationStore.getSubmodelRegistryURL;
-            },
-
-            // get selected AAS from Store
-            SelectedAAS() {
-                return this.aasStore.getSelectedAAS;
-            },
-
-            // Get the selected Treeview Node (SubmodelElement) from the store
-            SelectedNode() {
-                return this.aasStore.getSelectedNode;
-            },
+        mounted() {
+            if (Object.keys(this.SelectedNode).length > 0 && this.isMobile) {
+                // initialize if component got mounted on mobile devices (needed there because it is rendered in a separate view)
+                this.initializeView();
+            } else if (Object.keys(this.SelectedNode).length == 0 && this.route.path == '/componentvisualization') {
+                const searchParams = new URL(window.location.href).searchParams;
+                const aasEndpoint = searchParams.get('aas');
+                const path = searchParams.get('path');
 
-            // return the selected Node with the full path to the SubmodelElement
-            SelectedNodeToTransfer() {
-                let aas = { ...this.aasStore.getSelectedAAS };
-                let node = { ...this.aasStore.getSelectedNode };
-                if (aas && aas.endpoints && aas.endpoints[0] && aas.endpoints[0].protocolInformation.href) {
-                    node.pathFull = aas.endpoints[0].protocolInformation.href + '/' + node.path;
+                // check if the aas Query and the path Query are set in the URL and if so initialize
+                if (aasEndpoint && path) {
+                    this.initializeViewWithRouteParams();
                 }
-                // console.log('SelectedNodeToTransfer: ', node);
-                return node;
-            },
-
-            // Get the real-time object from the store
-            RealTimeObject() {
-                return this.aasStore.getRealTimeObject;
-            },
+            }
+        },
 
-            // Check if the current Device is a Mobile Device
-            isMobile() {
-                return this.navigationStore.getIsMobile;
-            },
+        beforeUnmount() {
+            clearInterval(this.requestInterval); // clear old interval
         },
 
         methods: {
diff --git a/aas-web-ui/src/components/Dashboard/Dashboard.vue b/aas-web-ui/src/components/Dashboard/Dashboard.vue
index 45db526a..e22d7464 100644
--- a/aas-web-ui/src/components/Dashboard/Dashboard.vue
+++ b/aas-web-ui/src/components/Dashboard/Dashboard.vue
@@ -7,13 +7,14 @@
                 <v-list>
                     <v-list-item
                         v-for="group in groups"
+                        :key="group.groupId"
                         rounded
                         class="mb-1"
                         variant="tonal"
                         @click="openDashboard(group)">
                         <v-list-item-title>{{ group.groupName }}</v-list-item-title>
                         <v-list-item-subtitle>Number of widgets: {{ group.elementCount }}</v-list-item-subtitle>
-                        <template v-slot:append>
+                        <template #append>
                             <v-btn
                                 icon="mdi-delete"
                                 density="compact"
@@ -28,7 +29,7 @@
         <!-- Dialog for deleting a group -->
         <v-dialog v-model="deleteDialog" width="550px">
             <v-card>
-                <v-form @submit.prevent v-model="form">
+                <v-form v-model="form" @submit.prevent>
                     <v-card-title>{{ 'Are you sure?' }}</v-card-title>
                     <v-divider></v-divider>
                     <v-card-text>
@@ -56,9 +57,9 @@
                             variant="flat"
                             class="text-buttonText"
                             color="error"
-                            @click="deleteGroupFromDashboard(groups, selectedGroup.groupId)"
                             type="submit"
                             :disabled="!form"
+                            @click="deleteGroupFromDashboard(groups, selectedGroup.groupId)"
                             >{{ 'delete' }}</v-btn
                         >
                     </v-card-actions>
@@ -72,14 +73,11 @@
     import { defineComponent } from 'vue';
     import { useRouter } from 'vue-router';
     import DashboardHandling from '@/mixins/DashboardHandling';
-    import { useNavigationStore } from '@/store/NavigationStore';
     import { useEnvStore } from '@/store/EnvironmentStore';
+    import { useNavigationStore } from '@/store/NavigationStore';
 
     export default defineComponent({
         name: 'DashboardGroups',
-        components: {
-            DashboardHandling,
-        },
         mixins: [DashboardHandling],
 
         setup() {
@@ -105,10 +103,6 @@
             };
         },
 
-        async mounted() {
-            this.groups = await this.getGroups();
-        },
-
         computed: {
             deleteRules() {
                 return [
@@ -118,6 +112,10 @@
             },
         },
 
+        async mounted() {
+            this.groups = await this.getGroups();
+        },
+
         methods: {
             openDashboard(group: any) {
                 // console.log('Group: ', group);
diff --git a/aas-web-ui/src/components/Dashboard/DashboardEditElement.vue b/aas-web-ui/src/components/Dashboard/DashboardEditElement.vue
index 8aeb8069..83609957 100644
--- a/aas-web-ui/src/components/Dashboard/DashboardEditElement.vue
+++ b/aas-web-ui/src/components/Dashboard/DashboardEditElement.vue
@@ -1,10 +1,10 @@
 <template>
-    <v-dialog max-width="700px" height="auto" v-model="editDialog">
+    <v-dialog v-model="editDialog" max-width="700px" height="auto">
         <!-- Edit Button -->
-        <template v-slot:activator="{ props: activatorProps }">
+        <template #activator="{ props: activatorProps }">
             <v-btn v-bind="activatorProps" icon="mdi-pencil" variant="plain" size="small"></v-btn>
         </template>
-        <template v-slot:default="{ isActive }">
+        <template #default="{ isActive }">
             <v-card>
                 <v-row align="center" class="py-2 px-3">
                     <v-col>
@@ -45,7 +45,7 @@
                         density="compact"
                         hide-details="auto"
                         @keyup.enter="createGroup($event.target.value)">
-                        <template v-slot:no-data>
+                        <template #no-data>
                             <v-list-item>
                                 <v-list-item-title>
                                     No group matching "<strong>{{ searchGroup }}</strong
@@ -63,10 +63,10 @@
                                 )
                             "
                             class="py-2"
-                            :submodelElementData="aasData"
-                            :configData="dashboardData"
-                            :editDialog="true"
-                            @newOptions="setNewOptions"></TimeSeriesData>
+                            :submodel-element-data="aasData"
+                            :config-data="dashboardData"
+                            :edit-dialog="true"
+                            @new-options="setNewOptions"></TimeSeriesData>
                     </template>
                 </v-card-text>
                 <v-divider></v-divider>
@@ -74,11 +74,11 @@
                     <v-btn text="Close" @click="isActive.value = false"></v-btn>
                     <v-spacer></v-spacer>
                     <v-btn
-                        @click="saveConfig()"
                         text="Save"
                         color="primary"
                         class="text-buttonText"
-                        variant="flat"></v-btn>
+                        variant="flat"
+                        @click="saveConfig()"></v-btn>
                 </v-card-actions>
             </v-card>
         </template>
@@ -86,16 +86,15 @@
 </template>
 <script lang="ts">
     import { defineComponent } from 'vue';
-    import { useEnvStore } from '@/store/EnvironmentStore';
+    import TimeSeriesData from '@/components/SubmodelPlugins/TimeSeriesData.vue';
     import DashboardHandling from '@/mixins/DashboardHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
-    import TimeSeriesData from '@/components/SubmodelPlugins/TimeSeriesData.vue';
+    import { useEnvStore } from '@/store/EnvironmentStore';
 
     export default defineComponent({
         name: 'DashboardEditElement',
         components: {
             TimeSeriesData,
-            DashboardHandling,
         },
         mixins: [SubmodelElementHandling, DashboardHandling],
         props: ['aasData', 'dashboardData'],
diff --git a/aas-web-ui/src/components/Dashboard/DashboardElement.vue b/aas-web-ui/src/components/Dashboard/DashboardElement.vue
index 8922362b..01f426ce 100644
--- a/aas-web-ui/src/components/Dashboard/DashboardElement.vue
+++ b/aas-web-ui/src/components/Dashboard/DashboardElement.vue
@@ -11,10 +11,10 @@
             <v-col cols="auto" density="compact" justify="end" class="py-0">
                 <!-- Edit Button -->
                 <DashboardEditElement
-                    :aasData="AASData"
-                    :dashboardData="localDashboardData"
-                    :chartData="newChartOptions"
-                    @updateElement="updateDashboardElement"></DashboardEditElement>
+                    :aas-data="AASData"
+                    :dashboard-data="localDashboardData"
+                    :chart-data="newChartOptions"
+                    @update-element="updateDashboardElement"></DashboardEditElement>
                 <!-- Sync Button -->
                 <v-btn v-if="isLinkedSegment" icon variant="plain" size="small" @click="changeSync()">
                     <span :class="syncStatus ? 'custom-loader' : ''">
@@ -23,21 +23,21 @@
                 </v-btn>
                 <!-- Visibility Button -->
                 <v-btn
-                    @click="updateVisibility()"
                     :icon="localDashboardData.visibility ? 'mdi-eye' : 'mdi-eye-off'"
                     variant="plain"
-                    size="small"></v-btn>
+                    size="small"
+                    @click="updateVisibility()"></v-btn>
                 <!-- Delete Button -->
-                <v-btn @click="deleteDialog = true" icon="mdi-delete" variant="plain" size="small"></v-btn>
+                <v-btn icon="mdi-delete" variant="plain" size="small" @click="deleteDialog = true"></v-btn>
             </v-col>
         </v-row>
         <template v-if="AASData && Object.keys(AASData).length > 0">
             <TimeSeriesData
                 v-if="checkSemanticId(localDashboardData.configObject, 'https://admin-shell.io/idta/TimeSeries/1/1')"
-                :submodelElementData="AASData"
-                :configData="localDashboardData"
-                :editDialog="false"
-                :loadTrigger="trigger"></TimeSeriesData>
+                :submodel-element-data="AASData"
+                :config-data="localDashboardData"
+                :edit-dialog="false"
+                :load-trigger="trigger"></TimeSeriesData>
         </template>
     </v-card>
     <!-- Dialog for deleting a dashboard element -->
@@ -62,17 +62,15 @@
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-    import { useEnvStore } from '@/store/EnvironmentStore';
+    import TimeSeriesData from '@/components/SubmodelPlugins/TimeSeriesData.vue';
     import DashboardHandling from '@/mixins/DashboardHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
-
-    import TimeSeriesData from '@/components/SubmodelPlugins/TimeSeriesData.vue';
+    import { useEnvStore } from '@/store/EnvironmentStore';
     import DashboardEditElement from './DashboardEditElement.vue';
 
     export default defineComponent({
         name: 'DashboardElement',
         components: {
-            DashboardHandling,
             TimeSeriesData,
             DashboardEditElement,
         },
@@ -101,17 +99,16 @@
             };
         },
 
-        mounted() {
-            // console.log('Dashboard Element Data from MongoDB: ', this.dashboardData);
-            this.localDashboardData = { ...this.dashboardData };
-            this.fetchAASData();
-        },
-
-        beforeUnmount() {
-            if (this.timeout) {
-                window.clearTimeout(this.timeout);
-                this.timeout = null;
-            }
+        computed: {
+            isLinkedSegment() {
+                if (
+                    this.localDashboardData.configObject?.segment?.semanticId?.keys?.[0]?.value ===
+                    'https://admin-shell.io/idta/TimeSeries/Segments/LinkedSegment/1/1'
+                ) {
+                    return true;
+                }
+                return false;
+            },
         },
 
         watch: {
@@ -130,16 +127,17 @@
             },
         },
 
-        computed: {
-            isLinkedSegment() {
-                if (
-                    this.localDashboardData.configObject?.segment?.semanticId?.keys?.[0]?.value ===
-                    'https://admin-shell.io/idta/TimeSeries/Segments/LinkedSegment/1/1'
-                ) {
-                    return true;
-                }
-                return false;
-            },
+        mounted() {
+            // console.log('Dashboard Element Data from MongoDB: ', this.dashboardData);
+            this.localDashboardData = { ...this.dashboardData };
+            this.fetchAASData();
+        },
+
+        beforeUnmount() {
+            if (this.timeout) {
+                window.clearTimeout(this.timeout);
+                this.timeout = null;
+            }
         },
 
         methods: {
diff --git a/aas-web-ui/src/components/Dashboard/DashboardGroup.vue b/aas-web-ui/src/components/Dashboard/DashboardGroup.vue
index 344abfa7..483ae31f 100644
--- a/aas-web-ui/src/components/Dashboard/DashboardGroup.vue
+++ b/aas-web-ui/src/components/Dashboard/DashboardGroup.vue
@@ -26,6 +26,8 @@
         </v-card>
         <v-row justify="start" class="mt-2 px-1">
             <v-col
+                v-for="dashboardElement in filteredElements"
+                :key="dashboardElement.id"
                 class="pa-2"
                 cols="12"
                 xs="12"
@@ -33,15 +35,13 @@
                 md="6"
                 lg="6"
                 xl="4"
-                xxl="3"
-                v-for="dashboardElement in filteredElements"
-                :key="dashboardElement.id">
+                xxl="3">
                 <!-- Single Dashboard Element -->
                 <DashboardElement
-                    :dashboardData="dashboardElement"
-                    :globalSyncStatus="syncStatus"
-                    @deleteElement="updateGroup"
-                    @updateElement="updateElementVisibility"></DashboardElement>
+                    :dashboard-data="dashboardElement"
+                    :global-sync-status="syncStatus"
+                    @delete-element="updateGroup"
+                    @update-element="updateElementVisibility"></DashboardElement>
             </v-col>
         </v-row>
     </v-container>
@@ -50,16 +50,14 @@
 <script lang="ts">
     import { defineComponent } from 'vue';
     import { useRoute, useRouter } from 'vue-router';
-    import { useEnvStore } from '@/store/EnvironmentStore';
     import DashboardHandling from '@/mixins/DashboardHandling';
-
+    import { useEnvStore } from '@/store/EnvironmentStore';
     import DashboardElement from './DashboardElement.vue';
 
     export default defineComponent({
         name: 'Dashboard',
         components: {
             DashboardElement,
-            DashboardHandling,
         },
         mixins: [DashboardHandling],
 
diff --git a/aas-web-ui/src/components/MainWindow.vue b/aas-web-ui/src/components/MainWindow.vue
index 12d1f065..53e981e9 100644
--- a/aas-web-ui/src/components/MainWindow.vue
+++ b/aas-web-ui/src/components/MainWindow.vue
@@ -34,8 +34,8 @@
     import { defineComponent } from 'vue';
     import { useAASStore } from '@/store/AASDataStore';
     import AASTreeview from './AASTreeview.vue';
-    import SubmodelElementView from './SubmodelElementView.vue';
     import ComponentVisualization from './ComponentVisualization.vue';
+    import SubmodelElementView from './SubmodelElementView.vue';
 
     export default defineComponent({
         name: 'MainWindow',
@@ -53,6 +53,13 @@
             };
         },
 
+        computed: {
+            // returns the primary color of the current theme
+            primaryColor() {
+                return this.$vuetify.theme.themes.light.colors.primary;
+            },
+        },
+
         mounted() {
             // get the HTML Elements of all Columns (Windows) in the MainWindow
             let windows = document.getElementsByClassName('window');
@@ -66,24 +73,17 @@
             // remove all Event Listeners from the Resize Bars
             let divs = document.getElementsByClassName('resizeBar');
             for (let i = 0; i < divs.length; i++) {
-                divs[i].removeEventListener('mouseover', function (e: any) {});
-                divs[i].removeEventListener('mouseout', function (e: any) {});
-                divs[i].removeEventListener('mousedown', function (e: any) {});
-                document.removeEventListener('mousemove', function (e: any) {});
-                document.removeEventListener('mouseup', function (e: any) {});
+                divs[i].removeEventListener('mouseover', function () {});
+                divs[i].removeEventListener('mouseout', function () {});
+                divs[i].removeEventListener('mousedown', function () {});
+                document.removeEventListener('mousemove', function () {});
+                document.removeEventListener('mouseup', function () {});
             }
             // clear the current AAS and Node
             this.aasStore.dispatchSelectedAAS({});
             this.aasStore.dispatchNode({});
         },
 
-        computed: {
-            // returns the primary color of the current theme
-            primaryColor() {
-                return this.$vuetify.theme.themes.light.colors.primary;
-            },
-        },
-
         methods: {
             // creates a div element (Resize Bar) on each Divider between Windows to allow the user to resize the windows
             resizableWindow(window: any) {
diff --git a/aas-web-ui/src/components/SubmodelElementView.vue b/aas-web-ui/src/components/SubmodelElementView.vue
index 955ba083..fb6bd6da 100644
--- a/aas-web-ui/src/components/SubmodelElementView.vue
+++ b/aas-web-ui/src/components/SubmodelElementView.vue
@@ -9,18 +9,18 @@
                     <v-list nav>
                         <!-- SubmodelELement Identification -->
                         <IdentificationElement
-                            :identificationObject="submodelElementData"
-                            :modelType="submodelElementData.modelType"
-                            :idType="'Identification (ID)'"
-                            :nameType="'idShort'"></IdentificationElement>
+                            :identification-object="submodelElementData"
+                            :model-type="submodelElementData.modelType"
+                            :id-type="'Identification (ID)'"
+                            :name-type="'idShort'"></IdentificationElement>
                         <v-divider
                             v-if="submodelElementData.displayName && submodelElementData.displayName.length > 0"
                             class="mt-2"></v-divider>
                         <!-- SubmodelELement DisplayName -->
                         <DisplayNameElement
                             v-if="submodelElementData.displayName && submodelElementData.displayName.length > 0"
-                            :displayNameObject="submodelElementData.displayName"
-                            :displayNameTitle="'DisplayName'"
+                            :display-name-object="submodelElementData.displayName"
+                            :display-name-title="'DisplayName'"
                             :small="false"></DisplayNameElement>
                         <v-divider
                             v-if="submodelElementData.description && submodelElementData.description.length > 0"
@@ -28,8 +28,8 @@
                         <!-- SubmodelELement Description -->
                         <DescriptionElement
                             v-if="submodelElementData.description && submodelElementData.description.length > 0"
-                            :descriptionObject="submodelElementData.description"
-                            :descriptionTitle="'Description'"
+                            :description-object="submodelElementData.description"
+                            :description-title="'Description'"
                             :small="false"></DescriptionElement>
                         <v-divider
                             v-if="
@@ -45,55 +45,55 @@
                                 submodelElementData.semanticId.keys &&
                                 submodelElementData.semanticId.keys.length > 0
                             "
-                            :semanticIdObject="submodelElementData.semanticId"
-                            :semanticTitle="'SemanticID'"></SemanticID>
+                            :semantic-id-object="submodelElementData.semanticId"
+                            :semantic-title="'SemanticID'"></SemanticID>
                     </v-list>
                     <v-divider></v-divider>
                     <v-list nav class="px-4 pt-0 pb-0">
                         <!-- SubmodelELement Representation for different modelTypes -->
                         <Submodel
                             v-if="submodelElementData.modelType === 'Submodel'"
-                            :submodelObject="submodelElementData"></Submodel>
+                            :submodel-object="submodelElementData"></Submodel>
                         <SubmodelElementCollection
                             v-else-if="submodelElementData.modelType === 'SubmodelElementCollection'"
-                            :submodelElementCollectionObject="submodelElementData"></SubmodelElementCollection>
+                            :submodel-element-collection-object="submodelElementData"></SubmodelElementCollection>
                         <SubmodelElementList
                             v-else-if="submodelElementData.modelType === 'SubmodelElementList'"
-                            :submodelElementListObject="submodelElementData"></SubmodelElementList>
+                            :submodel-element-list-object="submodelElementData"></SubmodelElementList>
                         <Property
                             v-else-if="submodelElementData.modelType === 'Property'"
-                            :propertyObject="submodelElementData"
-                            @updateValue="initializeView()"></Property>
+                            :property-object="submodelElementData"
+                            @update-value="initializeView()"></Property>
                         <MultiLanguageProperty
                             v-else-if="submodelElementData.modelType === 'MultiLanguageProperty'"
-                            :multiLanguagePropertyObject="submodelElementData"></MultiLanguageProperty>
+                            :multi-language-property-object="submodelElementData"></MultiLanguageProperty>
                         <Operation
                             v-else-if="submodelElementData.modelType === 'Operation'"
-                            :operationObject="submodelElementData"></Operation>
+                            :operation-object="submodelElementData"></Operation>
                         <File
                             v-else-if="submodelElementData.modelType === 'File'"
-                            :fileObject="submodelElementData"
-                            @updatePath="initializeView()"></File>
+                            :file-object="submodelElementData"
+                            @update-path="initializeView()"></File>
                         <Blob
                             v-else-if="submodelElementData.modelType === 'Blob'"
-                            :blobObject="submodelElementData"
-                            @updateBlob="initializeView"></Blob>
+                            :blob-object="submodelElementData"
+                            @update-blob="initializeView"></Blob>
                         <ReferenceElement
                             v-else-if="submodelElementData.modelType === 'ReferenceElement'"
-                            :referenceElementObject="submodelElementData"></ReferenceElement>
+                            :reference-element-object="submodelElementData"></ReferenceElement>
                         <Range
                             v-else-if="submodelElementData.modelType === 'Range'"
-                            :rangeObject="submodelElementData"></Range>
+                            :range-object="submodelElementData"></Range>
                         <Entity
                             v-else-if="submodelElementData.modelType === 'Entity'"
-                            :entityObject="submodelElementData"></Entity>
+                            :entity-object="submodelElementData"></Entity>
                         <RelationshipElement
                             v-else-if="submodelElementData.modelType === 'RelationshipElement'"
-                            :relationshipElementObject="submodelElementData"></RelationshipElement>
+                            :relationship-element-object="submodelElementData"></RelationshipElement>
                         <AnnotatedRelationshipElement
                             v-else-if="submodelElementData.modelType === 'AnnotatedRelationshipElement'"
-                            :annotatedRelationshipElementObject="submodelElementData"></AnnotatedRelationshipElement>
-                        <InvalidElement v-else :invalidElementObject="submodelElementData"></InvalidElement>
+                            :annotated-relationship-element-object="submodelElementData"></AnnotatedRelationshipElement>
+                        <InvalidElement v-else :invalid-element-object="submodelElementData"></InvalidElement>
                     </v-list>
                     <!-- ConceptDescriptions -->
                     <v-divider
@@ -103,15 +103,15 @@
                         "
                         class="mt-5"></v-divider>
                     <v-list
-                        nav
                         v-if="
                             submodelElementData.conceptDescriptions &&
                             submodelElementData.conceptDescriptions.length > 0
-                        ">
+                        "
+                        nav>
                         <v-list-item
                             v-for="(conceptDescription, index) in submodelElementData.conceptDescriptions"
                             :key="conceptDescription.id">
-                            <ConceptDescription :conceptDescriptionObject="conceptDescription"></ConceptDescription>
+                            <ConceptDescription :concept-description-object="conceptDescription"></ConceptDescription>
                             <v-divider
                                 v-if="index !== submodelElementData.conceptDescriptions.length - 1"
                                 class="mt-2"></v-divider>
@@ -141,39 +141,34 @@
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-    import { useNavigationStore } from '@/store/NavigationStore';
-    import { useAASStore } from '@/store/AASDataStore';
-    import { useEnvStore } from '@/store/EnvironmentStore';
-    import RequestHandling from '@/mixins/RequestHandling';
-    import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
-
-    import IdentificationElement from '@/components/UIComponents/IdentificationElement.vue';
-    import DisplayNameElement from '@/components/UIComponents/DisplayNameElement.vue';
-    import DescriptionElement from '@/components/UIComponents/DescriptionElement.vue';
-    import SemanticID from '@/components/UIComponents/SemanticID.vue';
-    import ConceptDescription from '@/components/UIComponents/ConceptDescription.vue';
-
-    import Submodel from '@/components/SubmodelElements/Submodel.vue';
-    import SubmodelElementCollection from '@/components/SubmodelElements/SubmodelElementCollection.vue';
-    import SubmodelElementList from '@/components/SubmodelElements/SubmodelElementList.vue';
-    import Property from '@/components/SubmodelElements/Property.vue';
+    import AnnotatedRelationshipElement from '@/components/SubmodelElements/AnnotatedRelationshipElement.vue';
+    import Blob from '@/components/SubmodelElements/Blob.vue';
+    import Entity from '@/components/SubmodelElements/Entity.vue';
+    import File from '@/components/SubmodelElements/File.vue';
+    import InvalidElement from '@/components/SubmodelElements/InvalidElement.vue';
     import MultiLanguageProperty from '@/components/SubmodelElements/MultiLanguageProperty.vue';
     import Operation from '@/components/SubmodelElements/Operation.vue';
-    import File from '@/components/SubmodelElements/File.vue';
-    import Blob from '@/components/SubmodelElements/Blob.vue';
-    import ReferenceElement from '@/components/SubmodelElements/ReferenceElement.vue';
+    import Property from '@/components/SubmodelElements/Property.vue';
     import Range from '@/components/SubmodelElements/Range.vue';
-    import Entity from '@/components/SubmodelElements/Entity.vue';
+    import ReferenceElement from '@/components/SubmodelElements/ReferenceElement.vue';
     import RelationshipElement from '@/components/SubmodelElements/RelationshipElement.vue';
-    import AnnotatedRelationshipElement from '@/components/SubmodelElements/AnnotatedRelationshipElement.vue';
-    import InvalidElement from '@/components/SubmodelElements/InvalidElement.vue';
+    import Submodel from '@/components/SubmodelElements/Submodel.vue';
+    import SubmodelElementCollection from '@/components/SubmodelElements/SubmodelElementCollection.vue';
+    import SubmodelElementList from '@/components/SubmodelElements/SubmodelElementList.vue';
+    import ConceptDescription from '@/components/UIComponents/ConceptDescription.vue';
+    import DescriptionElement from '@/components/UIComponents/DescriptionElement.vue';
+    import DisplayNameElement from '@/components/UIComponents/DisplayNameElement.vue';
+    import IdentificationElement from '@/components/UIComponents/IdentificationElement.vue';
+    import SemanticID from '@/components/UIComponents/SemanticID.vue';
+    import RequestHandling from '@/mixins/RequestHandling';
+    import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
+    import { useAASStore } from '@/store/AASDataStore';
+    import { useEnvStore } from '@/store/EnvironmentStore';
+    import { useNavigationStore } from '@/store/NavigationStore';
 
     export default defineComponent({
         name: 'SubmodelElementView',
         components: {
-            RequestHandling, // Mixin to handle the requests to the AAS
-            SubmodelElementHandling, // Mixin to handle the SubmodelElements
-
             IdentificationElement,
             DisplayNameElement,
             DescriptionElement,
@@ -217,21 +212,36 @@
             };
         },
 
-        mounted() {
-            if (this.autoSync.state) {
-                // create new interval
-                this.requestInterval = setInterval(() => {
-                    if (Object.keys(this.SelectedNode).length > 0) {
-                        this.initializeView();
-                    }
-                }, this.autoSync.interval);
-            } else {
-                this.initializeView(true);
-            }
-        },
+        computed: {
+            // get AAS Registry URL from Store
+            aasRegistryServerURL() {
+                return this.navigationStore.getAASRegistryURL;
+            },
 
-        beforeUnmount() {
-            clearInterval(this.requestInterval); // clear old interval
+            // get the Submodel Registry URL from Store
+            submodelRegistryServerURL() {
+                return this.navigationStore.getSubmodelRegistryURL;
+            },
+
+            // get selected AAS from Store
+            SelectedAAS() {
+                return this.aasStore.getSelectedAAS;
+            },
+
+            // Get the selected Treeview Node (SubmodelElement) from the store
+            SelectedNode() {
+                return this.aasStore.getSelectedNode;
+            },
+
+            // Get the auto-sync state from the store
+            autoSync() {
+                return this.navigationStore.getAutoSync;
+            },
+
+            // Get the Concept Description Repository URL from the Store
+            conceptDescriptionRepoURL() {
+                return this.navigationStore.getConceptDescriptionRepoURL;
+            },
         },
 
         watch: {
@@ -289,36 +299,21 @@
             },
         },
 
-        computed: {
-            // get AAS Registry URL from Store
-            aasRegistryServerURL() {
-                return this.navigationStore.getAASRegistryURL;
-            },
-
-            // get the Submodel Registry URL from Store
-            submodelRegistryServerURL() {
-                return this.navigationStore.getSubmodelRegistryURL;
-            },
-
-            // get selected AAS from Store
-            SelectedAAS() {
-                return this.aasStore.getSelectedAAS;
-            },
-
-            // Get the selected Treeview Node (SubmodelElement) from the store
-            SelectedNode() {
-                return this.aasStore.getSelectedNode;
-            },
-
-            // Get the auto-sync state from the store
-            autoSync() {
-                return this.navigationStore.getAutoSync;
-            },
+        mounted() {
+            if (this.autoSync.state) {
+                // create new interval
+                this.requestInterval = setInterval(() => {
+                    if (Object.keys(this.SelectedNode).length > 0) {
+                        this.initializeView();
+                    }
+                }, this.autoSync.interval);
+            } else {
+                this.initializeView(true);
+            }
+        },
 
-            // Get the Concept Description Repository URL from the Store
-            conceptDescriptionRepoURL() {
-                return this.navigationStore.getConceptDescriptionRepoURL;
-            },
+        beforeUnmount() {
+            clearInterval(this.requestInterval); // clear old interval
         },
 
         methods: {
diff --git a/aas-web-ui/src/components/SubmodelElements/AnnotatedRelationshipElement.vue b/aas-web-ui/src/components/SubmodelElements/AnnotatedRelationshipElement.vue
index 5963774d..a254498f 100644
--- a/aas-web-ui/src/components/SubmodelElements/AnnotatedRelationshipElement.vue
+++ b/aas-web-ui/src/components/SubmodelElements/AnnotatedRelationshipElement.vue
@@ -1,6 +1,6 @@
 <template>
     <v-container fluid class="pa-0">
-        <RelationshipElement :relationshipElementObject="annotatedRelationshipElementObject"></RelationshipElement>
+        <RelationshipElement :relationship-element-object="annotatedRelationshipElementObject"></RelationshipElement>
         <!-- Annotations -->
         <v-list-item class="px-1 pb-1 pt-0">
             <v-list-item-title class="text-subtitle-2 mt-2">{{ 'Annotations: ' }}</v-list-item-title>
@@ -16,7 +16,7 @@
                 :is="SubmodelElementWrapper"
                 v-if="SubmodelElementWrapper"
                 :SubmodelElementObject="SubmodelElement"
-                :cardStyle="'outlined'"></component>
+                :card-style="'outlined'"></component>
         </div>
     </v-container>
 </template>
diff --git a/aas-web-ui/src/components/SubmodelElements/Blob.vue b/aas-web-ui/src/components/SubmodelElements/Blob.vue
index e2b62a9b..9b067ef8 100644
--- a/aas-web-ui/src/components/SubmodelElements/Blob.vue
+++ b/aas-web-ui/src/components/SubmodelElements/Blob.vue
@@ -3,7 +3,7 @@
         <v-list-item class="px-1 pb-1 pt-0">
             <v-list-item-title class="text-subtitle-2 mt-2">{{ 'Path: ' }}</v-list-item-title>
         </v-list-item>
-        <v-card color="elevatedCard" v-if="blobObject">
+        <v-card v-if="blobObject" color="elevatedCard">
             <!-- Path (Value) of the File Element -->
             <v-list nav class="bg-elevatedCard pt-0">
                 <v-list-item class="pb-0">
@@ -15,7 +15,7 @@
                         }}</v-chip>
                     </v-list-item-title>
                     <!-- Donwload File Button -->
-                    <template v-slot:append>
+                    <template #append>
                         <v-btn
                             v-if="blobObject.value && blobObject.contentType"
                             size="small"
@@ -30,18 +30,18 @@
                 <v-list-item class="pt-0">
                     <v-list-item-title>
                         <v-textarea
+                            v-model="truncatetBlobValue"
                             variant="outlined"
                             density="compact"
                             :hide-details="isTruncated ? false : true"
                             clearable
-                            @keydown.native.enter="updateBlob()"
-                            v-model="truncatetBlobValue"
-                            @click:clear="clearBlob()"
-                            @update:focused="setFocus"
                             :hint="isTruncated ? 'Blob string is truncated!' : ''"
-                            persistent-hint>
+                            persistent-hint
+                            @keydown.enter="updateBlob()"
+                            @click:clear="clearBlob()"
+                            @update:focused="setFocus">
                             <!-- Update Blob Button -->
-                            <template v-slot:append-inner="{ isFocused }">
+                            <template #append-inner="{ isFocused }">
                                 <v-btn
                                     v-if="isFocused"
                                     size="small"
@@ -61,17 +61,17 @@
             <!-- Action Button to upload a File as Blob -->
             <v-list nav class="bg-elevatedCard pa-0">
                 <v-list-item>
-                    <template v-slot:title>
+                    <template #title>
                         <!-- Upload-Button -->
                         <v-file-input
+                            v-model="newFile"
                             variant="outlined"
                             density="compact"
                             :multiple="false"
-                            v-model="newFile"
                             clearable
                             hide-details
                             class="my-1">
-                            <template v-slot:append-inner>
+                            <template #append-inner>
                                 <v-btn
                                     size="small"
                                     variant="elevated"
@@ -92,14 +92,11 @@
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-    import { useAASStore } from '@/store/AASDataStore';
     import RequestHandling from '@/mixins/RequestHandling';
+    import { useAASStore } from '@/store/AASDataStore';
 
     export default defineComponent({
         name: 'Blob',
-        components: {
-            RequestHandling, // Mixin to handle the requests to the AAS
-        },
         mixins: [RequestHandling],
         props: ['blobObject'],
 
@@ -122,15 +119,16 @@
             };
         },
 
-        mounted() {
-            this.newBlobValue = this.blobObject.value;
-            if (this.blobObject.value.length > this.maxLength) {
-                this.truncatetBlobValue = this.blobObject.value.substring(0, this.maxLength);
-                this.isTruncated = true;
-            } else {
-                this.truncatetBlobValue = this.blobObject.value;
-                this.isTruncated = false;
-            }
+        computed: {
+            // get selected AAS from Store
+            SelectedAAS() {
+                return this.aasStore.getSelectedAAS;
+            },
+
+            // Get the selected Treeview Node (SubmodelElement) from the store
+            SelectedNode() {
+                return this.aasStore.getSelectedNode;
+            },
         },
 
         watch: {
@@ -161,16 +159,15 @@
             },
         },
 
-        computed: {
-            // get selected AAS from Store
-            SelectedAAS() {
-                return this.aasStore.getSelectedAAS;
-            },
-
-            // Get the selected Treeview Node (SubmodelElement) from the store
-            SelectedNode() {
-                return this.aasStore.getSelectedNode;
-            },
+        mounted() {
+            this.newBlobValue = this.blobObject.value;
+            if (this.blobObject.value.length > this.maxLength) {
+                this.truncatetBlobValue = this.blobObject.value.substring(0, this.maxLength);
+                this.isTruncated = true;
+            } else {
+                this.truncatetBlobValue = this.blobObject.value;
+                this.isTruncated = false;
+            }
         },
 
         methods: {
diff --git a/aas-web-ui/src/components/SubmodelElements/Entity.vue b/aas-web-ui/src/components/SubmodelElements/Entity.vue
index 5e0de89f..287522fd 100644
--- a/aas-web-ui/src/components/SubmodelElements/Entity.vue
+++ b/aas-web-ui/src/components/SubmodelElements/Entity.vue
@@ -12,18 +12,18 @@
         <v-divider v-if="entityObject.globalAssetId"></v-divider>
         <!-- globalAssetId -->
         <v-list-item v-if="entityObject.globalAssetId" class="px-1 pb-1 py-2 mb-3">
-            <template v-slot:title>
-                <div v-html="'Global Asset ID: '" class="text-subtitle-2 mt-2"></div>
+            <template #title>
+                <div class="text-subtitle-2 mt-2" v-html="'Global Asset ID: '"></div>
             </template>
-            <template v-slot:subtitle>
+            <template #subtitle>
                 <div class="pt-2">
                     <v-btn
                         size="small"
                         class="mr-2 text-buttonText"
                         color="primary"
                         :disabled="isDisabled(entityObject.globalAssetId)"
-                        @click="jump(entityObject.globalAssetId)"
                         :loading="isLoading(entityObject.globalAssetId)"
+                        @click="jump(entityObject.globalAssetId)"
                         >Jump</v-btn
                     >
                     <span v-html="entityObject.globalAssetId"></span>
@@ -35,18 +35,18 @@
         <v-list-item
             v-if="entityObject.specificAssetIds && entityObject.specificAssetIds.length > 0"
             class="px-1 pb-1 py-2 mb-3">
-            <template v-slot:title>
-                <div v-html="'Specific Asset IDs: '" class="text-subtitle-2 mt-2"></div>
+            <template #title>
+                <div class="text-subtitle-2 mt-2" v-html="'Specific Asset IDs: '"></div>
             </template>
-            <template v-slot:subtitle>
+            <template #subtitle>
                 <div v-for="specificAssetId in entityObject.specificAssetIds" :key="specificAssetId.name" class="pt-2">
                     <v-btn
                         size="small"
                         class="mr-2 text-buttonText"
                         color="primary"
                         :disabled="isDisabled(specificAssetId.value)"
-                        @click="jump(specificAssetId.value)"
                         :loading="isLoading(specificAssetId.value)"
+                        @click="jump(specificAssetId.value)"
                         >Jump</v-btn
                     >
                     <v-chip label size="x-small" border color="primary" class="mr-2" style="margin-top: -3px">{{
@@ -58,19 +58,18 @@
         </v-list-item>
         <!-- Group of contained SubmodelElements -->
         <SubmodelElementGroup
-            :smeObject="entityObject"
-            :smeLocator="'statements'"
-            :topMargin="'mt-1'"></SubmodelElementGroup>
+            :sme-object="entityObject"
+            :sme-locator="'statements'"
+            :top-margin="'mt-1'"></SubmodelElementGroup>
     </v-container>
 </template>
 
 <script lang="ts">
     import { defineComponent } from 'vue';
     import { useRouter } from 'vue-router';
-    import { useAASStore } from '@/store/AASDataStore';
-    import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
-
     import SubmodelElementGroup from '@/components/UIComponents/SubmodelElementGroup.vue';
+    import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
+    import { useAASStore } from '@/store/AASDataStore';
 
     export default defineComponent({
         name: 'Entity',
diff --git a/aas-web-ui/src/components/SubmodelElements/File.vue b/aas-web-ui/src/components/SubmodelElements/File.vue
index 9f41ae96..300812d0 100644
--- a/aas-web-ui/src/components/SubmodelElements/File.vue
+++ b/aas-web-ui/src/components/SubmodelElements/File.vue
@@ -3,7 +3,7 @@
         <v-list-item class="px-1 pb-1 pt-0">
             <v-list-item-title class="text-subtitle-2 mt-2">{{ 'Path: ' }}</v-list-item-title>
         </v-list-item>
-        <v-card color="elevatedCard" v-if="fileObject">
+        <v-card v-if="fileObject" color="elevatedCard">
             <!-- Path (Value) of the File Element -->
             <v-list nav class="bg-elevatedCard pt-0">
                 <v-list-item class="pb-0">
@@ -15,7 +15,7 @@
                         }}</v-chip>
                     </v-list-item-title>
                     <!-- Donwload File Button -->
-                    <template v-slot:append>
+                    <template #append>
                         <v-btn
                             v-if="fileObject.value"
                             size="small"
@@ -31,16 +31,16 @@
                 <v-list-item class="pt-0">
                     <v-list-item-title>
                         <v-text-field
+                            v-model="newPathValue"
                             variant="outlined"
                             density="compact"
                             hide-details
                             clearable
-                            @keydown.native.enter="updatePath()"
-                            v-model="newPathValue"
+                            @keydown.enter="updatePath()"
                             @click:clear="clearPath()"
                             @update:focused="setFocus">
                             <!-- Update Path Button -->
-                            <template v-slot:append-inner="{ isFocused }">
+                            <template #append-inner="{ isFocused }">
                                 <v-btn
                                     v-if="isFocused"
                                     size="small"
@@ -71,17 +71,17 @@
             <!-- Action Button to upload a File -->
             <v-list nav class="bg-elevatedCard pa-0">
                 <v-list-item>
-                    <template v-slot:title>
+                    <template #title>
                         <!-- Upload-Button -->
                         <v-file-input
+                            v-model="newFile"
                             variant="outlined"
                             density="compact"
                             :multiple="false"
-                            v-model="newFile"
                             clearable
                             hide-details
                             class="my-1">
-                            <template v-slot:append-inner>
+                            <template #append-inner>
                                 <v-btn
                                     size="small"
                                     variant="elevated"
@@ -102,15 +102,12 @@
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-    import { useAASStore } from '@/store/AASDataStore';
     import RequestHandling from '@/mixins/RequestHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
+    import { useAASStore } from '@/store/AASDataStore';
 
     export default defineComponent({
         name: 'File',
-        components: {
-            RequestHandling, // Mixin to handle the requests to the AAS
-        },
         mixins: [RequestHandling, SubmodelElementHandling],
         props: ['fileObject'],
 
@@ -131,9 +128,16 @@
             };
         },
 
-        mounted() {
-            this.newPathValue = this.fileObject.value;
-            this.localPathValue = this.getLocalPath(this.fileObject.value, this.SelectedNode);
+        computed: {
+            // get selected AAS from Store
+            SelectedAAS() {
+                return this.aasStore.getSelectedAAS;
+            },
+
+            // Get the selected Treeview Node (SubmodelElement) from the store
+            SelectedNode() {
+                return this.aasStore.getSelectedNode;
+            },
         },
 
         watch: {
@@ -158,16 +162,9 @@
             },
         },
 
-        computed: {
-            // get selected AAS from Store
-            SelectedAAS() {
-                return this.aasStore.getSelectedAAS;
-            },
-
-            // Get the selected Treeview Node (SubmodelElement) from the store
-            SelectedNode() {
-                return this.aasStore.getSelectedNode;
-            },
+        mounted() {
+            this.newPathValue = this.fileObject.value;
+            this.localPathValue = this.getLocalPath(this.fileObject.value, this.SelectedNode);
         },
 
         methods: {
diff --git a/aas-web-ui/src/components/SubmodelElements/InvalidElement.vue b/aas-web-ui/src/components/SubmodelElements/InvalidElement.vue
index 17f9e26f..3cdbe21c 100644
--- a/aas-web-ui/src/components/SubmodelElements/InvalidElement.vue
+++ b/aas-web-ui/src/components/SubmodelElements/InvalidElement.vue
@@ -1,6 +1,6 @@
 <template>
     <v-container fluid class="pa-0">
-        <v-card color="elevatedCard" v-if="invalidElementObject" class="mt-4">
+        <v-card v-if="invalidElementObject" color="elevatedCard" class="mt-4">
             <v-list nav class="pt-0" :class="IsOperationVariable ? '' : 'bg-elevatedCard'">
                 <!-- Alert when SubmodelElement is invalid -->
                 <v-list-item v-if="!IsOperationVariable">
@@ -22,11 +22,11 @@
                     </v-card>
                     <v-card v-else class="pa-0 ma-0">
                         <v-textarea
+                            v-model="jsonString"
                             variant="outlined"
                             hide-details
                             density="compact"
                             :rows="8"
-                            v-model="jsonString"
                             @update:focused="setFocus($event)"></v-textarea>
                     </v-card>
                 </v-list-item>
@@ -36,10 +36,10 @@
                     <v-list-item-subtitle class="pt-2">{{
                         'The selected SubmodelElement is either non existend or not yet implemented.'
                     }}</v-list-item-subtitle>
-                    <template v-slot:append>
+                    <template #append>
                         <!-- Tooltip showing all available SubmodelElements -->
                         <v-tooltip open-delay="600" transition="slide-x-transition">
-                            <template v-slot:activator="{ props }">
+                            <template #activator="{ props }">
                                 <v-icon v-bind="props">mdi-information-outline</v-icon>
                             </template>
                             <div>
@@ -90,13 +90,6 @@
             };
         },
 
-        mounted() {
-            // check if isOperationVariable is not undefined
-            if (this.isOperationVariable) {
-                this.jsonString = JSON.stringify(this.invalidElementObject, null, 2);
-            }
-        },
-
         computed: {
             // Check if the Property is an Operation Variable
             IsOperationVariable() {
@@ -119,6 +112,13 @@
             },
         },
 
+        mounted() {
+            // check if isOperationVariable is not undefined
+            if (this.isOperationVariable) {
+                this.jsonString = JSON.stringify(this.invalidElementObject, null, 2);
+            }
+        },
+
         methods: {
             // Function to update the value of the SubmodelElement
             updateValue() {
diff --git a/aas-web-ui/src/components/SubmodelElements/MultiLanguageProperty.vue b/aas-web-ui/src/components/SubmodelElements/MultiLanguageProperty.vue
index 559af6a6..5305900a 100644
--- a/aas-web-ui/src/components/SubmodelElements/MultiLanguageProperty.vue
+++ b/aas-web-ui/src/components/SubmodelElements/MultiLanguageProperty.vue
@@ -1,11 +1,11 @@
 <template>
     <v-container fluid class="pa-0">
-        <v-card color="elevatedCard" v-if="multiLanguagePropertyObject" class="mt-4">
+        <v-card v-if="multiLanguagePropertyObject" color="elevatedCard" class="mt-4">
             <!-- Value(s) of the MultiLanguageProperty -->
             <v-list
+                v-if="multiLanguagePropertyObject.value && multiLanguagePropertyObject.value.length > 0"
                 nav
-                class="bg-elevatedCard pt-0"
-                v-if="multiLanguagePropertyObject.value && multiLanguagePropertyObject.value.length > 0">
+                class="bg-elevatedCard pt-0">
                 <v-list-item v-for="(value, i) in mlpValue" :key="i">
                     <v-list-item-title class="pt-2">
                         <!-- Input Field containing the Variable Value -->
@@ -18,8 +18,8 @@
                             append-icon="mdi-delete"
                             @click:append="removeEntry(i)"
                             @update:focused="setFocus($event, value)"
-                            @keydown.native.enter="updateValue()">
-                            <template v-slot:prepend-inner>
+                            @keydown.enter="updateValue()">
+                            <template #prepend-inner>
                                 <!-- language -->
                                 <v-chip label size="x-small" border>
                                     <span>{{ value.language ? value.language : 'no-lang' }}</span>
@@ -38,7 +38,7 @@
                                 </v-chip>
                             </template>
                             <!-- Update Value Button -->
-                            <template v-slot:append-inner>
+                            <template #append-inner>
                                 <v-btn
                                     v-if="value.isFocused"
                                     size="small"
@@ -55,7 +55,7 @@
                 </v-list-item>
             </v-list>
             <!-- Warning when MultiLanguageProperty has no value(s) -->
-            <v-list nav class="bg-elevatedCard pt-0" v-else>
+            <v-list v-else nav class="bg-elevatedCard pt-0">
                 <v-list-item>
                     <v-list-item-title class="pt-2">
                         <v-alert
@@ -70,7 +70,7 @@
             <!-- Edit the MultiLanguageProperty -->
             <v-list nav class="bg-elevatedCard py-0">
                 <v-list-item>
-                    <template v-slot:append>
+                    <template #append>
                         <v-btn
                             color="primary"
                             size="small"
@@ -89,14 +89,11 @@
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-    import { useAASStore } from '@/store/AASDataStore';
     import RequestHandling from '@/mixins/RequestHandling';
+    import { useAASStore } from '@/store/AASDataStore';
 
     export default defineComponent({
         name: 'MultiLanguageProperty',
-        components: {
-            RequestHandling, // Mixin to handle the requests to the AAS
-        },
         mixins: [RequestHandling],
         props: ['multiLanguagePropertyObject'],
 
@@ -110,6 +107,7 @@
 
         data() {
             return {
+                localMultiLanguagePropertyObject: {} as any,
                 mlpValue: {} as any,
                 languages: [
                     { id: 1, text: 'Deutsch', short: 'de' },
@@ -123,8 +121,16 @@
             };
         },
 
-        mounted() {
-            this.mlpValue = this.multiLanguagePropertyObject.value;
+        computed: {
+            // get selected AAS from Store
+            SelectedAAS() {
+                return this.aasStore.getSelectedAAS;
+            },
+
+            // Get the selected Treeview Node (SubmodelElement) from the store
+            SelectedNode() {
+                return this.aasStore.getSelectedNode;
+            },
         },
 
         watch: {
@@ -145,16 +151,9 @@
             },
         },
 
-        computed: {
-            // get selected AAS from Store
-            SelectedAAS() {
-                return this.aasStore.getSelectedAAS;
-            },
-
-            // Get the selected Treeview Node (SubmodelElement) from the store
-            SelectedNode() {
-                return this.aasStore.getSelectedNode;
-            },
+        mounted() {
+            this.localMultiLanguagePropertyObject = this.multiLanguagePropertyObject;
+            this.mlpValue = this.multiLanguagePropertyObject.value;
         },
 
         methods: {
@@ -162,7 +161,7 @@
             removeEntry(position: number) {
                 // console.log('removeEntry: ', value);
                 this.mlpValue.splice(position, 1);
-                this.multiLanguagePropertyObject.value = this.mlpValue;
+                this.localMultiLanguagePropertyObject.value = this.mlpValue;
                 this.updateMLP();
             },
 
@@ -172,7 +171,7 @@
                     language: '',
                     text: '',
                 });
-                this.multiLanguagePropertyObject.value = this.mlpValue;
+                this.localMultiLanguagePropertyObject.value = this.mlpValue;
                 // console.log('addEntry: ', this.multiLanguagePropertyObject)
                 this.updateMLP();
             },
@@ -188,24 +187,24 @@
             updateValue() {
                 // console.log('updateValue: ', this.mlpValue);
                 if (document.activeElement) (document.activeElement as HTMLElement).blur(); // remove focus from input field
-                this.multiLanguagePropertyObject.value = this.mlpValue;
+                this.localMultiLanguagePropertyObject.value = this.mlpValue;
                 this.updateMLP();
             },
 
             // Function to update the value of the property
             updateMLP() {
                 // console.log("Update Value: ", this.multiLanguagePropertyObject);
-                let path = this.multiLanguagePropertyObject.path + '/$value';
+                let path = this.localMultiLanguagePropertyObject.path + '/$value';
                 let content = JSON.stringify(
-                    this.multiLanguagePropertyObject.value.map((item: any) => ({ [item.language]: item.text }))
+                    this.localMultiLanguagePropertyObject.value.map((item: any) => ({ [item.language]: item.text }))
                 );
                 let headers = new Headers();
                 headers.append('Content-Type', 'application/json');
                 let context =
                     'updating ' +
-                    this.multiLanguagePropertyObject.modelType +
+                    this.localMultiLanguagePropertyObject.modelType +
                     ' "' +
-                    this.multiLanguagePropertyObject.idShort +
+                    this.localMultiLanguagePropertyObject.idShort +
                     '"';
                 let disableMessage = false;
                 // Send Request to update the value of the property
diff --git a/aas-web-ui/src/components/SubmodelElements/Operation.vue b/aas-web-ui/src/components/SubmodelElements/Operation.vue
index 4c7397c7..aa96e132 100644
--- a/aas-web-ui/src/components/SubmodelElements/Operation.vue
+++ b/aas-web-ui/src/components/SubmodelElements/Operation.vue
@@ -1,17 +1,17 @@
 <template>
     <v-container fluid class="pa-0">
-        <v-card color="elevatedCard" v-if="operationObject" class="mt-4">
+        <v-card v-if="operationObject" color="elevatedCard" class="mt-4">
             <!-- Operation with Variable(s) -->
             <v-list
-                nav
-                class="bg-elevatedCard py-0"
                 v-if="
                     operationObject.inputVariables.length > 0 ||
                     operationObject.inoutputVariables.length > 0 ||
                     operationObject.outputVariables.length > 0
-                ">
+                "
+                nav
+                class="bg-elevatedCard py-0">
                 <!-- List with the Variable Types -->
-                <v-container class="ma-0 pa-0" fluid v-for="variableType in variableTypes" :key="variableType.id">
+                <v-container v-for="variableType in variableTypes" :key="variableType.id" class="ma-0 pa-0" fluid>
                     <template
                         v-if="operationObject[variableType.type] && operationObject[variableType.type].length > 0">
                         <!-- Title of the Variable Type -->
@@ -25,8 +25,8 @@
                             <!-- Variable Description -->
                             <DescriptionElement
                                 v-if="variable.value && variable.value.description"
-                                :descriptionObject="variable.value.description"
-                                :descriptionTitle="'Description'"
+                                :description-object="variable.value.description"
+                                :description-title="'Description'"
                                 :small="true"></DescriptionElement>
                             <v-divider v-if="variable.value && variable.value.description" class="mt-1"></v-divider>
                             <!-- Variable Value -->
@@ -36,24 +36,26 @@
                                     <!-- Value Representation depending on the ModelType -->
                                     <Property
                                         v-if="variable.value.modelType === 'Property'"
-                                        :propertyObject="variable.value"
-                                        :isOperationVariable="true"
-                                        :variableType="variableType.type"
-                                        @updateValue="updateOperationVariable($event, variable.value)"></Property>
+                                        :property-object="variable.value"
+                                        :is-operation-variable="true"
+                                        :variable-type="variableType.type"
+                                        @update-value="updateOperationVariable($event, variable.value)"></Property>
                                     <ReferenceElement
                                         v-else-if="variable.value.modelType === 'ReferenceElement'"
-                                        :referenceElementObject="variable.value"
-                                        :isOperationVariable="true"
-                                        :variableType="variableType.type"
-                                        @updateValue="
+                                        :reference-element-object="variable.value"
+                                        :is-operation-variable="true"
+                                        :variable-type="variableType.type"
+                                        @update-value="
                                             updateOperationVariable($event, variable.value)
                                         "></ReferenceElement>
                                     <InvalidElement
                                         v-else
-                                        :invalidElementObject="variable.value"
-                                        :isOperationVariable="true"
-                                        :variableType="variableType.type"
-                                        @updateValue="updateOperationVariable($event, variable.value)"></InvalidElement>
+                                        :invalid-element-object="variable.value"
+                                        :is-operation-variable="true"
+                                        :variable-type="variableType.type"
+                                        @update-value="
+                                            updateOperationVariable($event, variable.value)
+                                        "></InvalidElement>
                                 </v-list-item-title>
                             </v-list-item>
                         </v-card>
@@ -61,7 +63,7 @@
                 </v-container>
             </v-list>
             <!-- Warning when Operation has no variable(s) -->
-            <v-list nav class="bg-elevatedCard pt-0" v-else>
+            <v-list v-else nav class="bg-elevatedCard pt-0">
                 <v-list-item>
                     <v-list-item-title class="pt-2">
                         <v-alert
@@ -76,18 +78,18 @@
             <!-- Action Buttons for the Operation -->
             <v-list nav class="bg-elevatedCard pa-0">
                 <v-list-item>
-                    <template v-slot:append>
+                    <template #append>
                         <!-- Clear-Button -->
-                        <v-btn @click="clearFields()" size="small" variant="outlined" color="primary" class="mr-3"
+                        <v-btn size="small" variant="outlined" color="primary" class="mr-3" @click="clearFields()"
                             >clear</v-btn
                         >
                         <!-- Execute-Button -->
                         <v-btn
-                            @click="executeOperation()"
                             size="small"
                             class="text-buttonText"
                             color="primary"
                             :loading="loading"
+                            @click="executeOperation()"
                             >execute</v-btn
                         >
                     </template>
@@ -99,23 +101,18 @@
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-    import { useNavigationStore } from '@/store/NavigationStore';
-    import { useAASStore } from '@/store/AASDataStore';
+    import DescriptionElement from '@/components/UIComponents/DescriptionElement.vue';
     import RequestHandling from '@/mixins/RequestHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
-
-    import DescriptionElement from '@/components/UIComponents/DescriptionElement.vue';
-
+    import { useAASStore } from '@/store/AASDataStore';
+    import { useNavigationStore } from '@/store/NavigationStore';
+    import InvalidElement from './InvalidElement.vue';
     import Property from './Property.vue';
     import ReferenceElement from './ReferenceElement.vue';
-    import InvalidElement from './InvalidElement.vue';
 
     export default defineComponent({
         name: 'Operation',
         components: {
-            RequestHandling, // Mixin to handle the requests to the AAS
-            SubmodelElementHandling, // Mixin to handle the SubmodelElements
-
             DescriptionElement,
 
             Property,
@@ -148,6 +145,20 @@
             };
         },
 
+        computed: {
+            // get selected AAS from Store
+            SelectedAAS() {
+                return this.aasStore.getSelectedAAS;
+            },
+
+            // Get the selected Treeview Node (SubmodelElement) from the store
+            SelectedNode() {
+                return this.aasStore.getSelectedNode;
+            },
+        },
+
+        watch: {},
+
         mounted() {
             // console.log(this.operationObject)
             // create local copy of the Operation Object
@@ -164,20 +175,6 @@
             }
         },
 
-        watch: {},
-
-        computed: {
-            // get selected AAS from Store
-            SelectedAAS() {
-                return this.aasStore.getSelectedAAS;
-            },
-
-            // Get the selected Treeview Node (SubmodelElement) from the store
-            SelectedNode() {
-                return this.aasStore.getSelectedNode;
-            },
-        },
-
         methods: {
             // Function to clear all Fields
             clearFields() {
diff --git a/aas-web-ui/src/components/SubmodelElements/Property.vue b/aas-web-ui/src/components/SubmodelElements/Property.vue
index 3a395201..7d09eb84 100644
--- a/aas-web-ui/src/components/SubmodelElements/Property.vue
+++ b/aas-web-ui/src/components/SubmodelElements/Property.vue
@@ -3,7 +3,7 @@
         <v-list-item v-if="!IsOperationVariable" class="px-1 pb-1 pt-0">
             <v-list-item-title class="text-subtitle-2 mt-2">{{ 'Value: ' }}</v-list-item-title>
         </v-list-item>
-        <v-card color="elevatedCard" v-if="propertyObject">
+        <v-card v-if="propertyObject" color="elevatedCard">
             <!-- Value of the Property -->
             <v-list nav class="pt-0" :class="IsOperationVariable ? '' : 'bg-elevatedCard'">
                 <!-- valueId -->
@@ -21,10 +21,10 @@
                             {{ valueId.value }}
                         </div>
                     </v-tooltip>
-                    <template v-slot:title>
+                    <template #title>
                         <span class="text-caption">{{ 'ValueId: ' }}</span>
                     </template>
-                    <template v-slot:subtitle>
+                    <template #subtitle>
                         <v-list-item-subtitle v-for="(valueId, i) in propertyObject.valueId.keys" :key="i">
                             <div class="pt-2">
                                 <v-chip label size="x-small" border class="mr-2">{{ valueId.type }}</v-chip>
@@ -43,28 +43,28 @@
                 <!-- Value Representation depending on the valueType -->
                 <NumberType
                     v-if="isNumber(propertyObject.valueType)"
-                    :numberValue="propertyObject"
-                    :isOperationVariable="isOperationVariable"
-                    :variableType="variableType"
-                    @updateValue="updateValue"></NumberType>
+                    :number-value="propertyObject"
+                    :is-operation-variable="isOperationVariable"
+                    :variable-type="variableType"
+                    @update-value="updateValue"></NumberType>
                 <BooleanType
                     v-else-if="propertyObject.valueType == 'xs:boolean'"
-                    :booleanValue="propertyObject"
-                    :isOperationVariable="isOperationVariable"
-                    :variableType="variableType"
-                    @updateValue="updateValue"></BooleanType>
+                    :boolean-value="propertyObject"
+                    :is-operation-variable="isOperationVariable"
+                    :variable-type="variableType"
+                    @update-value="updateValue"></BooleanType>
                 <DateTimeStampType
                     v-else-if="propertyObject.valueType == 'xs:dateTime'"
-                    :dateTimeStampValue="propertyObject"
-                    :isOperationVariable="isOperationVariable"
-                    :variableType="variableType"
-                    @updateValue="updateValue"></DateTimeStampType>
+                    :date-time-stamp-value="propertyObject"
+                    :is-operation-variable="isOperationVariable"
+                    :variable-type="variableType"
+                    @update-value="updateValue"></DateTimeStampType>
                 <StringType
                     v-else
-                    :stringValue="propertyObject"
-                    :isOperationVariable="isOperationVariable"
-                    :variableType="variableType"
-                    @updateValue="updateValue"></StringType>
+                    :string-value="propertyObject"
+                    :is-operation-variable="isOperationVariable"
+                    :variable-type="variableType"
+                    @update-value="updateValue"></StringType>
             </v-list>
         </v-card>
     </v-container>
@@ -72,21 +72,17 @@
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-    import { useAASStore } from '@/store/AASDataStore';
     import RequestHandling from '@/mixins/RequestHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
-
-    import StringType from './ValueTypes/StringType.vue';
-    import NumberType from './ValueTypes/NumberType.vue';
+    import { useAASStore } from '@/store/AASDataStore';
     import BooleanType from './ValueTypes/BooleanType.vue';
     import DateTimeStampType from './ValueTypes/DateTimeStampType.vue';
+    import NumberType from './ValueTypes/NumberType.vue';
+    import StringType from './ValueTypes/StringType.vue';
 
     export default defineComponent({
         name: 'Property',
         components: {
-            RequestHandling, // Mixin to handle the requests to the AAS
-            SubmodelElementHandling, // Mixin to handle the SubmodelElements
-
             // Value Types
             StringType,
             NumberType,
diff --git a/aas-web-ui/src/components/SubmodelElements/Range.vue b/aas-web-ui/src/components/SubmodelElements/Range.vue
index 0058f1a2..724a9f8a 100644
--- a/aas-web-ui/src/components/SubmodelElements/Range.vue
+++ b/aas-web-ui/src/components/SubmodelElements/Range.vue
@@ -3,7 +3,7 @@
         <v-list-item class="px-1 pb-1 pt-0">
             <v-list-item-title class="text-subtitle-2 mt-2">{{ 'Range: ' }}</v-list-item-title>
         </v-list-item>
-        <v-card color="elevatedCard" v-if="rangeObject" class="pt-10 pb-5 px-3">
+        <v-card v-if="rangeObject" color="elevatedCard" class="pt-10 pb-5 px-3">
             <v-range-slider
                 v-model="range"
                 :min="min"
@@ -19,7 +19,7 @@
                 <template v-slot:append>
                     <v-text-field v-model="range[1]" hide-details single-line variant="outlined" style="width: 90px" density="compact" readonly></v-text-field>
                 </template> -->
-                <template v-slot:thumb-label="{ modelValue }">
+                <template #thumb-label="{ modelValue }">
                     {{ modelValue + unitSuffix(rangeObject) }}
                 </template>
             </v-range-slider>
@@ -29,16 +29,12 @@
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-    import { useAASStore } from '@/store/AASDataStore';
     import RequestHandling from '@/mixins/RequestHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
+    import { useAASStore } from '@/store/AASDataStore';
 
     export default defineComponent({
         name: 'Range',
-        components: {
-            RequestHandling, // Mixin to handle the requests to the AAS
-            SubmodelElementHandling, // Mixin to handle the SubmodelElements
-        },
         mixins: [RequestHandling, SubmodelElementHandling],
         props: ['rangeObject'],
 
diff --git a/aas-web-ui/src/components/SubmodelElements/ReferenceElement.vue b/aas-web-ui/src/components/SubmodelElements/ReferenceElement.vue
index 9b08a43a..1e2beea9 100644
--- a/aas-web-ui/src/components/SubmodelElements/ReferenceElement.vue
+++ b/aas-web-ui/src/components/SubmodelElements/ReferenceElement.vue
@@ -3,7 +3,7 @@
         <v-list-item v-if="!IsOperationVariable" class="px-1 pb-1 pt-0">
             <v-list-item-title class="text-subtitle-2 mt-2">{{ 'Reference: ' }}</v-list-item-title>
         </v-list-item>
-        <v-card color="elevatedCard" v-if="referenceElementObject">
+        <v-card v-if="referenceElementObject" color="elevatedCard">
             <!-- Value of the Reference -->
             <v-list nav class="pt-0" :class="IsOperationVariable ? '' : 'bg-elevatedCard'">
                 <template v-for="(value, i) in referenceValue" :key="i">
@@ -20,13 +20,13 @@
                             </div>
                         </v-tooltip>
                         <!-- Reference Title -->
-                        <template v-slot:title>
+                        <template #title>
                             <div
-                                v-html="IsOperationVariable ? 'Reference:' : 'Description:'"
-                                class="text-subtitle-2 mt-2"></div>
+                                class="text-subtitle-2 mt-2"
+                                v-html="IsOperationVariable ? 'Reference:' : 'Description:'"></div>
                         </template>
                         <!-- Reference Representation -->
-                        <template v-slot:subtitle>
+                        <template #subtitle>
                             <div v-if="!IsOperationVariable || IsOutputVariable" class="pt-2">
                                 <v-chip label size="x-small" border class="mr-2">{{ value.type }}</v-chip>
                                 <span v-html="value.value"></span>
@@ -41,9 +41,9 @@
                                 clearable
                                 append-icon="mdi-delete"
                                 @click:append="removeReferenceEntry(i)"
-                                @update:focused="setFocus($event, value)"
-                                @keydown.native.enter="updateReferenceObject()">
-                                <template v-slot:prepend-inner>
+                                @update:focused="setFocus($event)"
+                                @keydown.enter="updateReferenceObject()">
+                                <template #prepend-inner>
                                     <!-- Reference Entry -->
                                     <v-chip label size="x-small" border>
                                         <span>{{ value.type ? value.type : 'no-selection' }}</span>
@@ -64,7 +64,7 @@
                                     </v-chip>
                                 </template>
                                 <!-- Update Value Button -->
-                                <template v-slot:append-inner>
+                                <template #append-inner>
                                     <v-btn
                                         v-if="value.isFocused"
                                         size="small"
@@ -86,27 +86,27 @@
             <!-- Action Buttons -->
             <v-list nav class="pa-0" :class="IsOperationVariable ? '' : 'bg-elevatedCard'">
                 <v-list-item>
-                    <template v-slot:append>
+                    <template #append>
                         <!-- Jump-Button -->
                         <v-btn
                             v-if="!IsOperationVariable || IsOutputVariable"
-                            @click="jumpToReferencedElement(referencedAAS, referenceValue, referencedSubmodel)"
                             size="small"
                             class="text-buttonText"
                             color="primary"
                             :loading="loading"
                             :disabled="disabled"
+                            @click="jumpToReferencedElement(referencedAAS, referenceValue, referencedSubmodel)"
                             >Jump</v-btn
                         >
                         <!-- Add new Reference Entry -->
                         <v-btn
                             v-if="IsOperationVariable && !IsOutputVariable"
-                            @click="addReferenceEntry()"
                             size="small"
                             class="text-buttonText"
                             color="primary"
                             :loading="loading"
-                            :disabled="disabled">
+                            :disabled="disabled"
+                            @click="addReferenceEntry()">
                             <div>Add Entry</div>
                             <v-icon class="ml-2">mdi-plus</v-icon>
                         </v-btn>
@@ -120,8 +120,8 @@
 <script lang="ts">
     import { defineComponent } from 'vue';
     import { useRouter } from 'vue-router';
-    import { useAASStore } from '@/store/AASDataStore';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
+    import { useAASStore } from '@/store/AASDataStore';
 
     export default defineComponent({
         name: 'ReferenceElement',
@@ -175,31 +175,6 @@
             };
         },
 
-        mounted() {
-            // console.log('ReferenceElement Mounted:', this.referenceElementObject);
-            this.referenceValue = this.referenceElementObject?.value?.keys;
-            this.validateReference();
-        },
-
-        watch: {
-            // Watch for changes in the selected Node and reset input
-            SelectedNode: {
-                deep: true,
-                handler() {
-                    this.referenceValue = [];
-                },
-            },
-
-            // Watch for changes in the referenceElementObject
-            referenceElementObject: {
-                deep: true,
-                handler() {
-                    this.referenceValue = this.referenceElementObject?.value?.keys;
-                    this.validateReference();
-                },
-            },
-        },
-
         computed: {
             // Get the selected Treeview Node (SubmodelElement) from the store
             SelectedNode() {
@@ -227,6 +202,31 @@
             },
         },
 
+        watch: {
+            // Watch for changes in the selected Node and reset input
+            SelectedNode: {
+                deep: true,
+                handler() {
+                    this.referenceValue = [];
+                },
+            },
+
+            // Watch for changes in the referenceElementObject
+            referenceElementObject: {
+                deep: true,
+                handler() {
+                    this.referenceValue = this.referenceElementObject?.value?.keys;
+                    this.validateReference();
+                },
+            },
+        },
+
+        mounted() {
+            // console.log('ReferenceElement Mounted:', this.referenceElementObject);
+            this.referenceValue = this.referenceElementObject?.value?.keys;
+            this.validateReference();
+        },
+
         methods: {
             // Function to check if the referenced Element exists
             validateReference() {
@@ -275,7 +275,7 @@
             },
 
             // Function to set the focus on the input field
-            setFocus(e: boolean, value: any) {
+            setFocus(e: boolean) {
                 if (!e) {
                     this.updateReferenceObject();
                 }
diff --git a/aas-web-ui/src/components/SubmodelElements/RelationshipElement.vue b/aas-web-ui/src/components/SubmodelElements/RelationshipElement.vue
index 50ff220f..845e34d3 100644
--- a/aas-web-ui/src/components/SubmodelElements/RelationshipElement.vue
+++ b/aas-web-ui/src/components/SubmodelElements/RelationshipElement.vue
@@ -6,7 +6,7 @@
                     capitalizeFirstLetter(referenceKey) + ': '
                 }}</v-list-item-title>
             </v-list-item>
-            <v-card color="elevatedCard" v-if="relationshipElementObject">
+            <v-card v-if="relationshipElementObject" color="elevatedCard">
                 <!-- Value of the Property -->
                 <v-list nav class="bg-elevatedCard pt-0">
                     <template v-for="(value, i) in getReference[referenceKey as 'first' | 'second']" :key="i">
@@ -19,11 +19,11 @@
                                 </div>
                             </v-tooltip>
                             <!-- Reference Title -->
-                            <template v-slot:title>
-                                <div v-html="'Description:'" class="text-subtitle-2 mt-2"></div>
+                            <template #title>
+                                <div class="text-subtitle-2 mt-2" v-html="'Description:'"></div>
                             </template>
                             <!-- Reference Representation -->
-                            <template v-slot:subtitle>
+                            <template #subtitle>
                                 <div class="pt-2">
                                     <v-chip label size="x-small" border class="mr-2">{{ value.type }}</v-chip>
                                     <span v-html="value.value"></span>
@@ -39,9 +39,14 @@
                 <!-- Action Buttons for Reference Jump -->
                 <v-list nav class="bg-elevatedCard pa-0">
                     <v-list-item>
-                        <template v-slot:append>
+                        <template #append>
                             <!-- Jump-Button -->
                             <v-btn
+                                size="small"
+                                class="text-buttonText"
+                                color="primary"
+                                :loading="getLoadingState[referenceKey as 'first' | 'second']"
+                                :disabled="getDisabledState[referenceKey as 'first' | 'second']"
                                 @click="
                                     jumpToReferencedElement(
                                         getReferencedAAS[referenceKey as 'first' | 'second'],
@@ -49,11 +54,6 @@
                                         getReferencedSubmodel[referenceKey as 'first' | 'second']
                                     )
                                 "
-                                size="small"
-                                class="text-buttonText"
-                                color="primary"
-                                :loading="getLoadingState[referenceKey as 'first' | 'second']"
-                                :disabled="getDisabledState[referenceKey as 'first' | 'second']"
                                 >Jump</v-btn
                             >
                         </template>
@@ -67,8 +67,8 @@
 <script lang="ts">
     import { defineComponent } from 'vue';
     import { useRouter } from 'vue-router';
-    import { useAASStore } from '@/store/AASDataStore';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
+    import { useAASStore } from '@/store/AASDataStore';
 
     export default defineComponent({
         name: 'RelationshipElement',
@@ -101,36 +101,6 @@
             };
         },
 
-        mounted() {
-            // console.log('RelationshipElement Mounted:', this.relationshipElementObject);
-            this.firstReference = this.relationshipElementObject.first.keys;
-            this.secondReference = this.relationshipElementObject.second.keys;
-            this.validateReference('first');
-            this.validateReference('second');
-        },
-
-        watch: {
-            // Watch for changes in the selected Node and reset input
-            SelectedNode: {
-                deep: true,
-                handler() {
-                    this.firstReference = [];
-                    this.secondReference = [];
-                },
-            },
-
-            // Watch for changes in the referenceElementObject
-            referenceElementObject: {
-                deep: true,
-                handler() {
-                    this.firstReference = this.relationshipElementObject.first.keys;
-                    this.secondReference = this.relationshipElementObject.second.keys;
-                    this.validateReference('first');
-                    this.validateReference('second');
-                },
-            },
-        },
-
         computed: {
             // Get the selected Treeview Node (SubmodelElement) from the store
             SelectedNode() {
@@ -178,6 +148,36 @@
             },
         },
 
+        watch: {
+            // Watch for changes in the selected Node and reset input
+            SelectedNode: {
+                deep: true,
+                handler() {
+                    this.firstReference = [];
+                    this.secondReference = [];
+                },
+            },
+
+            // Watch for changes in the referenceElementObject
+            referenceElementObject: {
+                deep: true,
+                handler() {
+                    this.firstReference = this.relationshipElementObject.first.keys;
+                    this.secondReference = this.relationshipElementObject.second.keys;
+                    this.validateReference('first');
+                    this.validateReference('second');
+                },
+            },
+        },
+
+        mounted() {
+            // console.log('RelationshipElement Mounted:', this.relationshipElementObject);
+            this.firstReference = this.relationshipElementObject.first.keys;
+            this.secondReference = this.relationshipElementObject.second.keys;
+            this.validateReference('first');
+            this.validateReference('second');
+        },
+
         methods: {
             // Function to check if the referenced Element exists
             validateReference(reference: string) {
diff --git a/aas-web-ui/src/components/SubmodelElements/Submodel.vue b/aas-web-ui/src/components/SubmodelElements/Submodel.vue
index 80fb7cd7..8c958ab5 100644
--- a/aas-web-ui/src/components/SubmodelElements/Submodel.vue
+++ b/aas-web-ui/src/components/SubmodelElements/Submodel.vue
@@ -11,15 +11,14 @@
         </v-list-item>
         <!-- Group of contained SubmodelElements -->
         <SubmodelElementGroup
-            :smeObject="submodelObject"
-            :smeLocator="'submodelElements'"
-            :topMargin="submodelObject.kind ? 'mt-1' : 'mt-4'"></SubmodelElementGroup>
+            :sme-object="submodelObject"
+            :sme-locator="'submodelElements'"
+            :top-margin="submodelObject.kind ? 'mt-1' : 'mt-4'"></SubmodelElementGroup>
     </v-container>
 </template>
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-
     import SubmodelElementGroup from '@/components/UIComponents/SubmodelElementGroup.vue';
 
     export default defineComponent({
diff --git a/aas-web-ui/src/components/SubmodelElements/SubmodelElementCollection.vue b/aas-web-ui/src/components/SubmodelElements/SubmodelElementCollection.vue
index 9305e6a0..81d48df0 100644
--- a/aas-web-ui/src/components/SubmodelElements/SubmodelElementCollection.vue
+++ b/aas-web-ui/src/components/SubmodelElements/SubmodelElementCollection.vue
@@ -2,15 +2,14 @@
     <v-container fluid class="pa-0">
         <!-- Group of contained SubmodelElements -->
         <SubmodelElementGroup
-            :smeObject="submodelElementCollectionObject"
-            :smeLocator="'value'"
-            :topMargin="'mt-4'"></SubmodelElementGroup>
+            :sme-object="submodelElementCollectionObject"
+            :sme-locator="'value'"
+            :top-margin="'mt-4'"></SubmodelElementGroup>
     </v-container>
 </template>
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-
     import SubmodelElementGroup from '@/components/UIComponents/SubmodelElementGroup.vue';
 
     export default defineComponent({
diff --git a/aas-web-ui/src/components/SubmodelElements/SubmodelElementList.vue b/aas-web-ui/src/components/SubmodelElements/SubmodelElementList.vue
index 07c52c9e..f2552061 100644
--- a/aas-web-ui/src/components/SubmodelElements/SubmodelElementList.vue
+++ b/aas-web-ui/src/components/SubmodelElements/SubmodelElementList.vue
@@ -2,15 +2,14 @@
     <v-container fluid class="pa-0">
         <!-- Group of contained SubmodelElements -->
         <SubmodelElementGroup
-            :smeObject="submodelElementListObject"
-            :smeLocator="'value'"
-            :topMargin="'mt-4'"></SubmodelElementGroup>
+            :sme-object="submodelElementListObject"
+            :sme-locator="'value'"
+            :top-margin="'mt-4'"></SubmodelElementGroup>
     </v-container>
 </template>
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-
     import SubmodelElementGroup from '@/components/UIComponents/SubmodelElementGroup.vue';
 
     export default defineComponent({
diff --git a/aas-web-ui/src/components/SubmodelElements/ValueTypes/BooleanType.vue b/aas-web-ui/src/components/SubmodelElements/ValueTypes/BooleanType.vue
index cf3fe0db..ea8f15b3 100644
--- a/aas-web-ui/src/components/SubmodelElements/ValueTypes/BooleanType.vue
+++ b/aas-web-ui/src/components/SubmodelElements/ValueTypes/BooleanType.vue
@@ -1,10 +1,10 @@
 <template>
     <v-list-item class="pt-0">
-        <template v-slot:title>
+        <template #title>
             <v-switch
+                v-model="newBooleanValue"
                 inset
                 density="compact"
-                v-model="newBooleanValue"
                 :readonly="IsOutputVariable"
                 color="primary"
                 :messages="
@@ -12,12 +12,12 @@
                 "
                 :hide-details="IsOperationVariable ? true : false"
                 @update:model-value="changeState">
-                <template v-slot:label>
+                <template #label>
                     <span style="display: inline; white-space: nowrap">{{ booleanValue.value }}</span>
                 </template>
             </v-switch>
         </template>
-        <template v-slot:append>
+        <template #append>
             <v-btn
                 v-if="!IsOperationVariable"
                 size="small"
@@ -34,14 +34,11 @@
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-    import { useAASStore } from '@/store/AASDataStore';
     import RequestHandling from '@/mixins/RequestHandling';
+    import { useAASStore } from '@/store/AASDataStore';
 
     export default defineComponent({
         name: 'BooleanType',
-        components: {
-            RequestHandling, // Mixin to handle the requests to the AAS
-        },
         mixins: [RequestHandling],
         props: ['booleanValue', 'isOperationVariable', 'variableType'],
 
@@ -59,40 +56,6 @@
             };
         },
 
-        mounted() {
-            // check if this.booleanValue.value is of type string
-            if (typeof this.booleanValue.value === 'string') {
-                // convert string to boolean
-                this.booleanValue.value = this.booleanValue.value === 'true';
-            } else {
-                this.newBooleanValue = this.booleanValue.value;
-            }
-        },
-
-        watch: {
-            // Watch for changes in the selected Node and reset input
-            SelectedNode: {
-                deep: true,
-                handler() {
-                    this.newBooleanValue = false;
-                },
-            },
-
-            // Watch for changes in the booleanValue and update the newBooleanValue if the input field is not focused
-            booleanValue: {
-                deep: true,
-                handler() {
-                    // check if this.booleanValue.value is of type string
-                    if (typeof this.booleanValue.value === 'string') {
-                        // convert string to boolean
-                        this.booleanValue.value = this.booleanValue.value === 'true';
-                    } else {
-                        this.newBooleanValue = this.booleanValue.value;
-                    }
-                },
-            },
-        },
-
         computed: {
             // get selected AAS from Store
             SelectedAAS() {
@@ -125,6 +88,42 @@
             },
         },
 
+        watch: {
+            // Watch for changes in the selected Node and reset input
+            SelectedNode: {
+                deep: true,
+                handler() {
+                    this.newBooleanValue = false;
+                },
+            },
+
+            // Watch for changes in the booleanValue and update the newBooleanValue if the input field is not focused
+            booleanValue: {
+                deep: true,
+                handler() {
+                    // check if this.booleanValue.value is of type string
+                    if (typeof this.booleanValue.value === 'string') {
+                        // convert string to boolean
+                        const convertedValue = this.booleanValue.value === 'true';
+                        this.newBooleanValue = convertedValue;
+                    } else {
+                        this.newBooleanValue = this.booleanValue.value;
+                    }
+                },
+            },
+        },
+
+        mounted() {
+            // check if this.booleanValue.value is of type string
+            if (typeof this.booleanValue.value === 'string') {
+                // convert string to boolean
+                const convertedValue = this.booleanValue.value === 'true';
+                this.newBooleanValue = convertedValue;
+            } else {
+                this.newBooleanValue = this.booleanValue.value;
+            }
+        },
+
         methods: {
             // Function to update the value of the property
             updateValue() {
diff --git a/aas-web-ui/src/components/SubmodelElements/ValueTypes/DateTimeStampType.vue b/aas-web-ui/src/components/SubmodelElements/ValueTypes/DateTimeStampType.vue
index 3eff6f38..22d1df1f 100644
--- a/aas-web-ui/src/components/SubmodelElements/ValueTypes/DateTimeStampType.vue
+++ b/aas-web-ui/src/components/SubmodelElements/ValueTypes/DateTimeStampType.vue
@@ -2,20 +2,20 @@
     <v-list-item class="pt-0">
         <v-list-item-title :class="IsOperationVariable ? 'pt-2' : ''">
             <v-text-field
+                v-model="newDateTimeStampValue"
                 type="text"
                 variant="outlined"
                 density="compact"
                 clearable
-                @keydown.native.enter="updateValue()"
-                v-model="newDateTimeStampValue"
                 :color="dateTimeStampValue.value == newDateTimeStampValue ? '' : 'warning'"
                 :persistent-hint="!IsOperationVariable"
                 :hint="dateTimeStampValue.value == newDateTimeStampValue ? '' : 'Current Value not yet saved.'"
+                :hide-details="IsOperationVariable ? true : false"
+                @keydown.enter="updateValue()"
                 @click:clear="clearDateTimeStamp"
-                @update:focused="setFocus"
-                :hide-details="IsOperationVariable ? true : false">
+                @update:focused="setFocus">
                 <!-- Update Value Button -->
-                <template v-slot:append-inner>
+                <template #append-inner>
                     <span class="text-subtitleText">{{ unitSuffix(dateTimeStampValue) }}</span>
                     <v-btn
                         v-if="!IsOperationVariable"
@@ -33,11 +33,11 @@
         <v-row v-if="!IsOutputVariable" class="mt-0">
             <!-- Date Picker -->
             <v-col cols="auto">
-                <v-date-picker color="primary" @update:modelValue="applyDate" elevation="1"></v-date-picker>
+                <v-date-picker color="primary" elevation="1" @update:model-value="applyDate"></v-date-picker>
             </v-col>
             <!-- Time Picker -->
             <v-col cols="auto">
-                <v-text-field type="time" variant="solo" v-model="time" @change="applyTime"></v-text-field>
+                <v-text-field v-model="time" type="time" variant="solo" @change="applyTime"></v-text-field>
             </v-col>
             <!-- Timezone Picker -->
         </v-row>
@@ -46,18 +46,13 @@
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-    import { useAASStore } from '@/store/AASDataStore';
+    import { useDate } from 'vuetify';
     import RequestHandling from '@/mixins/RequestHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
-
-    import { useDate } from 'vuetify';
+    import { useAASStore } from '@/store/AASDataStore';
 
     export default defineComponent({
         name: 'DateTimeStampType',
-        components: {
-            RequestHandling, // Mixin to handle the requests to the AAS
-            SubmodelElementHandling, // Mixin to handle the SubmodelElements
-        },
         mixins: [RequestHandling, SubmodelElementHandling],
         props: ['dateTimeStampValue', 'isOperationVariable', 'variableType'],
 
@@ -78,38 +73,6 @@
             };
         },
 
-        mounted() {
-            if (!this.dateTimeStampValue.value || this.dateTimeStampValue.value == '') {
-                this.newDateTimeStampValue = '';
-            } else {
-                this.newDateTimeStampValue = this.dateTimeStampValue.value;
-            }
-            let date = this.createDateObject(this.newDateTimeStampValue); // create a new Date Object from the given string
-            this.time = this.getTimeFromDate(date); // get the time from the date
-        },
-
-        watch: {
-            // Watch for changes in the selected Node and reset input
-            SelectedNode: {
-                deep: true,
-                handler() {
-                    this.newDateTimeStampValue = '';
-                },
-            },
-
-            // Watch for changes in the dateTimeStampValue and update the newDateTimeStampValue if the input field is not focused
-            dateTimeStampValue: {
-                deep: true,
-                handler() {
-                    if (!this.dateTimeStampValue.value || this.dateTimeStampValue.value == '') {
-                        this.newDateTimeStampValue = '';
-                    } else {
-                        this.newDateTimeStampValue = this.dateTimeStampValue.value;
-                    }
-                },
-            },
-        },
-
         computed: {
             // get selected AAS from Store
             SelectedAAS() {
@@ -142,6 +105,38 @@
             },
         },
 
+        watch: {
+            // Watch for changes in the selected Node and reset input
+            SelectedNode: {
+                deep: true,
+                handler() {
+                    this.newDateTimeStampValue = '';
+                },
+            },
+
+            // Watch for changes in the dateTimeStampValue and update the newDateTimeStampValue if the input field is not focused
+            dateTimeStampValue: {
+                deep: true,
+                handler() {
+                    if (!this.dateTimeStampValue.value || this.dateTimeStampValue.value == '') {
+                        this.newDateTimeStampValue = '';
+                    } else {
+                        this.newDateTimeStampValue = this.dateTimeStampValue.value;
+                    }
+                },
+            },
+        },
+
+        mounted() {
+            if (!this.dateTimeStampValue.value || this.dateTimeStampValue.value == '') {
+                this.newDateTimeStampValue = '';
+            } else {
+                this.newDateTimeStampValue = this.dateTimeStampValue.value;
+            }
+            let date = this.createDateObject(this.newDateTimeStampValue); // create a new Date Object from the given string
+            this.time = this.getTimeFromDate(date); // get the time from the date
+        },
+
         methods: {
             // Function to update the value of the property
             updateValue() {
diff --git a/aas-web-ui/src/components/SubmodelElements/ValueTypes/NumberType.vue b/aas-web-ui/src/components/SubmodelElements/ValueTypes/NumberType.vue
index 1e520e8d..6e438b54 100644
--- a/aas-web-ui/src/components/SubmodelElements/ValueTypes/NumberType.vue
+++ b/aas-web-ui/src/components/SubmodelElements/ValueTypes/NumberType.vue
@@ -2,19 +2,19 @@
     <v-list-item class="pt-0">
         <v-list-item-title :class="IsOperationVariable ? 'pt-2' : ''">
             <v-text-field
+                v-model="newNumberValue"
                 type="number"
                 variant="outlined"
                 density="compact"
                 clearable
-                @keydown.native.enter="updateValue()"
-                v-model="newNumberValue"
                 :readonly="IsOutputVariable"
                 :hint="isOperationVariable ? '' : 'greyed out value on the left shows the current value in the AAS'"
                 :label="isOperationVariable ? numberValue.idShort : ''"
-                @update:focused="setFocus"
-                :hide-details="IsOperationVariable ? true : false">
+                :hide-details="IsOperationVariable ? true : false"
+                @keydown.enter="updateValue()"
+                @update:focused="setFocus">
                 <!-- Current Value -->
-                <template v-slot:prepend-inner>
+                <template #prepend-inner>
                     <v-chip
                         v-if="(isFocused || numberValue.value != newNumberValue) && !IsOperationVariable"
                         label
@@ -33,7 +33,7 @@
                     }}</v-chip>
                 </template>
                 <!-- Update Value Button -->
-                <template v-slot:append-inner>
+                <template #append-inner>
                     <span class="text-subtitleText">{{ unitSuffix(numberValue) }}</span>
                     <v-btn
                         v-if="isFocused && !IsOperationVariable"
@@ -53,16 +53,12 @@
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-    import { useAASStore } from '@/store/AASDataStore';
     import RequestHandling from '@/mixins/RequestHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
+    import { useAASStore } from '@/store/AASDataStore';
 
     export default defineComponent({
         name: 'NumberType',
-        components: {
-            RequestHandling, // Mixin to handle the requests to the AAS
-            SubmodelElementHandling, // Mixin to handle the Submodel Elements
-        },
         mixins: [RequestHandling, SubmodelElementHandling],
         props: ['numberValue', 'isOperationVariable', 'variableType'],
 
@@ -81,30 +77,6 @@
             };
         },
 
-        mounted() {
-            this.newNumberValue = this.numberValue.value;
-        },
-
-        watch: {
-            // Watch for changes in the selected Node and reset input
-            SelectedNode: {
-                deep: true,
-                handler() {
-                    this.newNumberValue = '';
-                },
-            },
-
-            // Watch for changes in the numberValue and update the newNumberValue if the input field is not focused
-            numberValue: {
-                deep: true,
-                handler() {
-                    if (!this.isFocused) {
-                        this.newNumberValue = this.numberValue.value;
-                    }
-                },
-            },
-        },
-
         computed: {
             // get selected AAS from Store
             SelectedAAS() {
@@ -137,6 +109,30 @@
             },
         },
 
+        watch: {
+            // Watch for changes in the selected Node and reset input
+            SelectedNode: {
+                deep: true,
+                handler() {
+                    this.newNumberValue = '';
+                },
+            },
+
+            // Watch for changes in the numberValue and update the newNumberValue if the input field is not focused
+            numberValue: {
+                deep: true,
+                handler() {
+                    if (!this.isFocused) {
+                        this.newNumberValue = this.numberValue.value;
+                    }
+                },
+            },
+        },
+
+        mounted() {
+            this.newNumberValue = this.numberValue.value;
+        },
+
         methods: {
             // Function to update the value of the property
             updateValue() {
diff --git a/aas-web-ui/src/components/SubmodelElements/ValueTypes/StringType.vue b/aas-web-ui/src/components/SubmodelElements/ValueTypes/StringType.vue
index 94ab2760..9716cbd4 100644
--- a/aas-web-ui/src/components/SubmodelElements/ValueTypes/StringType.vue
+++ b/aas-web-ui/src/components/SubmodelElements/ValueTypes/StringType.vue
@@ -2,18 +2,18 @@
     <v-list-item class="pt-0">
         <v-list-item-title :class="IsOperationVariable ? 'pt-2' : ''">
             <v-textarea
+                v-model="newStringValue"
                 variant="outlined"
                 density="compact"
                 clearable
-                v-model="newStringValue"
                 :readonly="IsOutputVariable"
                 auto-grow
                 :rows="1"
                 :label="isOperationVariable ? stringValue.idShort : ''"
-                @update:focused="setFocus"
-                :hide-details="IsOperationVariable ? true : false">
+                :hide-details="IsOperationVariable ? true : false"
+                @update:focused="setFocus">
                 <!-- Update Value Button -->
-                <template v-slot:append-inner>
+                <template #append-inner>
                     <v-btn
                         v-if="!IsOperationVariable"
                         size="small"
@@ -32,14 +32,11 @@
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-    import { useAASStore } from '@/store/AASDataStore';
     import RequestHandling from '@/mixins/RequestHandling';
+    import { useAASStore } from '@/store/AASDataStore';
 
     export default defineComponent({
         name: 'StringType',
-        components: {
-            RequestHandling, // Mixin to handle the requests to the AAS
-        },
         mixins: [RequestHandling],
         props: ['stringValue', 'isOperationVariable', 'variableType'],
 
@@ -57,28 +54,6 @@
             };
         },
 
-        mounted() {
-            this.newStringValue = this.stringValue.value;
-        },
-
-        watch: {
-            // Watch for changes in the selected Node and reset input
-            SelectedNode: {
-                deep: true,
-                handler() {
-                    this.newStringValue = '';
-                },
-            },
-
-            // Watch for changes in the stringValue and update the newStringValue if the input field is not focused
-            stringValue: {
-                deep: true,
-                handler() {
-                    this.newStringValue = this.stringValue.value;
-                },
-            },
-        },
-
         computed: {
             // get selected AAS from Store
             SelectedAAS() {
@@ -111,6 +86,28 @@
             },
         },
 
+        watch: {
+            // Watch for changes in the selected Node and reset input
+            SelectedNode: {
+                deep: true,
+                handler() {
+                    this.newStringValue = '';
+                },
+            },
+
+            // Watch for changes in the stringValue and update the newStringValue if the input field is not focused
+            stringValue: {
+                deep: true,
+                handler() {
+                    this.newStringValue = this.stringValue.value;
+                },
+            },
+        },
+
+        mounted() {
+            this.newStringValue = this.stringValue.value;
+        },
+
         methods: {
             // Function to update the value of the property
             updateValue() {
diff --git a/aas-web-ui/src/components/SubmodelList.vue b/aas-web-ui/src/components/SubmodelList.vue
index bef4da77..02a1828b 100644
--- a/aas-web-ui/src/components/SubmodelList.vue
+++ b/aas-web-ui/src/components/SubmodelList.vue
@@ -24,10 +24,9 @@
                 </div>
                 <!-- List of Submodels -->
                 <v-list-item
-                    v-else
                     v-for="submodel in submodelData"
+                    v-else
                     :key="submodel.id"
-                    @click="toggleNode(submodel)"
                     color="primary"
                     nav
                     class="bg-listItem mb-2"
@@ -38,8 +37,9 @@
                             : isDark
                               ? '#686868 !important'
                               : '#ABABAB !important',
-                    }">
-                    <template v-slot:prepend>
+                    }"
+                    @click="toggleNode(submodel)">
+                    <template #prepend>
                         <v-chip label border color="primary" size="x-small" class="mr-3">SM</v-chip>
                     </template>
                     <v-list-item-title :class="submodel.isActive ? 'text-primary' : ''">{{
@@ -61,17 +61,14 @@
     import { defineComponent } from 'vue';
     import { useRoute, useRouter } from 'vue-router';
     import { useTheme } from 'vuetify';
-    import { useNavigationStore } from '@/store/NavigationStore';
-    import { useAASStore } from '@/store/AASDataStore';
-    import { useEnvStore } from '@/store/EnvironmentStore';
     import RequestHandling from '@/mixins/RequestHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
+    import { useAASStore } from '@/store/AASDataStore';
+    import { useEnvStore } from '@/store/EnvironmentStore';
+    import { useNavigationStore } from '@/store/NavigationStore';
 
     export default defineComponent({
         name: 'SubmodelList',
-        components: {
-            RequestHandling, // Mixin to handle the requests to the AAS
-        },
         mixins: [RequestHandling, SubmodelElementHandling],
 
         setup() {
@@ -100,34 +97,6 @@
             };
         },
 
-        mounted() {
-            this.initSubmodelListWithRouteParameters();
-        },
-
-        watch: {
-            // initialize Submodel List when AAS gets selected or changes
-            SelectedAAS: {
-                deep: true,
-                handler() {
-                    this.initSubmodelList();
-                },
-            },
-
-            // Resets the Submodel List when the AAS Registry changes
-            aasRegistryServerURL() {
-                if (!this.aasRegistryServerURL) {
-                    this.submodelData = [];
-                }
-            },
-
-            // Resets the Submodel List when the Submodel Registry changes
-            submodelRegistryServerURL() {
-                if (!this.submodelRegistryURL) {
-                    this.submodelData = [];
-                }
-            },
-        },
-
         computed: {
             // get selected AAS from Store
             SelectedAAS() {
@@ -165,6 +134,34 @@
             },
         },
 
+        watch: {
+            // initialize Submodel List when AAS gets selected or changes
+            SelectedAAS: {
+                deep: true,
+                handler() {
+                    this.initSubmodelList();
+                },
+            },
+
+            // Resets the Submodel List when the AAS Registry changes
+            aasRegistryServerURL() {
+                if (!this.aasRegistryServerURL) {
+                    this.submodelData = [];
+                }
+            },
+
+            // Resets the Submodel List when the Submodel Registry changes
+            submodelRegistryServerURL() {
+                if (!this.submodelRegistryURL) {
+                    this.submodelData = [];
+                }
+            },
+        },
+
+        mounted() {
+            this.initSubmodelListWithRouteParameters();
+        },
+
         methods: {
             initSubmodelList() {
                 // console.log("initialize Submodel List: ", this.SelectedAAS);
diff --git a/aas-web-ui/src/components/SubmodelPlugins/BillsOfMaterial.vue b/aas-web-ui/src/components/SubmodelPlugins/BillsOfMaterial.vue
index e182a7d8..6b0544ee 100644
--- a/aas-web-ui/src/components/SubmodelPlugins/BillsOfMaterial.vue
+++ b/aas-web-ui/src/components/SubmodelPlugins/BillsOfMaterial.vue
@@ -25,13 +25,13 @@
 </template>
 
 <script lang="ts">
+    import mermaid from 'mermaid';
     import { defineComponent } from 'vue';
     import { useRouter } from 'vue-router';
-    import mermaid from 'mermaid';
     import { useTheme } from 'vuetify';
-    import { useAASStore } from '@/store/AASDataStore';
     import RequestHandling from '@/mixins/RequestHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
+    import { useAASStore } from '@/store/AASDataStore';
 
     declare global {
         interface Window {
@@ -41,9 +41,6 @@
 
     export default defineComponent({
         name: 'BillsOfMaterial',
-        components: {
-            RequestHandling, // Mixin to handle the requests to the AAS
-        },
         mixins: [RequestHandling, SubmodelElementHandling],
         props: ['submodelElementData'],
 
@@ -75,13 +72,16 @@
             };
         },
 
-        mounted() {
-            window.callback = this.callback; // set the callback function
-            this.initializeBoM(); // initialize BoM Plugin
-        },
+        computed: {
+            // Check if the current Theme is dark
+            isDark() {
+                return this.theme.global.current.value.dark;
+            },
 
-        beforeUnmount() {
-            window.callback = null; // remove the callback function
+            // get the vuetify primary color
+            primaryColor() {
+                return this.theme.current.value.colors.primary;
+            },
         },
 
         watch: {
@@ -91,16 +91,13 @@
             },
         },
 
-        computed: {
-            // Check if the current Theme is dark
-            isDark() {
-                return this.theme.global.current.value.dark;
-            },
+        mounted() {
+            window.callback = this.callback; // set the callback function
+            this.initializeBoM(); // initialize BoM Plugin
+        },
 
-            // get the vuetify primary color
-            primaryColor() {
-                return this.theme.current.value.colors.primary;
-            },
+        beforeUnmount() {
+            window.callback = null; // remove the callback function
         },
 
         methods: {
diff --git a/aas-web-ui/src/components/SubmodelPlugins/CADPreview.vue b/aas-web-ui/src/components/SubmodelPlugins/CADPreview.vue
index 8be8ab22..14db9f86 100644
--- a/aas-web-ui/src/components/SubmodelPlugins/CADPreview.vue
+++ b/aas-web-ui/src/components/SubmodelPlugins/CADPreview.vue
@@ -8,26 +8,25 @@
 </template>
 
 <script lang="ts">
+    import * as THREE from 'three';
+    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+    import { OutlineEffect } from 'three/examples/jsm/effects/OutlineEffect.js';
+    import { ViewHelper } from 'three/examples/jsm/helpers/ViewHelper.js';
+    import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+    import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
+    import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';
     import { defineComponent } from 'vue';
     import { useTheme } from 'vuetify';
-    import { useNavigationStore } from '@/store/NavigationStore';
-    import { useAASStore } from '@/store/AASDataStore';
     import RequestHandling from '@/mixins/RequestHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
-
-    import * as THREE from 'three';
-    import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';
-    import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
-    import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
-    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
-    import { ViewHelper } from 'three/examples/jsm/helpers/ViewHelper.js';
-    import { OutlineEffect } from 'three/examples/jsm/effects/OutlineEffect.js';
+    import { useAASStore } from '@/store/AASDataStore';
     import { useAuthStore } from '@/store/AuthStore';
+    import { useNavigationStore } from '@/store/NavigationStore';
 
     export default defineComponent({
         name: 'CADPreview',
-        props: ['submodelElementData'],
         mixins: [RequestHandling, SubmodelElementHandling],
+        props: ['submodelElementData'],
 
         setup() {
             const theme = useTheme();
@@ -49,11 +48,15 @@
             };
         },
 
-        mounted() {
-            if (this.submodelElementData.modelType == 'File') {
-                this.localPathValue = this.getLocalPath(this.submodelElementData.value, this.submodelElementData);
-                this.initThree();
-            }
+        computed: {
+            // Get the selected Treeview Node (SubmodelElement) from the store
+            SelectedNode() {
+                return this.aasStore.getSelectedNode;
+            },
+
+            authToken() {
+                return this.authStore.getToken;
+            },
         },
 
         watch: {
@@ -65,15 +68,11 @@
             },
         },
 
-        computed: {
-            // Get the selected Treeview Node (SubmodelElement) from the store
-            SelectedNode() {
-                return this.aasStore.getSelectedNode;
-            },
-
-            authToken() {
-                return this.authStore.getToken;
-            },
+        mounted() {
+            if (this.submodelElementData.modelType == 'File') {
+                this.localPathValue = this.getLocalPath(this.submodelElementData.value, this.submodelElementData);
+                this.initThree();
+            }
         },
 
         methods: {
diff --git a/aas-web-ui/src/components/SubmodelPlugins/ContactInformation.vue b/aas-web-ui/src/components/SubmodelPlugins/ContactInformation.vue
index becb7c45..96c2bde5 100644
--- a/aas-web-ui/src/components/SubmodelPlugins/ContactInformation.vue
+++ b/aas-web-ui/src/components/SubmodelPlugins/ContactInformation.vue
@@ -14,7 +14,7 @@
             <v-expansion-panel v-for="(contact, index) in contacts" :key="index">
                 <v-expansion-panel-title>
                     <v-list-item class="pa-0">
-                        <template v-slot:prepend>
+                        <template #prepend>
                             <v-icon size="small">mdi-card-account-phone</v-icon>
                         </template>
                         <v-list-item-title>{{ nameToDisplay(contact) }}</v-list-item-title>
@@ -84,15 +84,12 @@
 <script lang="ts">
     import { defineComponent } from 'vue';
     import { useTheme } from 'vuetify';
-    import { useAASStore } from '@/store/AASDataStore';
     import RequestHandling from '@/mixins/RequestHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
+    import { useAASStore } from '@/store/AASDataStore';
 
     export default defineComponent({
         name: 'ContactInformation',
-        components: {
-            RequestHandling, // Mixin to handle the requests to the AAS
-        },
         mixins: [RequestHandling, SubmodelElementHandling],
         props: ['submodelElementData'],
 
@@ -108,16 +105,13 @@
 
         data() {
             return {
-                panel: 0 as Number | null,
+                contactInformationData: {} as any,
+                panel: 0 as number | null,
                 contacts: [] as Array<any>,
                 loading: false,
             };
         },
 
-        mounted() {
-            this.initContactInformation();
-        },
-
         computed: {
             // Get the selected Treeview Node (SubmodelElement) from the store
             SelectedNode() {
@@ -125,6 +119,10 @@
             },
         },
 
+        mounted() {
+            this.initContactInformation();
+        },
+
         methods: {
             async initContactInformation() {
                 this.loading = true;
@@ -134,8 +132,9 @@
                     submodelElementData,
                     this.SelectedNode.path
                 );
+                this.contactInformationData = submodelElementData;
                 // create array of contacts
-                let contacts = this.submodelElementData.submodelElements.filter((element: any) => {
+                let contacts = this.contactInformationData.submodelElements.filter((element: any) => {
                     return (
                         element.semanticId.keys[0].value ===
                         'https://admin-shell.io/zvei/nameplate/1/0/ContactInformations/ContactInformation'
diff --git a/aas-web-ui/src/components/SubmodelPlugins/DigitalNameplate.vue b/aas-web-ui/src/components/SubmodelPlugins/DigitalNameplate.vue
index 42eba664..dd408197 100644
--- a/aas-web-ui/src/components/SubmodelPlugins/DigitalNameplate.vue
+++ b/aas-web-ui/src/components/SubmodelPlugins/DigitalNameplate.vue
@@ -192,37 +192,26 @@
                 <div class="text-subtitle-1">{{ 'Asset Specific Properties' }}</div>
             </v-card-title>
             <v-card-text>
-                <GenericDataVisu :submodelElementData="assetSpecificProperties"></GenericDataVisu>
+                <GenericDataVisu :submodel-element-data="assetSpecificProperties"></GenericDataVisu>
             </v-card-text>
         </v-card>
     </v-container>
 </template>
 
 <script lang="ts">
+    import 'leaflet/dist/leaflet.css';
+    import { LMap, LMarker, LTileLayer } from '@vue-leaflet/vue-leaflet';
+    import { latLng } from 'leaflet';
     import { defineComponent } from 'vue';
     import { useTheme } from 'vuetify';
-    import { latLng } from 'leaflet';
-    import { useAASStore } from '@/store/AASDataStore';
+    import GenericDataVisu from '@/components/UIComponents/GenericDataVisu.vue';
     import RequestHandling from '@/mixins/RequestHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
-
-    import IdentificationElement from '@/components/UIComponents/IdentificationElement.vue';
-    import DescriptionElement from '@/components/UIComponents/DescriptionElement.vue';
-    import ImagePreview from '@/components/SubmodelPlugins/ImagePreview.vue';
-
-    import GenericDataVisu from '@/components/UIComponents/GenericDataVisu.vue';
-
-    import { LMap, LTileLayer, LMarker } from '@vue-leaflet/vue-leaflet';
-    import 'leaflet/dist/leaflet.css';
+    import { useAASStore } from '@/store/AASDataStore';
 
     export default defineComponent({
         name: 'DigitalNameplate',
         components: {
-            RequestHandling, // Mixin to handle the requests to the AAS
-
-            // UI Components
-            IdentificationElement,
-            DescriptionElement,
             GenericDataVisu,
 
             // Leaflet Map
@@ -261,10 +250,6 @@
             };
         },
 
-        mounted() {
-            this.initializeDigitalNameplate(); // initialize DigitalNameplate Plugin
-        },
-
         computed: {
             // Get the selected Treeview Node (SubmodelElement) from the store
             SelectedNode() {
@@ -272,6 +257,10 @@
             },
         },
 
+        mounted() {
+            this.initializeDigitalNameplate(); // initialize DigitalNameplate Plugin
+        },
+
         methods: {
             // Function to initialize the Digital Nameplate
             async initializeDigitalNameplate() {
diff --git a/aas-web-ui/src/components/SubmodelPlugins/HTWFuehrungskomponente.vue b/aas-web-ui/src/components/SubmodelPlugins/HTWFuehrungskomponente.vue
index c43f508b..c208fd33 100644
--- a/aas-web-ui/src/components/SubmodelPlugins/HTWFuehrungskomponente.vue
+++ b/aas-web-ui/src/components/SubmodelPlugins/HTWFuehrungskomponente.vue
@@ -1030,8 +1030,8 @@
                 <v-card-title class="text-subtitle-2">Set Statemachine Mode</v-card-title>
                 <v-divider></v-divider>
                 <v-card-actions>
-                    <v-btn variant="elevated" @click="setMode(1)" class="mr-2">Production</v-btn>
-                    <v-btn variant="elevated" @click="setMode(2)" class="mr-2">Maintenance</v-btn>
+                    <v-btn variant="elevated" class="mr-2" @click="setMode(1)">Production</v-btn>
+                    <v-btn variant="elevated" class="mr-2" @click="setMode(2)">Maintenance</v-btn>
                     <v-btn variant="elevated" @click="setMode(3)">Manual</v-btn>
                 </v-card-actions>
             </v-card>
@@ -1042,65 +1042,65 @@
                 <v-card-actions>
                     <v-btn
                         v-if="resetStates.includes(makeUniform(submodelElementData.value[0].value))"
-                        @click="setState(1)"
                         variant="elevated"
                         class="mr-2"
+                        @click="setState(1)"
                         >Reset</v-btn
                     >
                     <v-btn
                         v-if="startStates.includes(makeUniform(submodelElementData.value[0].value))"
-                        @click="setState(2)"
                         variant="elevated"
                         class="mr-2"
+                        @click="setState(2)"
                         >Start</v-btn
                     >
                     <v-btn
                         v-if="stopStates.includes(makeUniform(submodelElementData.value[0].value))"
-                        @click="setState(3)"
                         variant="elevated"
                         class="mr-2"
+                        @click="setState(3)"
                         >Stop</v-btn
                     >
                     <v-btn
                         v-if="holdStates.includes(makeUniform(submodelElementData.value[0].value))"
-                        @click="setState(4)"
                         variant="elevated"
                         class="mr-2"
+                        @click="setState(4)"
                         >Hold</v-btn
                     >
                     <v-btn
                         v-if="unholdStates.includes(makeUniform(submodelElementData.value[0].value))"
-                        @click="setState(5)"
                         variant="elevated"
                         class="mr-2"
+                        @click="setState(5)"
                         >Unhold</v-btn
                     >
                     <v-btn
                         v-if="suspendStates.includes(makeUniform(submodelElementData.value[0].value))"
-                        @click="setState(6)"
                         variant="elevated"
                         class="mr-2"
+                        @click="setState(6)"
                         >Suspend</v-btn
                     >
                     <v-btn
                         v-if="unsuspendStates.includes(makeUniform(submodelElementData.value[0].value))"
-                        @click="setState(7)"
                         variant="elevated"
                         class="mr-2"
+                        @click="setState(7)"
                         >Unsuspend</v-btn
                     >
                     <v-btn
                         v-if="abortStates.includes(makeUniform(submodelElementData.value[0].value))"
-                        @click="setState(8)"
                         variant="elevated"
                         class="mr-2"
+                        @click="setState(8)"
                         >Abort</v-btn
                     >
                     <v-btn
                         v-if="clearStates.includes(makeUniform(submodelElementData.value[0].value))"
-                        @click="setState(9)"
                         variant="elevated"
                         class="mr-2"
+                        @click="setState(9)"
                         >Clear</v-btn
                     >
                 </v-card-actions>
@@ -1112,16 +1112,12 @@
 <script lang="ts">
     import { defineComponent } from 'vue';
     import { useTheme } from 'vuetify';
-    import { useNavigationStore } from '@/store/NavigationStore';
     import RequestHandling from '@/mixins/RequestHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
+    import { useNavigationStore } from '@/store/NavigationStore';
 
     export default defineComponent({
         name: 'HTWFuehrungskomponente',
-        components: {
-            RequestHandling, // Mixin to handle the requests to the AAS
-            SubmodelElementHandling, // Mixin to handle the submodel elements
-        },
         mixins: [RequestHandling, SubmodelElementHandling],
         props: ['submodelElementData', 'selectedNode'],
 
@@ -1149,20 +1145,6 @@
             };
         },
 
-        mounted() {
-            this.updateSVG(); // set the visual state of the PackML SVG
-        },
-
-        watch: {
-            // Watch for changes in the submodelElementData and update the SVG
-            submodelElementData: {
-                handler() {
-                    this.updateSVG();
-                },
-                deep: true,
-            },
-        },
-
         computed: {
             // Check if the current Theme is dark
             isDark() {
@@ -1292,6 +1274,20 @@
             },
         },
 
+        watch: {
+            // Watch for changes in the submodelElementData and update the SVG
+            submodelElementData: {
+                handler() {
+                    this.updateSVG();
+                },
+                deep: true,
+            },
+        },
+
+        mounted() {
+            this.updateSVG(); // set the visual state of the PackML SVG
+        },
+
         methods: {
             // Function to update the visual state of the PackML SVG
             updateSVG() {
@@ -1366,7 +1362,7 @@
                 let context = 'updating Property "' + propName + '"';
                 let disableMessage = false;
                 // Send Request to update the value of the property
-                this.putRequest(path, content, headers, context, disableMessage).then((response: any) => {
+                this.putRequest(path, content, headers, context, disableMessage).then(() => {
                     this.navigationStore.dispatchSnackbar({
                         status: true,
                         timeout: 4000,
diff --git a/aas-web-ui/src/components/SubmodelPlugins/HandoverDocumentation.vue b/aas-web-ui/src/components/SubmodelPlugins/HandoverDocumentation.vue
index 2faf8873..35751483 100644
--- a/aas-web-ui/src/components/SubmodelPlugins/HandoverDocumentation.vue
+++ b/aas-web-ui/src/components/SubmodelPlugins/HandoverDocumentation.vue
@@ -14,7 +14,7 @@
             <v-expansion-panel v-for="(document, index) in documents" :key="document.idShort">
                 <v-expansion-panel-title>
                     <v-list-item class="pa-0">
-                        <template v-slot:prepend>
+                        <template #prepend>
                             <v-icon size="small">mdi-file-outline</v-icon>
                         </template>
                         <v-list-item-title>{{ document.idShort }}</v-list-item-title>
@@ -74,11 +74,11 @@
                         <v-row justify="center" class="mt-3">
                             <v-col cols="auto">
                                 <v-btn-toggle
+                                    v-model="documentVersion.fileToggle"
                                     color="primary"
                                     variant="outlined"
                                     divided
-                                    density="compact"
-                                    v-model="documentVersion.fileToggle">
+                                    density="compact">
                                     <v-btn value="preview">
                                         <span>Preview File</span>
                                     </v-btn>
@@ -90,19 +90,19 @@
                         </v-row>
                         <!-- File Preview (PreviewFile) -->
                         <template v-if="documentVersion.fileToggle === 'preview'">
-                            <div class="mt-3" v-if="documentVersion.previewFile">
+                            <div v-if="documentVersion.previewFile" class="mt-3">
                                 <ImagePreview
                                     v-if="
                                         documentVersion.previewFile.contentType &&
                                         documentVersion.previewFile.contentType.includes('image')
                                     "
-                                    :submodelElementData="documentVersion.previewFile"></ImagePreview>
+                                    :submodel-element-data="documentVersion.previewFile"></ImagePreview>
                                 <PDFPreview
                                     v-if="
                                         documentVersion.previewFile.contentType &&
                                         documentVersion.previewFile.contentType.includes('pdf')
                                     "
-                                    :submodelElementData="documentVersion.previewFile"></PDFPreview>
+                                    :submodel-element-data="documentVersion.previewFile"></PDFPreview>
                                 <CADPreview
                                     v-if="
                                         documentVersion.previewFile.contentType &&
@@ -112,16 +112,16 @@
                                             documentVersion.previewFile.contentType.includes('obj') ||
                                             documentVersion.previewFile.contentType.includes('gltf'))
                                     "
-                                    :submodelElementData="documentVersion.previewFile"></CADPreview>
+                                    :submodel-element-data="documentVersion.previewFile"></CADPreview>
                             </div>
                             <!-- Download Button -->
                             <v-btn
+                                v-if="documentVersion.previewFile"
                                 class="mt-3"
                                 block
                                 color="primary"
                                 variant="tonal"
-                                @click="downloadFile(documentVersion.previewFile)"
-                                v-if="documentVersion.previewFile">
+                                @click="downloadFile(documentVersion.previewFile)">
                                 <v-icon left>mdi-download</v-icon>
                                 <span>Download Preview File</span>
                             </v-btn>
@@ -135,19 +135,19 @@
                         </template>
                         <!-- File Preview (DigitalFile) -->
                         <template v-else-if="documentVersion.fileToggle === 'digital'">
-                            <div class="mt-3" v-if="documentVersion.digitalFile">
+                            <div v-if="documentVersion.digitalFile" class="mt-3">
                                 <ImagePreview
                                     v-if="
                                         documentVersion.digitalFile.contentType &&
                                         documentVersion.digitalFile.contentType.includes('image')
                                     "
-                                    :submodelElementData="documentVersion.digitalFile"></ImagePreview>
+                                    :submodel-element-data="documentVersion.digitalFile"></ImagePreview>
                                 <PDFPreview
                                     v-if="
                                         documentVersion.digitalFile.contentType &&
                                         documentVersion.digitalFile.contentType.includes('pdf')
                                     "
-                                    :submodelElementData="documentVersion.digitalFile"></PDFPreview>
+                                    :submodel-element-data="documentVersion.digitalFile"></PDFPreview>
                                 <CADPreview
                                     v-if="
                                         documentVersion.digitalFile.contentType &&
@@ -157,16 +157,16 @@
                                             documentVersion.digitalFile.contentType.includes('obj') ||
                                             documentVersion.digitalFile.contentType.includes('gltf'))
                                     "
-                                    :submodelElementData="documentVersion.digitalFile"></CADPreview>
+                                    :submodel-element-data="documentVersion.digitalFile"></CADPreview>
                             </div>
                             <!-- Download Button -->
                             <v-btn
+                                v-if="documentVersion.digitalFile"
                                 class="mt-3"
                                 block
                                 color="primary"
                                 variant="tonal"
-                                @click="downloadFile(documentVersion.digitalFile)"
-                                v-if="documentVersion.digitalFile">
+                                @click="downloadFile(documentVersion.digitalFile)">
                                 <v-icon left>mdi-download</v-icon>
                                 <span>Download Digital File</span>
                             </v-btn>
@@ -266,19 +266,16 @@
 <script lang="ts">
     import { defineComponent } from 'vue';
     import { useTheme } from 'vuetify';
-    import { useAASStore } from '@/store/AASDataStore';
     import RequestHandling from '@/mixins/RequestHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
-
+    import { useAASStore } from '@/store/AASDataStore';
+    import CADPreview from './CADPreview.vue';
     import ImagePreview from './ImagePreview.vue';
     import PDFPreview from './PDFPreview.vue';
-    import CADPreview from './CADPreview.vue';
 
     export default defineComponent({
         name: 'HandoverDocumentation',
         components: {
-            RequestHandling, // Mixin to handle the requests to the AAS
-
             ImagePreview,
             PDFPreview,
             CADPreview,
@@ -298,16 +295,13 @@
 
         data() {
             return {
-                panel: null as Number | null,
+                handoverDocuData: {} as any,
+                panel: null as number | null,
                 documents: [] as Array<any>,
                 loading: false,
             };
         },
 
-        mounted() {
-            this.initHandoverDocumentation();
-        },
-
         computed: {
             // Get the selected Treeview Node (SubmodelElement) from the store
             SelectedNode() {
@@ -315,6 +309,10 @@
             },
         },
 
+        mounted() {
+            this.initHandoverDocumentation();
+        },
+
         methods: {
             async initHandoverDocumentation() {
                 this.loading = true;
@@ -324,8 +322,9 @@
                     submodelElementData,
                     this.SelectedNode.path
                 );
+                this.handoverDocuData = submodelElementData;
                 // create array of documents
-                let documents = this.submodelElementData.submodelElements.filter((element: any) => {
+                let documents = this.handoverDocuData.submodelElements.filter((element: any) => {
                     return this.checkSemanticId(element, '0173-1#02-ABI500#001/0173-1#01-AHF579#001');
                 });
                 documents.forEach((document: any) => {
diff --git a/aas-web-ui/src/components/SubmodelPlugins/ImagePreview.vue b/aas-web-ui/src/components/SubmodelPlugins/ImagePreview.vue
index ad0878fb..e699910a 100644
--- a/aas-web-ui/src/components/SubmodelPlugins/ImagePreview.vue
+++ b/aas-web-ui/src/components/SubmodelPlugins/ImagePreview.vue
@@ -29,14 +29,14 @@
 <script lang="ts">
     import { defineComponent } from 'vue';
     import { useTheme } from 'vuetify';
-    import { useAASStore } from '@/store/AASDataStore';
-    import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
     import RequestHandling from '@/mixins/RequestHandling';
+    import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
+    import { useAASStore } from '@/store/AASDataStore';
 
     export default defineComponent({
         name: 'ImagePreview',
-        props: ['submodelElementData'],
         mixins: [SubmodelElementHandling, RequestHandling],
+        props: ['submodelElementData'],
 
         setup() {
             const theme = useTheme();
@@ -56,16 +56,11 @@
             };
         },
 
-        mounted() {
-            this.Base64Image = '';
-            this.imageUrl = '';
-            if (this.submodelElementData.modelType == 'File') {
-                // console.log('SubmodelElementData: ', this.submodelElementData);
-                this.getImageBlob();
-            } else if (this.submodelElementData.modelType == 'Blob') {
-                this.getDecodedImageBlob();
-            }
-            this.errorLoadingImage = false;
+        computed: {
+            // Get the selected Treeview Node (SubmodelElement) from the store
+            SelectedNode() {
+                return this.aasStore.getSelectedNode;
+            },
         },
 
         watch: {
@@ -81,11 +76,16 @@
             },
         },
 
-        computed: {
-            // Get the selected Treeview Node (SubmodelElement) from the store
-            SelectedNode() {
-                return this.aasStore.getSelectedNode;
-            },
+        mounted() {
+            this.Base64Image = '';
+            this.imageUrl = '';
+            if (this.submodelElementData.modelType == 'File') {
+                // console.log('SubmodelElementData: ', this.submodelElementData);
+                this.getImageBlob();
+            } else if (this.submodelElementData.modelType == 'Blob') {
+                this.getDecodedImageBlob();
+            }
+            this.errorLoadingImage = false;
         },
 
         methods: {
diff --git a/aas-web-ui/src/components/SubmodelPlugins/JSONArrayProperty.vue b/aas-web-ui/src/components/SubmodelPlugins/JSONArrayProperty.vue
index 1484429a..d739dfae 100644
--- a/aas-web-ui/src/components/SubmodelPlugins/JSONArrayProperty.vue
+++ b/aas-web-ui/src/components/SubmodelPlugins/JSONArrayProperty.vue
@@ -67,32 +67,6 @@
             return {};
         },
 
-        mounted() {
-            this.$nextTick(() => {
-                const chart = (this.$refs.areachart as any).chart;
-                if (chart && this.submodelElementData && Object.keys(this.submodelElementData).length > 0) {
-                    // console.log('Chart has rendered')
-                    // apply the theme on component mount
-                    this.applyTheme();
-                    // append the series to the chart
-                    this.initChart();
-                }
-            });
-        },
-
-        watch: {
-            // watch for changes in the vuetify theme and update the chart options
-            isDark() {
-                this.applyTheme();
-            },
-
-            // watch for changes in the selected node and update the chart data
-            submodelElementData() {
-                // console.log('submodelElementData changed: ', this.submodelElementData);
-                this.initChart();
-            },
-        },
-
         computed: {
             // get selected AAS from Store
             SelectedAAS() {
@@ -110,6 +84,32 @@
             },
         },
 
+        watch: {
+            // watch for changes in the vuetify theme and update the chart options
+            isDark() {
+                this.applyTheme();
+            },
+
+            // watch for changes in the selected node and update the chart data
+            submodelElementData() {
+                // console.log('submodelElementData changed: ', this.submodelElementData);
+                this.initChart();
+            },
+        },
+
+        mounted() {
+            this.$nextTick(() => {
+                const chart = (this.$refs.areachart as any).chart;
+                if (chart && this.submodelElementData && Object.keys(this.submodelElementData).length > 0) {
+                    // console.log('Chart has rendered')
+                    // apply the theme on component mount
+                    this.applyTheme();
+                    // append the series to the chart
+                    this.initChart();
+                }
+            });
+        },
+
         methods: {
             initChart() {
                 // Check if a Node is selected
diff --git a/aas-web-ui/src/components/SubmodelPlugins/PDFPreview.vue b/aas-web-ui/src/components/SubmodelPlugins/PDFPreview.vue
index 58b25fc1..3fb3a933 100644
--- a/aas-web-ui/src/components/SubmodelPlugins/PDFPreview.vue
+++ b/aas-web-ui/src/components/SubmodelPlugins/PDFPreview.vue
@@ -22,15 +22,15 @@
 <script lang="ts">
     import { defineComponent } from 'vue';
     import { useTheme } from 'vuetify';
-    import { useNavigationStore } from '@/store/NavigationStore';
-    import { useAASStore } from '@/store/AASDataStore';
     import RequestHandling from '@/mixins/RequestHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
+    import { useAASStore } from '@/store/AASDataStore';
+    import { useNavigationStore } from '@/store/NavigationStore';
 
     export default defineComponent({
         name: 'PDFPreview',
-        props: ['submodelElementData'],
         mixins: [RequestHandling, SubmodelElementHandling],
+        props: ['submodelElementData'],
 
         setup() {
             const theme = useTheme();
@@ -53,15 +53,11 @@
             };
         },
 
-        mounted() {
-            this.Base64PDF = '';
-            this.pdfUrl = '';
-            if (this.submodelElementData.modelType == 'File') {
-                // console.log('SubmodelElementData: ', this.submodelElementData);
-                this.getPDFBlob();
-            } else if (this.submodelElementData.modelType == 'Blob') {
-                this.getDecodedPDFBlob();
-            }
+        computed: {
+            // Get the selected Treeview Node (SubmodelElement) from the store
+            SelectedNode() {
+                return this.aasStore.getSelectedNode;
+            },
         },
 
         watch: {
@@ -77,11 +73,15 @@
             },
         },
 
-        computed: {
-            // Get the selected Treeview Node (SubmodelElement) from the store
-            SelectedNode() {
-                return this.aasStore.getSelectedNode;
-            },
+        mounted() {
+            this.Base64PDF = '';
+            this.pdfUrl = '';
+            if (this.submodelElementData.modelType == 'File') {
+                // console.log('SubmodelElementData: ', this.submodelElementData);
+                this.getPDFBlob();
+            } else if (this.submodelElementData.modelType == 'Blob') {
+                this.getDecodedPDFBlob();
+            }
         },
 
         methods: {
diff --git a/aas-web-ui/src/components/SubmodelPlugins/TechnicalData.vue b/aas-web-ui/src/components/SubmodelPlugins/TechnicalData.vue
index 49ae98e6..24763d04 100644
--- a/aas-web-ui/src/components/SubmodelPlugins/TechnicalData.vue
+++ b/aas-web-ui/src/components/SubmodelPlugins/TechnicalData.vue
@@ -17,7 +17,7 @@
             <v-expansion-panel>
                 <v-expansion-panel-title>
                     <v-list-item class="pa-0">
-                        <template v-slot:prepend>
+                        <template #prepend>
                             <v-icon size="small">mdi-file-document-outline</v-icon>
                         </template>
                         <v-list-item-title>{{ 'General Information' }}</v-list-item-title>
@@ -87,7 +87,7 @@
             <v-expansion-panel>
                 <v-expansion-panel-title>
                     <v-list-item class="pa-0">
-                        <template v-slot:prepend>
+                        <template #prepend>
                             <v-icon size="small">mdi-package-variant-closed</v-icon>
                         </template>
                         <v-list-item-title>{{ 'Product Classifications' }}</v-list-item-title>
@@ -141,7 +141,7 @@
             <v-expansion-panel>
                 <v-expansion-panel-title>
                     <v-list-item class="pa-0">
-                        <template v-slot:prepend>
+                        <template #prepend>
                             <v-icon size="small">mdi-cog-outline</v-icon>
                         </template>
                         <v-list-item-title>{{ 'Technical Properties' }}</v-list-item-title>
@@ -149,14 +149,14 @@
                 </v-expansion-panel-title>
                 <v-divider v-if="panel.includes(2)"></v-divider>
                 <v-expansion-panel-text>
-                    <GenericDataVisu class="mt-3" :submodelElementData="technicalProperties"></GenericDataVisu>
+                    <GenericDataVisu class="mt-3" :submodel-element-data="technicalProperties"></GenericDataVisu>
                 </v-expansion-panel-text>
             </v-expansion-panel>
             <!-- Further Information -->
             <v-expansion-panel>
                 <v-expansion-panel-title>
                     <v-list-item class="pa-0">
-                        <template v-slot:prepend>
+                        <template #prepend>
                             <v-icon size="small">mdi-information-outline</v-icon>
                         </template>
                         <v-list-item-title>{{ 'Further Information' }}</v-list-item-title>
@@ -214,17 +214,14 @@
 <script lang="ts">
     import { defineComponent } from 'vue';
     import { useTheme } from 'vuetify';
-    import { useAASStore } from '@/store/AASDataStore';
+    import GenericDataVisu from '@/components/UIComponents/GenericDataVisu.vue';
     import RequestHandling from '@/mixins/RequestHandling';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
-
-    import GenericDataVisu from '@/components/UIComponents/GenericDataVisu.vue';
+    import { useAASStore } from '@/store/AASDataStore';
 
     export default defineComponent({
         name: 'TechnicalData',
         components: {
-            RequestHandling, // Mixin to handle the requests to the AASDataStore
-
             GenericDataVisu,
         },
         mixins: [RequestHandling, SubmodelElementHandling],
@@ -254,10 +251,6 @@
             };
         },
 
-        mounted() {
-            this.initTechnicalData();
-        },
-
         computed: {
             // Get the selected Treeview Node (SubmodelElement) from the store
             SelectedNode() {
@@ -265,6 +258,10 @@
             },
         },
 
+        mounted() {
+            this.initTechnicalData();
+        },
+
         methods: {
             async initTechnicalData() {
                 this.loading = true;
diff --git a/aas-web-ui/src/components/SubmodelPlugins/TimeSeriesData.vue b/aas-web-ui/src/components/SubmodelPlugins/TimeSeriesData.vue
index d13c4420..f626b2fd 100644
--- a/aas-web-ui/src/components/SubmodelPlugins/TimeSeriesData.vue
+++ b/aas-web-ui/src/components/SubmodelPlugins/TimeSeriesData.vue
@@ -1,17 +1,17 @@
 <template>
     <v-container fluid class="pa-0">
         <!-- Header -->
-        <v-card class="mb-4" v-if="!hideSettings">
+        <v-card v-if="!hideSettings" class="mb-4">
             <v-card-title>
                 <div class="text-subtitle-1">{{ 'Time Series Data:' }}</div>
             </v-card-title>
         </v-card>
         <!-- Data Preview Config -->
-        <v-card class="mb-4" v-if="!hideSettings || editDialog">
+        <v-card v-if="!hideSettings || editDialog" class="mb-4">
             <!-- Title -->
-            <v-list nav class="py-0" v-if="!hideSettings || editDialog">
+            <v-list v-if="!hideSettings || editDialog" nav class="py-0">
                 <v-list-item class="pb-0">
-                    <template v-slot:title>
+                    <template #title>
                         <div class="text-subtitle-2">{{ 'Preview Configuration: ' }}</div>
                     </template>
                 </v-list-item>
@@ -20,6 +20,7 @@
             <v-card-text class="pt-1">
                 <!-- Segment Selection -->
                 <v-select
+                    v-model="selectedSegment"
                     variant="outlined"
                     density="compact"
                     clearable
@@ -28,12 +29,12 @@
                     item-title="idShort"
                     item-value="idShort"
                     return-object
-                    v-model="selectedSegment"
-                    @update:modelValue="emitSegment"></v-select>
+                    @update:model-value="emitSegment"></v-select>
                 <!-- Record Selection -->
                 <v-row>
                     <v-col cols="12" md="6">
                         <v-select
+                            v-model="timeVariable"
                             variant="outlined"
                             density="compact"
                             clearable
@@ -42,11 +43,11 @@
                             item-title="idShort"
                             item-value="idShort"
                             return-object
-                            v-model="timeVariable"
-                            @update:modelValue="emitTimeValue"></v-select>
+                            @update:model-value="emitTimeValue"></v-select>
                     </v-col>
                     <v-col cols="12" md="6">
                         <v-select
+                            v-model="yVariables"
                             variant="outlined"
                             density="compact"
                             clearable
@@ -56,46 +57,45 @@
                             item-value="idShort"
                             return-object
                             multiple
-                            v-model="yVariables"
-                            @update:modelValue="emitYValue"></v-select>
+                            @update:model-value="emitYValue"></v-select>
                     </v-col>
                 </v-row>
                 <!-- API Token -->
                 <v-text-field
                     v-if="segmentType == 'LinkedSegment' && showTokenInput"
+                    v-model="apiToken"
                     variant="outlined"
                     density="compact"
                     clearable
                     label="API Token"
-                    hide-details
-                    v-model="apiToken"></v-text-field>
+                    hide-details></v-text-field>
             </v-card-text>
             <v-divider></v-divider>
             <v-list nav class="pr-2 pt-0">
                 <v-list-item>
-                    <template v-slot:append>
+                    <template #append>
                         <v-btn
                             v-if="segmentType == 'LinkedSegment'"
-                            @click="fetchLinkedData()"
                             size="small"
                             class="text-buttonText"
                             color="primary"
+                            @click="fetchLinkedData()"
                             >Fetch Data</v-btn
                         >
                         <v-btn
                             v-if="segmentType == 'InternalSegment'"
-                            @click="fetchInternalData()"
                             size="small"
                             class="text-buttonText"
                             color="primary"
+                            @click="fetchInternalData()"
                             >Fetch Data</v-btn
                         >
                         <v-btn
                             v-if="segmentType == 'ExternalSegment'"
-                            @click="fetchExternalData()"
                             size="small"
                             class="text-buttonText"
                             color="primary"
+                            @click="fetchExternalData()"
                             >Fetch Data</v-btn
                         >
                     </template>
@@ -105,20 +105,20 @@
         <!-- Data Preview Chart -->
         <v-card :flat="hideSettings">
             <!-- Title -->
-            <v-list nav class="py-0" v-if="!hideSettings || editDialog">
+            <v-list v-if="!hideSettings || editDialog" nav class="py-0">
                 <v-list-item>
-                    <template v-slot:title>
+                    <template #title>
                         <div class="text-subtitle-2">{{ 'Preview Chart: ' }}</div>
                     </template>
-                    <template v-slot:append>
+                    <template #append>
                         <v-btn
                             v-if="selectedChartType && !hideSettings"
                             color="primary"
                             class="text-buttonText"
                             size="small"
                             variant="elevated"
-                            @click="createObject()"
                             append-icon="mdi-plus"
+                            @click="createObject()"
                             >Dashboard</v-btn
                         >
                     </template>
@@ -128,6 +128,7 @@
                 <!-- Chart Type Selection -->
                 <v-select
                     v-if="!hideSettings || editDialog"
+                    v-model="selectedChartType"
                     variant="outlined"
                     density="compact"
                     clearable
@@ -136,54 +137,53 @@
                     item-title="name"
                     item-value="name"
                     return-object
-                    v-model="selectedChartType"
-                    @update:modelValue="clearChartOptions"></v-select>
+                    @update:model-value="clearChartOptions"></v-select>
                 <!-- Chart Preview -->
                 <LineChart
                     v-if="selectedChartType && selectedChartType.id == 1"
-                    :chartData="timeSeriesValues"
-                    :timeVariable="timeVariable"
-                    :yVariables="yVariables"
-                    :chartOptionsExternal="chartOptions"
-                    :editDialog="editDialog"
-                    @chartOptions="getChartOptions"></LineChart>
+                    :chart-data="timeSeriesValues"
+                    :time-variable="timeVariable"
+                    :y-variables="yVariables"
+                    :chart-options-external="chartOptions"
+                    :edit-dialog="editDialog"
+                    @chart-options="getChartOptions"></LineChart>
                 <AreaChart
                     v-if="selectedChartType && selectedChartType.id == 2"
-                    :chartData="timeSeriesValues"
-                    :timeVariable="timeVariable"
-                    :yVariables="yVariables"
-                    :chartOptionsExternal="chartOptions"
-                    :editDialog="editDialog"
-                    @chartOptions="getChartOptions"></AreaChart>
+                    :chart-data="timeSeriesValues"
+                    :time-variable="timeVariable"
+                    :y-variables="yVariables"
+                    :chart-options-external="chartOptions"
+                    :edit-dialog="editDialog"
+                    @chart-options="getChartOptions"></AreaChart>
                 <ScatterChart
                     v-if="selectedChartType && selectedChartType.id == 3"
-                    :chartData="timeSeriesValues"
-                    :timeVariable="timeVariable"
-                    :yVariables="yVariables"
-                    :chartOptionsExternal="chartOptions"
-                    :editDialog="editDialog"
-                    @chartOptions="getChartOptions"></ScatterChart>
+                    :chart-data="timeSeriesValues"
+                    :time-variable="timeVariable"
+                    :y-variables="yVariables"
+                    :chart-options-external="chartOptions"
+                    :edit-dialog="editDialog"
+                    @chart-options="getChartOptions"></ScatterChart>
                 <Histogram
                     v-if="selectedChartType && selectedChartType.id == 4"
-                    :chartData="timeSeriesValues"
-                    :timeVariable="timeVariable"
-                    :yVariables="yVariables"
-                    :chartOptionsExternal="chartOptions"
-                    :editDialog="editDialog"
-                    @chartOptions="getChartOptions"></Histogram>
+                    :chart-data="timeSeriesValues"
+                    :time-variable="timeVariable"
+                    :y-variables="yVariables"
+                    :chart-options-external="chartOptions"
+                    :edit-dialog="editDialog"
+                    @chart-options="getChartOptions"></Histogram>
                 <Gauge
                     v-if="selectedChartType && selectedChartType.id == 5"
-                    :chartData="timeSeriesValues"
-                    :timeVariable="timeVariable"
-                    :yVariables="yVariables"
-                    :chartOptionsExternal="chartOptions"
-                    :editDialog="editDialog"
-                    @chartOptions="getChartOptions"></Gauge>
+                    :chart-data="timeSeriesValues"
+                    :time-variable="timeVariable"
+                    :y-variables="yVariables"
+                    :chart-options-external="chartOptions"
+                    :edit-dialog="editDialog"
+                    @chart-options="getChartOptions"></Gauge>
                 <DisplayField
                     v-if="selectedChartType && selectedChartType.id == 6"
-                    :chartData="timeSeriesValues"
-                    :timeVariable="timeVariable"
-                    :yVariables="yVariables"></DisplayField>
+                    :chart-data="timeSeriesValues"
+                    :time-variable="timeVariable"
+                    :y-variables="yVariables"></DisplayField>
             </v-card-text>
         </v-card>
     </v-container>
@@ -192,27 +192,22 @@
 <script lang="ts">
     import { defineComponent } from 'vue';
     import { useTheme } from 'vuetify';
-    import { useAASStore } from '@/store/AASDataStore';
-    import { useEnvStore } from '@/store/EnvironmentStore';
-    import RequestHandling from '@/mixins/RequestHandling';
-    import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
-    import DashboardHandling from '@/mixins/DashboardHandling';
-
+    import AreaChart from '@/components/Widgets/AreaChart.vue';
+    import DisplayField from '@/components/Widgets/DisplayField.vue';
+    import Gauge from '@/components/Widgets/Gauge.vue';
+    import Histogram from '@/components/Widgets/Histogram.vue';
     // Widget imports
     import LineChart from '@/components/Widgets/LineChart.vue';
-    import AreaChart from '@/components/Widgets/AreaChart.vue';
     import ScatterChart from '@/components/Widgets/ScatterChart.vue';
-    import Histogram from '@/components/Widgets/Histogram.vue';
-    import Gauge from '@/components/Widgets/Gauge.vue';
-    import DisplayField from '@/components/Widgets/DisplayField.vue';
+    import DashboardHandling from '@/mixins/DashboardHandling';
+    import RequestHandling from '@/mixins/RequestHandling';
+    import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
+    import { useAASStore } from '@/store/AASDataStore';
+    import { useEnvStore } from '@/store/EnvironmentStore';
 
     export default defineComponent({
         name: 'TimeSeriesData',
         components: {
-            RequestHandling, // Mixin to handle the requests to the AAS
-            DashboardHandling,
-
-            // Widgets
             LineChart,
             AreaChart,
             ScatterChart,
@@ -244,7 +239,7 @@
                 records: [] as Array<any>, // Array to store the records of the time series smt
                 timeVariable: null as any, // Object to store the selected time variable of the time series smt
                 yVariables: [] as Array<any>, // Array to store the selected y variables of the time series smt
-                yVariableTemplate: '{{y-value}}' as String, // String that is used to inject y-variable in linkedSeg Query
+                yVariableTemplate: '{{y-value}}' as string, // String that is used to inject y-variable in linkedSeg Query
                 apiToken: '', // API Token for the Time Series Database
                 showTokenInput: true, // Boolean to show the API Token Input
                 timeSeriesValues: [] as Array<any>, // Array to store the values of the time series smt
@@ -261,28 +256,6 @@
             };
         },
 
-        mounted() {
-            this.initializeTimeSeriesData(); // initialize TimeSeriesData Plugin
-            this.initDashboardTSD();
-            const influxDBToken = this.envStore.getEnvInfluxdbToken;
-            if (influxDBToken && influxDBToken !== '') {
-                this.apiToken = influxDBToken;
-                this.showTokenInput = false;
-            }
-        },
-
-        watch: {
-            loadTrigger() {
-                this.initializeTimeSeriesData();
-                this.initDashboardTSD();
-                const influxDBToken = this.envStore.getEnvInfluxdbToken;
-                if (influxDBToken && influxDBToken !== '') {
-                    this.apiToken = influxDBToken;
-                    this.showTokenInput = false;
-                }
-            },
-        },
-
         computed: {
             // get selected AAS from Store
             SelectedAAS() {
@@ -323,6 +296,28 @@
             },
         },
 
+        watch: {
+            loadTrigger() {
+                this.initializeTimeSeriesData();
+                this.initDashboardTSD();
+                const influxDBToken = this.envStore.getEnvInfluxdbToken;
+                if (influxDBToken && influxDBToken !== '') {
+                    this.apiToken = influxDBToken;
+                    this.showTokenInput = false;
+                }
+            },
+        },
+
+        mounted() {
+            this.initializeTimeSeriesData(); // initialize TimeSeriesData Plugin
+            this.initDashboardTSD();
+            const influxDBToken = this.envStore.getEnvInfluxdbToken;
+            if (influxDBToken && influxDBToken !== '') {
+                this.apiToken = influxDBToken;
+                this.showTokenInput = false;
+            }
+        },
+
         methods: {
             // Function to initialize the TimeSeriesData Plugin
             initializeTimeSeriesData() {
@@ -496,7 +491,7 @@
                 let currentTable = null as any;
                 let headerLine = '';
 
-                lines.forEach((line: any, index: number) => {
+                lines.forEach((line: any) => {
                     const columns = line.split(',');
 
                     // Skip the header line (because it's not including data)
@@ -570,7 +565,7 @@
                 return columns[columns.length - 1];
             },
 
-            processDataset(headerLine: String, datasetLines: any) {
+            processDataset(headerLine: string, datasetLines: any) {
                 // console.log('Dataset Lines: ', datasetLines, ' Header Line: ', headerLine)
                 const headers = headerLine.split(',');
                 const valueIndex = headers.indexOf('_value');
diff --git a/aas-web-ui/src/components/SubmodelPlugins/_SubmodelEntrypoint.vue b/aas-web-ui/src/components/SubmodelPlugins/_SubmodelEntrypoint.vue
index cfbcfb63..fa240abc 100644
--- a/aas-web-ui/src/components/SubmodelPlugins/_SubmodelEntrypoint.vue
+++ b/aas-web-ui/src/components/SubmodelPlugins/_SubmodelEntrypoint.vue
@@ -12,14 +12,14 @@
             ">
             <HTWFuehrungskomponente
                 v-if="checkSemanticId(submodelElementData, 'http://htw-berlin.de/smc_statemachine')"
-                :submodelElementData="submodelElementData"
-                :selectedNode="selectedNode"></HTWFuehrungskomponente>
+                :submodel-element-data="submodelElementData"
+                :selected-node="selectedNode"></HTWFuehrungskomponente>
             <DigitalNameplate
                 v-else-if="checkSemanticId(submodelElementData, 'https://admin-shell.io/zvei/nameplate/2/0/Nameplate')"
-                :submodelElementData="submodelElementData"></DigitalNameplate>
+                :submodel-element-data="submodelElementData"></DigitalNameplate>
             <TimeSeriesData
                 v-else-if="checkSemanticId(submodelElementData, 'https://admin-shell.io/idta/TimeSeries/1/1')"
-                :submodelElementData="submodelElementData"></TimeSeriesData>
+                :submodel-element-data="submodelElementData"></TimeSeriesData>
             <BillsOfMaterial
                 v-else-if="
                     checkSemanticId(
@@ -31,10 +31,10 @@
                         'https://admin-shell.io/idta/HierarchicalStructures/1/1/Submodel'
                     )
                 "
-                :submodelElementData="submodelElementData"></BillsOfMaterial>
+                :submodel-element-data="submodelElementData"></BillsOfMaterial>
             <HandoverDocumentation
                 v-else-if="checkSemanticId(submodelElementData, '0173-1#01-AHF578#001')"
-                :submodelElementData="submodelElementData"></HandoverDocumentation>
+                :submodel-element-data="submodelElementData"></HandoverDocumentation>
             <ContactInformation
                 v-else-if="
                     checkSemanticId(
@@ -42,24 +42,24 @@
                         'https://admin-shell.io/zvei/nameplate/1/0/ContactInformations'
                     )
                 "
-                :submodelElementData="submodelElementData"></ContactInformation>
+                :submodel-element-data="submodelElementData"></ContactInformation>
             <TechnicalData
                 v-else-if="
                     checkSemanticId(submodelElementData, 'https://admin-shell.io/ZVEI/TechnicalData/Submodel/1/2')
                 "
-                :submodelElementData="submodelElementData"></TechnicalData>
+                :submodel-element-data="submodelElementData"></TechnicalData>
             <JSONArrayProperty
                 v-else-if="checkSemanticId(submodelElementData, 'http://iese.fraunhofer.de/prop_jsonarray')"
-                :submodelElementData="submodelElementData"></JSONArrayProperty>
+                :submodel-element-data="submodelElementData"></JSONArrayProperty>
             <GenericDataVisu
                 v-else-if="viewerMode"
-                :submodelElementData="submodelElementData.submodelElements"></GenericDataVisu>
+                :submodel-element-data="submodelElementData.submodelElements"></GenericDataVisu>
             <!-- Plugins added by the user are dynamically registered here -->
             <component
+                :is="plugin.name"
                 v-for="(plugin, i) in filteredPlugins"
                 :key="i"
-                :is="plugin.name"
-                :submodelElementData="submodelElementData"></component>
+                :submodel-element-data="submodelElementData"></component>
         </template>
         <template
             v-else-if="
@@ -67,7 +67,7 @@
             ">
             <GenericDataVisu
                 v-if="viewerMode"
-                :submodelElementData="submodelElementData.submodelElements"></GenericDataVisu>
+                :submodel-element-data="submodelElementData.submodelElements"></GenericDataVisu>
         </template>
         <!-- List of all File/Blob-Plugins matched by their contentType -->
         <template
@@ -79,10 +79,10 @@
             ">
             <ImagePreview
                 v-if="submodelElementData.contentType && submodelElementData.contentType.includes('image')"
-                :submodelElementData="submodelElementData"></ImagePreview>
+                :submodel-element-data="submodelElementData"></ImagePreview>
             <PDFPreview
                 v-if="submodelElementData.contentType && submodelElementData.contentType.includes('pdf')"
-                :submodelElementData="submodelElementData"></PDFPreview>
+                :submodel-element-data="submodelElementData"></PDFPreview>
             <CADPreview
                 v-if="
                     submodelElementData.contentType &&
@@ -92,7 +92,7 @@
                         submodelElementData.contentType.includes('obj') ||
                         submodelElementData.contentType.includes('gltf'))
                 "
-                :submodelElementData="submodelElementData"></CADPreview>
+                :submodel-element-data="submodelElementData"></CADPreview>
         </template>
     </v-container>
 </template>
@@ -100,24 +100,21 @@
 <script lang="ts">
     import { defineComponent } from 'vue';
     import { useRoute } from 'vue-router';
-    import { useNavigationStore } from '@/store/NavigationStore';
-    import { useAASStore } from '@/store/AASDataStore';
+    import GenericDataVisu from '@/components/UIComponents/GenericDataVisu.vue';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
-
-    import HTWFuehrungskomponente from './HTWFuehrungskomponente.vue';
-    import DigitalNameplate from './DigitalNameplate.vue';
-    import TimeSeriesData from './TimeSeriesData.vue';
+    import { useAASStore } from '@/store/AASDataStore';
+    import { useNavigationStore } from '@/store/NavigationStore';
     import BillsOfMaterial from './BillsOfMaterial.vue';
-    import HandoverDocumentation from './HandoverDocumentation.vue';
+    import CADPreview from './CADPreview.vue';
     import ContactInformation from './ContactInformation.vue';
-    import TechnicalData from './TechnicalData.vue';
-    import JSONArrayProperty from './JSONArrayProperty.vue';
-
-    import GenericDataVisu from '@/components/UIComponents/GenericDataVisu.vue';
-
+    import DigitalNameplate from './DigitalNameplate.vue';
+    import HandoverDocumentation from './HandoverDocumentation.vue';
+    import HTWFuehrungskomponente from './HTWFuehrungskomponente.vue';
     import ImagePreview from './ImagePreview.vue';
+    import JSONArrayProperty from './JSONArrayProperty.vue';
     import PDFPreview from './PDFPreview.vue';
-    import CADPreview from './CADPreview.vue';
+    import TechnicalData from './TechnicalData.vue';
+    import TimeSeriesData from './TimeSeriesData.vue';
 
     export default defineComponent({
         name: 'SubmodelEntrypoint',
diff --git a/aas-web-ui/src/components/UIComponents/AssetInformation.vue b/aas-web-ui/src/components/UIComponents/AssetInformation.vue
index f9cdfdac..dd9ff24b 100644
--- a/aas-web-ui/src/components/UIComponents/AssetInformation.vue
+++ b/aas-web-ui/src/components/UIComponents/AssetInformation.vue
@@ -3,10 +3,10 @@
         <v-list lines="one" nav class="bg-detailsCard">
             <IdentificationElement
                 class="mb-2"
-                :identificationObject="assetInfo"
-                :modelType="assetObject.assetKind"
-                :idType="'Global Asset ID'"
-                :nameType="'assetType'"></IdentificationElement>
+                :identification-object="assetInfo"
+                :model-type="assetObject.assetKind"
+                :id-type="'Global Asset ID'"
+                :name-type="'assetType'"></IdentificationElement>
             <v-img
                 v-if="assetObject.defaultThumbnail"
                 :src="assetObject.defaultThumbnail.path"
@@ -20,15 +20,12 @@
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-
     import IdentificationElement from '@/components/UIComponents/IdentificationElement.vue';
-    import DescriptionElement from '@/components/UIComponents/DescriptionElement.vue';
 
     export default defineComponent({
         name: 'AssetInformation',
         components: {
             IdentificationElement,
-            DescriptionElement,
         },
         props: ['assetObject'],
 
diff --git a/aas-web-ui/src/components/UIComponents/CollectionWrapper.vue b/aas-web-ui/src/components/UIComponents/CollectionWrapper.vue
index 6b0e1c5a..a069909f 100644
--- a/aas-web-ui/src/components/UIComponents/CollectionWrapper.vue
+++ b/aas-web-ui/src/components/UIComponents/CollectionWrapper.vue
@@ -4,22 +4,22 @@
             <v-expansion-panel v-for="SubmodelElement in SubmodelElementObject.children" :key="SubmodelElement.id">
                 <v-expansion-panel-title class="pl-0 py-0">
                     <IdentificationElement
-                        :identificationObject="SubmodelElement"
-                        :modelType="SubmodelElement.modelType"
-                        :idType="'Identification (ID)'"
-                        :nameType="'idShort'"></IdentificationElement>
+                        :identification-object="SubmodelElement"
+                        :model-type="SubmodelElement.modelType"
+                        :id-type="'Identification (ID)'"
+                        :name-type="'idShort'"></IdentificationElement>
                 </v-expansion-panel-title>
                 <v-expansion-panel-text>
                     <!-- Display NameplateElement directly when it is no SubmodelElementCollection -->
                     <SubmodelElementWrapper
                         v-if="SubmodelElement.modelType != 'SubmodelElementCollection'"
                         :SubmodelElementObject="SubmodelElement"
-                        @updateValue="updateCollectionValue"></SubmodelElementWrapper>
+                        @update-value="updateCollectionValue"></SubmodelElementWrapper>
                     <!-- Display NameplateElement as SubmodelElementCollection when it is a SubmodelElementCollection -->
                     <CollectionWrapper
                         v-else
                         :SubmodelElementObject="SubmodelElement"
-                        @updateValue="updateCollectionValue"></CollectionWrapper>
+                        @update-value="updateCollectionValue"></CollectionWrapper>
                 </v-expansion-panel-text>
             </v-expansion-panel>
         </v-expansion-panels>
@@ -28,9 +28,7 @@
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-
     import IdentificationElement from './IdentificationElement.vue';
-    import DescriptionElement from './DescriptionElement.vue';
     import SubmodelElementWrapper from './SubmodelElementWrapper.vue';
     // import CollectionWrapper from './CollectionWrapper.vue';
 
@@ -39,7 +37,6 @@
         components: {
             // UI Components
             IdentificationElement,
-            DescriptionElement,
             SubmodelElementWrapper,
         },
         props: ['SubmodelElementObject'],
@@ -48,11 +45,11 @@
             return {};
         },
 
-        mounted() {},
+        computed: {},
 
         watch: {},
 
-        computed: {},
+        mounted() {},
 
         methods: {
             // Function to update the value of a property
diff --git a/aas-web-ui/src/components/UIComponents/ConceptDescription.vue b/aas-web-ui/src/components/UIComponents/ConceptDescription.vue
index 4ab4b77e..b3adcfd1 100644
--- a/aas-web-ui/src/components/UIComponents/ConceptDescription.vue
+++ b/aas-web-ui/src/components/UIComponents/ConceptDescription.vue
@@ -3,10 +3,10 @@
         <v-list nav class="pt-0 px-0">
             <!-- ConceptDescription Identification -->
             <IdentificationElement
-                :identificationObject="conceptDescriptionObject"
-                :modelType="conceptDescriptionObject.modelType"
-                :idType="'Identification (ID)'"
-                :nameType="'idShort'"
+                :identification-object="conceptDescriptionObject"
+                :model-type="conceptDescriptionObject.modelType"
+                :id-type="'Identification (ID)'"
+                :name-type="'idShort'"
                 :path="conceptDescriptionObject.path"></IdentificationElement>
             <v-divider
                 v-if="conceptDescriptionObject.displayName && conceptDescriptionObject.displayName.length > 0"
@@ -14,8 +14,8 @@
             <!-- ConceptDescription DisplayName -->
             <DisplayNameElement
                 v-if="conceptDescriptionObject.displayName && conceptDescriptionObject.displayName.length > 0"
-                :displayNameObject="conceptDescriptionObject.displayName"
-                :displayNameTitle="'DisplayName'"
+                :display-name-object="conceptDescriptionObject.displayName"
+                :display-name-title="'DisplayName'"
                 :small="false"></DisplayNameElement>
             <v-divider
                 v-if="conceptDescriptionObject.description && conceptDescriptionObject.description.length > 0"
@@ -23,8 +23,8 @@
             <!-- ConceptDescription Description -->
             <DescriptionElement
                 v-if="conceptDescriptionObject.description && conceptDescriptionObject.description.length > 0"
-                :descriptionObject="conceptDescriptionObject.description"
-                :descriptionTitle="'Description'"
+                :description-object="conceptDescriptionObject.description"
+                :description-title="'Description'"
                 :small="false"></DescriptionElement>
             <v-divider
                 v-if="
@@ -40,11 +40,11 @@
             "
             class="mt-2"></v-divider>
         <v-list
-            nav
             v-if="
                 conceptDescriptionObject.embeddedDataSpecifications &&
                 conceptDescriptionObject.embeddedDataSpecifications.length > 0
-            ">
+            "
+            nav>
             <v-card
                 v-for="(embeddedDataSpecification, i) in conceptDescriptionObject.embeddedDataSpecifications"
                 :key="i"
@@ -58,14 +58,14 @@
                             embeddedDataSpecification.dataSpecification.keys &&
                             embeddedDataSpecification.dataSpecification.keys.length > 0
                         "
-                        :semanticIdObject="embeddedDataSpecification.dataSpecification"
-                        :semanticTitle="'Data Specification'"
+                        :semantic-id-object="embeddedDataSpecification.dataSpecification"
+                        :semantic-title="'Data Specification'"
                         class="mb-2"></SemanticID>
                     <v-divider v-if="embeddedDataSpecification.dataSpecificationContent"></v-divider>
                     <!-- dataSpecificationContent -->
                     <DataSpecificationContent
                         v-if="embeddedDataSpecification.dataSpecificationContent"
-                        :dataSpecificationObject="
+                        :data-specification-object="
                             embeddedDataSpecification.dataSpecificationContent
                         "></DataSpecificationContent>
                 </v-list>
@@ -76,12 +76,10 @@
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-
     import DataSpecificationContent from './DataSpecificationContent.vue';
-
-    import IdentificationElement from './IdentificationElement.vue';
-    import DisplayNameElement from './DisplayNameElement.vue';
     import DescriptionElement from './DescriptionElement.vue';
+    import DisplayNameElement from './DisplayNameElement.vue';
+    import IdentificationElement from './IdentificationElement.vue';
     import SemanticID from './SemanticID.vue';
 
     export default defineComponent({
diff --git a/aas-web-ui/src/components/UIComponents/DataSpecificationContent.vue b/aas-web-ui/src/components/UIComponents/DataSpecificationContent.vue
index 54a794d3..9b789228 100644
--- a/aas-web-ui/src/components/UIComponents/DataSpecificationContent.vue
+++ b/aas-web-ui/src/components/UIComponents/DataSpecificationContent.vue
@@ -2,60 +2,58 @@
     <v-container fluid class="pa-0">
         <v-list-item>
             <!-- Title -->
-            <template v-slot:title>
-                <div v-html="'Data Specification Content:'" class="text-subtitle-2 mt-2"></div>
+            <template #title>
+                <div class="text-subtitle-2 mt-2" v-html="'Data Specification Content:'"></div>
             </template>
             <!-- Content List -->
             <!-- dataType -->
-            <v-list-item-title class="pt-3 pl-2" v-if="dataSpecificationObject.dataType">
+            <v-list-item-title v-if="dataSpecificationObject.dataType" class="pt-3 pl-2">
                 <span class="text-caption">DataType: </span>
                 <span class="text-primary">{{ dataSpecificationObject.dataType }}</span>
             </v-list-item-title>
             <v-divider
-                class="mt-2"
-                v-if="dataSpecificationObject.definition && dataSpecificationObject.definition.length > 0"></v-divider>
+                v-if="dataSpecificationObject.definition && dataSpecificationObject.definition.length > 0"
+                class="mt-2"></v-divider>
             <!-- definition -->
             <DescriptionElement
                 v-if="dataSpecificationObject.definition && dataSpecificationObject.definition.length > 0"
-                :descriptionObject="dataSpecificationObject.definition"
-                :descriptionTitle="'Definition'"
+                :description-object="dataSpecificationObject.definition"
+                :description-title="'Definition'"
                 :small="true"></DescriptionElement>
             <v-divider
-                class="mt-2"
-                v-if="dataSpecificationObject.levelTypes && dataSpecificationObject.levelTypes.length > 0"></v-divider>
+                v-if="dataSpecificationObject.levelTypes && dataSpecificationObject.levelTypes.length > 0"
+                class="mt-2"></v-divider>
             <!-- levelTypes -->
             <!-- TODO: needs visual update -->
             <v-list-item-title
-                class="pt-2 pl-2"
-                v-if="dataSpecificationObject.levelTypes && dataSpecificationObject.levelTypes.length > 0">
+                v-if="dataSpecificationObject.levelTypes && dataSpecificationObject.levelTypes.length > 0"
+                class="pt-2 pl-2">
                 <div class="text-caption">LevelTypes:</div>
                 <span v-for="(levelType, i) in dataSpecificationObject.levelTypes" :key="i" class="text-primary">{{
                     levelType
                 }}</span>
             </v-list-item-title>
             <v-divider
-                class="mt-2"
-                v-if="
-                    dataSpecificationObject.preferredName && dataSpecificationObject.preferredName.length > 0
-                "></v-divider>
+                v-if="dataSpecificationObject.preferredName && dataSpecificationObject.preferredName.length > 0"
+                class="mt-2"></v-divider>
             <!-- preferredName -->
             <DescriptionElement
                 v-if="dataSpecificationObject.preferredName && dataSpecificationObject.preferredName.length > 0"
-                :descriptionObject="dataSpecificationObject.preferredName"
-                :descriptionTitle="'PreferredName'"
+                :description-object="dataSpecificationObject.preferredName"
+                :description-title="'PreferredName'"
                 :small="true"></DescriptionElement>
             <v-divider
-                class="mt-2"
-                v-if="dataSpecificationObject.shortName && dataSpecificationObject.shortName.length > 0"></v-divider>
+                v-if="dataSpecificationObject.shortName && dataSpecificationObject.shortName.length > 0"
+                class="mt-2"></v-divider>
             <!-- shortName -->
             <DescriptionElement
                 v-if="dataSpecificationObject.shortName && dataSpecificationObject.shortName.length > 0"
-                :descriptionObject="dataSpecificationObject.shortName"
-                :descriptionTitle="'ShortName'"
+                :description-object="dataSpecificationObject.shortName"
+                :description-title="'ShortName'"
                 :small="true"></DescriptionElement>
-            <v-divider class="mt-2" v-if="dataSpecificationObject.unit"></v-divider>
+            <v-divider v-if="dataSpecificationObject.unit" class="mt-2"></v-divider>
             <!-- unit -->
-            <v-list-item-title class="pt-2 pl-2" v-if="dataSpecificationObject.unit">
+            <v-list-item-title v-if="dataSpecificationObject.unit" class="pt-2 pl-2">
                 <span class="text-caption">Unit: </span>
                 <span class="text-primary">{{ dataSpecificationObject.unit }}</span>
             </v-list-item-title>
@@ -66,10 +64,10 @@
                         {{ unitId.value }}
                     </div>
                 </v-tooltip>
-                <template v-slot:title>
+                <template #title>
                     <span class="text-caption">{{ 'UnitId: ' }}</span>
                 </template>
-                <template v-slot:subtitle>
+                <template #subtitle>
                     <v-list-item-subtitle v-for="(unitId, i) in dataSpecificationObject.unitId.keys" :key="i">
                         <div class="pt-1">
                             <v-chip label size="x-small" border class="mr-2">{{ unitId.type }}</v-chip>
@@ -79,13 +77,13 @@
                 </template>
             </v-list-item>
             <v-divider
-                class="mt-2"
-                v-if="dataSpecificationObject.valueList && dataSpecificationObject.valueList.length > 0"></v-divider>
+                v-if="dataSpecificationObject.valueList && dataSpecificationObject.valueList.length > 0"
+                class="mt-2"></v-divider>
             <!-- valueList -->
             <!-- TODO: needs visual update -->
             <v-list-item-title
-                class="pt-2 pl-2"
-                v-if="dataSpecificationObject.valueList && dataSpecificationObject.valueList.length > 0">
+                v-if="dataSpecificationObject.valueList && dataSpecificationObject.valueList.length > 0"
+                class="pt-2 pl-2">
                 <div class="text-caption">ValueList:</div>
                 <span v-for="(valueList, i) in dataSpecificationObject.valueList" :key="i" class="text-primary">{{
                     valueList
@@ -97,13 +95,11 @@
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-    import SemanticID from './SemanticID.vue';
     import DescriptionElement from './DescriptionElement.vue';
 
     export default defineComponent({
         name: 'DataSpecificationContent',
         components: {
-            SemanticID,
             DescriptionElement,
         },
         props: ['dataSpecificationObject'],
@@ -112,11 +108,11 @@
             return {};
         },
 
-        mounted() {},
+        computed: {},
 
         watch: {},
 
-        computed: {},
+        mounted() {},
 
         methods: {},
     });
diff --git a/aas-web-ui/src/components/UIComponents/DescriptionElement.vue b/aas-web-ui/src/components/UIComponents/DescriptionElement.vue
index d55a4c39..e89567f1 100644
--- a/aas-web-ui/src/components/UIComponents/DescriptionElement.vue
+++ b/aas-web-ui/src/components/UIComponents/DescriptionElement.vue
@@ -9,11 +9,11 @@
                 </div>
             </v-tooltip>
             <!-- Description Title -->
-            <template v-slot:title>
+            <template #title>
                 <div
-                    v-html="descriptionTitle + ':'"
                     class="mt-2"
-                    :class="small ? 'text-caption' : 'text-subtitle-2 '"></div>
+                    :class="small ? 'text-caption' : 'text-subtitle-2 '"
+                    v-html="descriptionTitle + ':'"></div>
             </template>
             <!-- Descriptions List (different Languages) -->
             <v-list-item-subtitle v-for="(description, i) in descriptionObject" :key="i">
diff --git a/aas-web-ui/src/components/UIComponents/DisplayNameElement.vue b/aas-web-ui/src/components/UIComponents/DisplayNameElement.vue
index 010f73ad..5e7804c8 100644
--- a/aas-web-ui/src/components/UIComponents/DisplayNameElement.vue
+++ b/aas-web-ui/src/components/UIComponents/DisplayNameElement.vue
@@ -9,7 +9,7 @@
                 </div>
             </v-tooltip>
             <!-- DisplayName Title -->
-            <template v-slot:title>
+            <template #title>
                 <div class="mt-2" :class="small ? 'text-caption' : 'text-subtitle-2 '">
                     {{ displayNameTitle + ':' }}
                 </div>
diff --git a/aas-web-ui/src/components/UIComponents/GenericDataVisu.vue b/aas-web-ui/src/components/UIComponents/GenericDataVisu.vue
index 4557715e..c1cccf72 100644
--- a/aas-web-ui/src/components/UIComponents/GenericDataVisu.vue
+++ b/aas-web-ui/src/components/UIComponents/GenericDataVisu.vue
@@ -9,34 +9,36 @@
                 <v-expansion-panel-text>
                     <GenericDataVisu
                         v-if="Array.isArray(submodelElement.value) && submodelElement.value.length > 0"
-                        :submodelElementData="submodelElement.value"></GenericDataVisu>
+                        :submodel-element-data="submodelElement.value"></GenericDataVisu>
                     <v-list v-else nav class="px-4 pt-0 pb-0">
                         <!-- SubmodelELement Representation for different modelTypes -->
                         <Property
                             v-if="submodelElement.modelType === 'Property'"
-                            :propertyObject="submodelElement"></Property>
+                            :property-object="submodelElement"></Property>
                         <MultyLanguageProperty
                             v-else-if="submodelElement.modelType === 'MultiLanguageProperty'"
-                            :multiLanguagePropertyObject="submodelElement"></MultyLanguageProperty>
+                            :multi-language-property-object="submodelElement"></MultyLanguageProperty>
                         <Operation
                             v-else-if="submodelElement.modelType === 'Operation'"
-                            :operationObject="submodelElement"></Operation>
-                        <File v-else-if="submodelElement.modelType === 'File'" :fileObject="submodelElement"></File>
-                        <Blob v-else-if="submodelElement.modelType === 'Blob'" :blobObject="submodelElement"></Blob>
+                            :operation-object="submodelElement"></Operation>
+                        <File v-else-if="submodelElement.modelType === 'File'" :file-object="submodelElement"></File>
+                        <Blob v-else-if="submodelElement.modelType === 'Blob'" :blob-object="submodelElement"></Blob>
                         <ReferenceElement
                             v-else-if="submodelElement.modelType === 'ReferenceElement'"
-                            :referenceElementObject="submodelElement"></ReferenceElement>
-                        <Range v-else-if="submodelElement.modelType === 'Range'" :rangeObject="submodelElement"></Range>
+                            :reference-element-object="submodelElement"></ReferenceElement>
+                        <Range
+                            v-else-if="submodelElement.modelType === 'Range'"
+                            :range-object="submodelElement"></Range>
                         <Entity
                             v-else-if="submodelElement.modelType === 'Entity'"
-                            :entityObject="submodelElement"></Entity>
+                            :entity-object="submodelElement"></Entity>
                         <RelationshipElement
                             v-else-if="submodelElement.modelType === 'RelationshipElement'"
-                            :relationshipElementObject="submodelElement"></RelationshipElement>
+                            :relationship-element-object="submodelElement"></RelationshipElement>
                         <AnnotatedRelationshipElement
                             v-else-if="submodelElement.modelType === 'AnnotatedRelationshipElement'"
-                            :annotatedRelationshipElementObject="submodelElement"></AnnotatedRelationshipElement>
-                        <InvalidElement v-else :invalidElementObject="submodelElement"></InvalidElement>
+                            :annotated-relationship-element-object="submodelElement"></AnnotatedRelationshipElement>
+                        <InvalidElement v-else :invalid-element-object="submodelElement"></InvalidElement>
                     </v-list>
                 </v-expansion-panel-text>
             </v-expansion-panel>
@@ -47,37 +49,24 @@
 <script lang="ts">
     import { defineComponent } from 'vue';
     import { useTheme } from 'vuetify';
-    import { useAASStore } from '@/store/AASDataStore';
-    import RequestHandling from '@/mixins/RequestHandling';
-    import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
-
-    import IdentificationElement from '@/components/UIComponents/IdentificationElement.vue';
-    import DescriptionElement from '@/components/UIComponents/DescriptionElement.vue';
-
-    import SubmodelElementList from '@/components/SubmodelElements/SubmodelElementList.vue';
-    import Property from '@/components/SubmodelElements/Property.vue';
+    import AnnotatedRelationshipElement from '@/components/SubmodelElements/AnnotatedRelationshipElement.vue';
+    import Blob from '@/components/SubmodelElements/Blob.vue';
+    import Entity from '@/components/SubmodelElements/Entity.vue';
+    import File from '@/components/SubmodelElements/File.vue';
+    import InvalidElement from '@/components/SubmodelElements/InvalidElement.vue';
     import MultyLanguageProperty from '@/components/SubmodelElements/MultiLanguageProperty.vue';
     import Operation from '@/components/SubmodelElements/Operation.vue';
-    import File from '@/components/SubmodelElements/File.vue';
-    import Blob from '@/components/SubmodelElements/Blob.vue';
-    import ReferenceElement from '@/components/SubmodelElements/ReferenceElement.vue';
+    import Property from '@/components/SubmodelElements/Property.vue';
     import Range from '@/components/SubmodelElements/Range.vue';
-    import Entity from '@/components/SubmodelElements/Entity.vue';
+    import ReferenceElement from '@/components/SubmodelElements/ReferenceElement.vue';
     import RelationshipElement from '@/components/SubmodelElements/RelationshipElement.vue';
-    import AnnotatedRelationshipElement from '@/components/SubmodelElements/AnnotatedRelationshipElement.vue';
-    import InvalidElement from '@/components/SubmodelElements/InvalidElement.vue';
+    import RequestHandling from '@/mixins/RequestHandling';
+    import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
+    import { useAASStore } from '@/store/AASDataStore';
 
     export default defineComponent({
         name: 'GenericDataVisu',
         components: {
-            RequestHandling, // Mixin to handle the requests to the AAS
-
-            // UI Components
-            IdentificationElement,
-            DescriptionElement,
-
-            // SubmodelElements
-            SubmodelElementList,
             Property,
             MultyLanguageProperty,
             Operation,
diff --git a/aas-web-ui/src/components/UIComponents/IdentificationElement.vue b/aas-web-ui/src/components/UIComponents/IdentificationElement.vue
index 446f0a3b..a3f2a14d 100644
--- a/aas-web-ui/src/components/UIComponents/IdentificationElement.vue
+++ b/aas-web-ui/src/components/UIComponents/IdentificationElement.vue
@@ -1,6 +1,6 @@
 <template>
     <v-container fluid class="pa-0">
-        <v-hover v-slot:default="{ isHovering, props }">
+        <v-hover v-slot="{ isHovering, props }">
             <v-list-item>
                 <!-- Tooltip with idShort and identification id -->
                 <v-tooltip activator="parent" open-delay="600" transition="slide-x-transition">
@@ -14,17 +14,17 @@
                     </div>
                 </v-tooltip>
                 <!-- idShort -->
-                <template v-slot:title>
+                <template #title>
                     <div class="text-primary text-subtitle-1">{{ nameToDisplay(identificationObject) }}</div>
                     <div v-if="identificationObject.id">{{ idType + ':' }}</div>
                 </template>
                 <!-- identification id -->
-                <template v-slot:subtitle>
+                <template #subtitle>
                     <div
                         v-if="identificationObject.id"
-                        @click="copyToClipboard()"
                         v-bind="props"
-                        :class="isHovering ? 'cursor-pointer' : ''">
+                        :class="isHovering ? 'cursor-pointer' : ''"
+                        @click="copyToClipboard()">
                         <v-icon v-if="isHovering" color="subtitleText" size="x-small" class="mr-1">{{
                             copyIcon
                         }}</v-icon>
@@ -32,7 +32,7 @@
                     </div>
                 </template>
                 <!-- modelType -->
-                <template v-slot:append>
+                <template #append>
                     <v-chip size="x-small" color="primary">{{ modelType }}</v-chip>
                 </template>
             </v-list-item>
@@ -42,8 +42,8 @@
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-    import { useNavigationStore } from '@/store/NavigationStore';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
+    import { useNavigationStore } from '@/store/NavigationStore';
 
     export default defineComponent({
         name: 'IdentificationElement',
diff --git a/aas-web-ui/src/components/UIComponents/SemanticID.vue b/aas-web-ui/src/components/UIComponents/SemanticID.vue
index b700ab06..c2345802 100644
--- a/aas-web-ui/src/components/UIComponents/SemanticID.vue
+++ b/aas-web-ui/src/components/UIComponents/SemanticID.vue
@@ -9,8 +9,8 @@
                 </div>
             </v-tooltip>
             <!-- SemanticIId Title -->
-            <template v-slot:title>
-                <div v-html="semanticTitle + ':'" class="text-subtitle-2 mt-2"></div>
+            <template #title>
+                <div class="text-subtitle-2 mt-2" v-html="semanticTitle + ':'"></div>
             </template>
             <!-- SemanticId List -->
             <v-list-item-subtitle v-for="(semanticId, i) in semanticIdObject.keys" :key="i">
diff --git a/aas-web-ui/src/components/UIComponents/SubmodelElementGroup.vue b/aas-web-ui/src/components/UIComponents/SubmodelElementGroup.vue
index c276b6c9..ad95ca3d 100644
--- a/aas-web-ui/src/components/UIComponents/SubmodelElementGroup.vue
+++ b/aas-web-ui/src/components/UIComponents/SubmodelElementGroup.vue
@@ -15,12 +15,12 @@
                                 density="compact"
                                 variant="outlined"
                                 border="start">
-                                <template v-slot:prepend>
+                                <template #prepend>
                                     <v-chip label size="x-small" border color="primary">{{
                                         SubmodelElement.modelType
                                     }}</v-chip>
                                 </template>
-                                <template v-slot:append>
+                                <template #append>
                                     <v-badge
                                         :content="SubmodelElement.value ? SubmodelElement.value.length : 0"
                                         inline></v-badge>
@@ -33,12 +33,12 @@
                                 density="compact"
                                 variant="outlined"
                                 border="start">
-                                <template v-slot:prepend>
+                                <template #prepend>
                                     <v-chip label size="x-small" border color="primary">{{
                                         SubmodelElement.modelType
                                     }}</v-chip>
                                 </template>
-                                <template v-slot:append>
+                                <template #append>
                                     <v-badge
                                         :content="SubmodelElement.value ? SubmodelElement.value.length : 0"
                                         inline></v-badge>
@@ -51,12 +51,12 @@
                                 density="compact"
                                 variant="outlined"
                                 border="start">
-                                <template v-slot:prepend>
+                                <template #prepend>
                                     <v-chip label size="x-small" border color="primary">{{
                                         SubmodelElement.modelType
                                     }}</v-chip>
                                 </template>
-                                <template v-slot:append>
+                                <template #append>
                                     <v-badge
                                         :content="SubmodelElement.statements ? SubmodelElement.statements.length : 0"
                                         inline></v-badge>
@@ -65,27 +65,27 @@
                             <!-- Property -->
                             <v-text-field
                                 v-else-if="SubmodelElement.modelType == 'Property'"
+                                v-model="SubmodelElement.value"
                                 :label="nameToDisplay(SubmodelElement)"
                                 density="compact"
                                 variant="outlined"
-                                v-model="SubmodelElement.value"
                                 readonly
                                 hide-details>
                                 <!-- Current Value -->
-                                <template v-slot:prepend-inner>
+                                <template #prepend-inner>
                                     <v-chip label size="x-small" border color="primary">{{
                                         SubmodelElement.valueType
                                     }}</v-chip>
                                 </template>
-                                <template v-slot:append-inner>
+                                <template #append-inner>
                                     <span class="text-subtitleText">{{ unitSuffix(SubmodelElement) }}</span>
                                 </template>
                             </v-text-field>
                             <!-- MultiLanguageProperty -->
                             <DescriptionElement
                                 v-else-if="SubmodelElement.modelType == 'MultiLanguageProperty'"
-                                :descriptionObject="SubmodelElement.value"
-                                :descriptionTitle="nameToDisplay(SubmodelElement)"
+                                :description-object="SubmodelElement.value"
+                                :description-title="nameToDisplay(SubmodelElement)"
                                 :small="false"
                                 style="margin-top: -12px"></DescriptionElement>
                             <!-- Operation -->
@@ -95,25 +95,25 @@
                                 density="compact"
                                 variant="tonal"
                                 border="start">
-                                <template v-slot:prepend>
+                                <template #prepend>
                                     <v-chip label size="x-small" border color="primary">{{
                                         SubmodelElement.modelType
                                     }}</v-chip>
                                 </template>
-                                <template v-slot:append>
+                                <template #append>
                                     <v-icon style="margin-right: 5px">mdi-lightning-bolt-circle</v-icon>
                                 </template>
                             </v-alert>
                             <!-- File -->
                             <v-text-field
                                 v-else-if="SubmodelElement.modelType == 'File'"
+                                v-model="SubmodelElement.value"
                                 :label="nameToDisplay(SubmodelElement)"
                                 density="compact"
                                 variant="outlined"
-                                v-model="SubmodelElement.value"
                                 readonly
                                 hide-details>
-                                <template v-slot:prepend-inner>
+                                <template #prepend-inner>
                                     <v-chip label size="x-small" border color="primary">{{
                                         SubmodelElement.modelType
                                     }}</v-chip>
@@ -122,13 +122,13 @@
                             <!-- Blob -->
                             <v-text-field
                                 v-else-if="SubmodelElement.modelType == 'Blob'"
+                                v-model="SubmodelElement.value"
                                 :label="nameToDisplay(SubmodelElement)"
                                 density="compact"
                                 variant="outlined"
-                                v-model="SubmodelElement.value"
                                 readonly
                                 hide-details>
-                                <template v-slot:prepend-inner>
+                                <template #prepend-inner>
                                     <v-chip label size="x-small" border color="primary">{{
                                         SubmodelElement.modelType
                                     }}</v-chip>
@@ -138,7 +138,7 @@
                             <div v-else-if="SubmodelElement.modelType == 'ReferenceElement'">
                                 <v-list-item style="margin-top: -12px">
                                     <!-- Reference idShort -->
-                                    <template v-slot:title>
+                                    <template #title>
                                         <div class="text-subtitle-2">{{ nameToDisplay(SubmodelElement) }}</div>
                                     </template>
                                 </v-list-item>
@@ -151,26 +151,26 @@
                             <div v-else-if="SubmodelElement.modelType == 'Range'">
                                 <v-list-item style="margin-top: -12px">
                                     <!-- Range idShort -->
-                                    <template v-slot:title>
+                                    <template #title>
                                         <div class="text-subtitle-2">{{ nameToDisplay(SubmodelElement) }}</div>
                                     </template>
                                 </v-list-item>
                                 <v-row>
                                     <v-col>
                                         <v-text-field
+                                            v-model="SubmodelElement.min"
                                             label="min"
                                             density="compact"
                                             variant="outlined"
-                                            v-model="SubmodelElement.min"
                                             readonly
                                             hide-details></v-text-field>
                                     </v-col>
                                     <v-col>
                                         <v-text-field
+                                            v-model="SubmodelElement.max"
                                             label="max"
                                             density="compact"
                                             variant="outlined"
-                                            v-model="SubmodelElement.max"
                                             readonly
                                             hide-details></v-text-field>
                                     </v-col>
@@ -180,7 +180,7 @@
                             <div v-else-if="SubmodelElement.modelType == 'RelationshipElement'">
                                 <v-list-item style="margin-top: -12px">
                                     <!-- Relationship idShort -->
-                                    <template v-slot:title>
+                                    <template #title>
                                         <div class="text-subtitle-2">{{ nameToDisplay(SubmodelElement) }}</div>
                                     </template>
                                 </v-list-item>
@@ -203,7 +203,7 @@
                             <div v-else-if="SubmodelElement.modelType == 'AnnotatedRelationshipElement'">
                                 <v-list-item style="margin-top: -12px">
                                     <!-- Relationship idShort -->
-                                    <template v-slot:title>
+                                    <template #title>
                                         <div class="text-subtitle-2">{{ nameToDisplay(SubmodelElement) }}</div>
                                     </template>
                                 </v-list-item>
@@ -240,7 +240,7 @@
                     <v-divider v-if="i < smeObject[smeLocator].length - 1" class="mt-2 mb-1"></v-divider>
                 </div>
             </v-list>
-            <v-list nav class="bg-elevatedCard pt-0" v-else>
+            <v-list v-else nav class="bg-elevatedCard pt-0">
                 <v-list-item>
                     <v-list-item-title class="pt-2">
                         <v-alert
@@ -257,8 +257,8 @@
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-    import { useAASStore } from '@/store/AASDataStore';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
+    import { useAASStore } from '@/store/AASDataStore';
     import DescriptionElement from './DescriptionElement.vue';
 
     export default defineComponent({
diff --git a/aas-web-ui/src/components/UIComponents/SubmodelElementWrapper.vue b/aas-web-ui/src/components/UIComponents/SubmodelElementWrapper.vue
index 37b5c977..b516440f 100644
--- a/aas-web-ui/src/components/UIComponents/SubmodelElementWrapper.vue
+++ b/aas-web-ui/src/components/UIComponents/SubmodelElementWrapper.vue
@@ -4,26 +4,26 @@
             <v-list nav class="pt-0">
                 <MultiLanguageProperty
                     v-if="SubmodelElementObject.modelType == 'MultiLanguageProperty'"
-                    :multiLanguagePropertyObject="SubmodelElementObject"></MultiLanguageProperty>
+                    :multi-language-property-object="SubmodelElementObject"></MultiLanguageProperty>
                 <Property
                     v-if="SubmodelElementObject.modelType == 'Property'"
-                    :propertyObject="SubmodelElementObject"
-                    @updateValue="updatePropertyValue"></Property>
-                <File v-if="SubmodelElementObject.modelType == 'File'" :fileObject="SubmodelElementObject"></File>
-                <Blob v-if="SubmodelElementObject.modelType == 'Blob'" :blobObject="SubmodelElementObject"></Blob>
+                    :property-object="SubmodelElementObject"
+                    @update-value="updatePropertyValue"></Property>
+                <File v-if="SubmodelElementObject.modelType == 'File'" :file-object="SubmodelElementObject"></File>
+                <Blob v-if="SubmodelElementObject.modelType == 'Blob'" :blob-object="SubmodelElementObject"></Blob>
                 <Operation
                     v-if="SubmodelElementObject.modelType == 'Operation'"
-                    :operationObject="SubmodelElementObject"></Operation>
+                    :operation-object="SubmodelElementObject"></Operation>
                 <ReferenceElement
                     v-if="SubmodelElementObject.modelType == 'ReferenceElement'"
-                    :referenceElementObject="SubmodelElementObject"></ReferenceElement>
-                <Range v-if="SubmodelElementObject.modelType == 'Range'" :rangeObject="SubmodelElementObject"></Range>
+                    :reference-element-object="SubmodelElementObject"></ReferenceElement>
+                <Range v-if="SubmodelElementObject.modelType == 'Range'" :range-object="SubmodelElementObject"></Range>
                 <RelationshipElement
                     v-if="SubmodelElementObject.modelType == 'RelationshipElement'"
-                    :relationshipElementObject="SubmodelElementObject"></RelationshipElement>
+                    :relationship-element-object="SubmodelElementObject"></RelationshipElement>
                 <AnnotatedRelationshipElement
                     v-if="SubmodelElementObject.modelType == 'AnnotatedRelationshipElement'"
-                    :annotatedRelationshipElementObject="SubmodelElementObject"></AnnotatedRelationshipElement>
+                    :annotated-relationship-element-object="SubmodelElementObject"></AnnotatedRelationshipElement>
             </v-list>
         </v-card>
     </v-container>
@@ -31,16 +31,15 @@
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-
-    import Property from '@/components/SubmodelElements/Property.vue';
-    import MultiLanguageProperty from '@/components/SubmodelElements/MultiLanguageProperty.vue';
-    import File from '@/components/SubmodelElements/File.vue';
+    import AnnotatedRelationshipElement from '@/components/SubmodelElements/AnnotatedRelationshipElement.vue';
     import Blob from '@/components/SubmodelElements/Blob.vue';
+    import File from '@/components/SubmodelElements/File.vue';
+    import MultiLanguageProperty from '@/components/SubmodelElements/MultiLanguageProperty.vue';
     import Operation from '@/components/SubmodelElements/Operation.vue';
-    import ReferenceElement from '@/components/SubmodelElements/ReferenceElement.vue';
+    import Property from '@/components/SubmodelElements/Property.vue';
     import Range from '@/components/SubmodelElements/Range.vue';
+    import ReferenceElement from '@/components/SubmodelElements/ReferenceElement.vue';
     import RelationshipElement from '@/components/SubmodelElements/RelationshipElement.vue';
-    import AnnotatedRelationshipElement from '@/components/SubmodelElements/AnnotatedRelationshipElement.vue';
 
     export default defineComponent({
         name: 'SubmodelELementWrapper',
diff --git a/aas-web-ui/src/components/UIComponents/VTreeview.vue b/aas-web-ui/src/components/UIComponents/VTreeview.vue
index 5fb21905..065044d6 100644
--- a/aas-web-ui/src/components/UIComponents/VTreeview.vue
+++ b/aas-web-ui/src/components/UIComponents/VTreeview.vue
@@ -4,23 +4,23 @@
         <!-- TODO: Fix weird Ripple effect on isActive change to false -->
         <v-lazy transition="fade-transition">
             <v-list-item
-                @click="toggleNode()"
                 :style="{ 'padding-left': depth * 22 + 'px' }"
                 density="compact"
                 class="py-0"
                 nav
                 color="primary"
-                :active="item.isActive">
+                :active="item.isActive"
+                @click="toggleNode()">
                 <v-list-item-title>{{ nameToDisplay(item) }}</v-list-item-title>
-                <template v-slot:prepend>
+                <template #prepend>
                     <!-- Button to show/hide children -->
                     <v-btn
                         v-if="item.children"
                         size="small"
                         variant="plain"
-                        @click.stop="toggleChildren()"
                         :icon="showChildren ? 'mdi-menu-down' : 'mdi-menu-right'"
-                        :ripple="false"></v-btn>
+                        :ripple="false"
+                        @click.stop="toggleChildren()"></v-btn>
                     <div v-else style="width: 40px; height: 40px"></div>
                     <!-- Empty Submodel Icon -->
                     <v-icon v-if="item.modelType === 'Submodel' && !item.children" color="primary"
@@ -53,7 +53,7 @@
                     <!-- Icon for every other SubmodelElement (like Property) -->
                     <v-icon v-else color="primary">mdi-file-code</v-icon>
                 </template>
-                <template v-slot:append="{ isActive }">
+                <template #append="{ isActive }">
                     <v-chip
                         v-if="item.modelType"
                         color="primary"
@@ -63,7 +63,7 @@
                     >
                     <!-- Button to Copy the Path to the Clipboard -->
                     <v-tooltip v-if="isActive" text="Copy Path to Clipboard" :open-delay="600" location="bottom">
-                        <template v-slot:activator="{ props }">
+                        <template #activator="{ props }">
                             <v-icon
                                 color="subtitleText"
                                 v-bind="props"
@@ -89,10 +89,10 @@
 <script lang="ts">
     import { defineComponent } from 'vue';
     import { useRoute, useRouter } from 'vue-router';
-    import { useNavigationStore } from '@/store/NavigationStore';
-    import { useAASStore } from '@/store/AASDataStore';
     import { useTheme } from 'vuetify';
     import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
+    import { useAASStore } from '@/store/AASDataStore';
+    import { useNavigationStore } from '@/store/NavigationStore';
 
     export default defineComponent({
         name: 'VTreeview',
@@ -122,13 +122,6 @@
             };
         },
 
-        mounted() {
-            // Check if the current items showChildren Property is true if it exists
-            if ('showChildren' in this.item && this.item.showChildren) {
-                this.showChildren = true;
-            }
-        },
-
         computed: {
             // Check if the current Device is a Mobile Device
             isMobile() {
@@ -141,6 +134,13 @@
             },
         },
 
+        mounted() {
+            // Check if the current items showChildren Property is true if it exists
+            if ('showChildren' in this.item && this.item.showChildren) {
+                this.showChildren = true;
+            }
+        },
+
         methods: {
             // Function to show/hide Children
             toggleChildren() {
diff --git a/aas-web-ui/src/components/Widgets/AreaChart.vue b/aas-web-ui/src/components/Widgets/AreaChart.vue
index 2b725b33..bc6bb101 100644
--- a/aas-web-ui/src/components/Widgets/AreaChart.vue
+++ b/aas-web-ui/src/components/Widgets/AreaChart.vue
@@ -3,30 +3,30 @@
         <!-- Options -->
         <v-list v-if="!hideSettings || editDialog" nav class="pa-0" style="margin-left: -8px; margin-top: -14px">
             <v-list-item class="pb-0">
-                <template v-slot:title>
+                <template #title>
                     <div class="text-subtitle-2">{{ 'Options: ' }}</div>
                 </template>
             </v-list-item>
         </v-list>
-        <v-row align="center" v-if="!hideSettings || editDialog">
+        <v-row v-if="!hideSettings || editDialog" align="center">
             <v-col cols="auto">
                 <v-text-field
+                    v-model="range"
                     type="number"
                     hide-details
                     density="compact"
-                    v-model="range"
                     label="Range"
                     variant="outlined"
                     suffix="ms"
                     @blur="changeRange()"
-                    @keydown.native.enter="changeRange()"></v-text-field>
+                    @keydown.enter="changeRange()"></v-text-field>
             </v-col>
             <v-col cols="auto">
                 <v-select
+                    v-model="interpolation"
                     hide-details
                     density="compact"
                     :items="interpolationOptions"
-                    v-model="interpolation"
                     label="Interpolation"
                     variant="outlined"
                     @update:model-value="changeInterpolation()"></v-select>
@@ -37,16 +37,16 @@
 </template>
 
 <script lang="ts">
-    import { defineComponent } from 'vue';
     import _ from 'lodash';
+    import { defineComponent } from 'vue';
     import { useTheme } from 'vuetify';
-    import WidgetHandling from '@/mixins/WidgetHandling';
     import DashboardHandling from '@/mixins/DashboardHandling';
+    import WidgetHandling from '@/mixins/WidgetHandling';
 
     export default defineComponent({
         name: 'AreaChart',
-        props: ['chartData', 'timeVariable', 'yVariables', 'chartOptionsExternal', 'editDialog'],
         mixins: [WidgetHandling, DashboardHandling],
+        props: ['chartData', 'timeVariable', 'yVariables', 'chartOptionsExternal', 'editDialog'],
 
         setup() {
             const theme = useTheme();
@@ -114,17 +114,11 @@
             };
         },
 
-        mounted() {
-            this.$nextTick(() => {
-                const chart = (this.$refs.areachart as any).chart;
-                if (chart) {
-                    // console.log('Chart has rendered')
-                    // apply the theme on component mount
-                    this.applyTheme();
-                    // append the series to the chart
-                    this.initializeSeries();
-                }
-            });
+        computed: {
+            // Check if the current Theme is dark
+            isDark() {
+                return this.theme.global.current.value.dark;
+            },
         },
 
         watch: {
@@ -142,11 +136,17 @@
             },
         },
 
-        computed: {
-            // Check if the current Theme is dark
-            isDark() {
-                return this.theme.global.current.value.dark;
-            },
+        mounted() {
+            this.$nextTick(() => {
+                const chart = (this.$refs.areachart as any).chart;
+                if (chart) {
+                    // console.log('Chart has rendered')
+                    // apply the theme on component mount
+                    this.applyTheme();
+                    // append the series to the chart
+                    this.initializeSeries();
+                }
+            });
         },
 
         methods: {
diff --git a/aas-web-ui/src/components/Widgets/BarChart.vue b/aas-web-ui/src/components/Widgets/BarChart.vue
index 16e097c0..a1c444b0 100644
--- a/aas-web-ui/src/components/Widgets/BarChart.vue
+++ b/aas-web-ui/src/components/Widgets/BarChart.vue
@@ -51,17 +51,11 @@
             };
         },
 
-        mounted() {
-            this.$nextTick(() => {
-                const chart = (this.$refs.barchart as any).chart;
-                if (chart && this.submodelElementData && Object.keys(this.submodelElementData).length > 0) {
-                    // console.log('Chart has rendered')
-                    // apply the theme on component mount
-                    this.applyTheme();
-                    // append the series to the chart
-                    this.initializeSeries();
-                }
-            });
+        computed: {
+            // Check if the current Theme is dark
+            isDark() {
+                return this.theme.global.current.value.dark;
+            },
         },
 
         watch: {
@@ -77,11 +71,17 @@
             },
         },
 
-        computed: {
-            // Check if the current Theme is dark
-            isDark() {
-                return this.theme.global.current.value.dark;
-            },
+        mounted() {
+            this.$nextTick(() => {
+                const chart = (this.$refs.barchart as any).chart;
+                if (chart && this.submodelElementData && Object.keys(this.submodelElementData).length > 0) {
+                    // console.log('Chart has rendered')
+                    // apply the theme on component mount
+                    this.applyTheme();
+                    // append the series to the chart
+                    this.initializeSeries();
+                }
+            });
         },
 
         methods: {
diff --git a/aas-web-ui/src/components/Widgets/Button.vue b/aas-web-ui/src/components/Widgets/Button.vue
index b38f3a6e..ac8ca244 100644
--- a/aas-web-ui/src/components/Widgets/Button.vue
+++ b/aas-web-ui/src/components/Widgets/Button.vue
@@ -2,7 +2,7 @@
     <v-container fluid class="px-0 py-1">
         <v-row v-for="buttonElement in inputElements" :key="buttonElement.idShort">
             <v-col>
-                <v-btn color="primary" @click="sendClick(buttonElement, true)" class="text-buttonText">{{
+                <v-btn color="primary" class="text-buttonText" @click="sendClick(buttonElement, true)">{{
                     buttonElement.name
                 }}</v-btn>
             </v-col>
@@ -15,10 +15,7 @@
     import RequestHandling from '@/mixins/RequestHandling';
 
     export default defineComponent({
-        name: 'Button',
-        components: {
-            RequestHandling,
-        },
+        name: 'ButtonElement',
         mixins: [RequestHandling],
         props: ['submodelElementData', 'selectedNode', 'widgetSettings'],
 
@@ -32,9 +29,7 @@
             };
         },
 
-        mounted() {
-            this.initializeView(); // initialize list
-        },
+        computed: {},
 
         watch: {
             // Watch for changes in the submodelElementData and (re-)initialize the Component
@@ -46,7 +41,9 @@
             },
         },
 
-        computed: {},
+        mounted() {
+            this.initializeView(); // initialize list
+        },
 
         methods: {
             // Initialize the Component
diff --git a/aas-web-ui/src/components/Widgets/ColumnChart.vue b/aas-web-ui/src/components/Widgets/ColumnChart.vue
index 57234a72..644cc9a5 100644
--- a/aas-web-ui/src/components/Widgets/ColumnChart.vue
+++ b/aas-web-ui/src/components/Widgets/ColumnChart.vue
@@ -83,17 +83,11 @@
             };
         },
 
-        mounted() {
-            this.$nextTick(() => {
-                const chart = (this.$refs.columnchart as any).chart;
-                if (chart && this.submodelElementData && Object.keys(this.submodelElementData).length > 0) {
-                    // console.log('Chart has rendered')
-                    // apply the theme on component mount
-                    this.applyTheme();
-                    // append the series to the chart
-                    this.initializeSeries();
-                }
-            });
+        computed: {
+            // Check if the current Theme is dark
+            isDark() {
+                return this.theme.global.current.value.dark;
+            },
         },
 
         watch: {
@@ -109,11 +103,17 @@
             },
         },
 
-        computed: {
-            // Check if the current Theme is dark
-            isDark() {
-                return this.theme.global.current.value.dark;
-            },
+        mounted() {
+            this.$nextTick(() => {
+                const chart = (this.$refs.columnchart as any).chart;
+                if (chart && this.submodelElementData && Object.keys(this.submodelElementData).length > 0) {
+                    // console.log('Chart has rendered')
+                    // apply the theme on component mount
+                    this.applyTheme();
+                    // append the series to the chart
+                    this.initializeSeries();
+                }
+            });
         },
 
         methods: {
diff --git a/aas-web-ui/src/components/Widgets/DisplayField.vue b/aas-web-ui/src/components/Widgets/DisplayField.vue
index 10648a3c..72d75f51 100644
--- a/aas-web-ui/src/components/Widgets/DisplayField.vue
+++ b/aas-web-ui/src/components/Widgets/DisplayField.vue
@@ -29,11 +29,8 @@
 
     export default defineComponent({
         name: 'DisplayField',
-        props: ['chartData', 'timeVariable', 'yVariables'],
-        components: {
-            SubmodelElementHandling,
-        },
         mixins: [SubmodelElementHandling],
+        props: ['chartData', 'timeVariable', 'yVariables'],
 
         data() {
             return {
@@ -41,10 +38,6 @@
             };
         },
 
-        mounted() {
-            this.initializeDisplay();
-        },
-
         watch: {
             chartData: {
                 handler() {
@@ -54,6 +47,10 @@
             },
         },
 
+        mounted() {
+            this.initializeDisplay();
+        },
+
         methods: {
             // Initialize the Component
             initializeDisplay() {
diff --git a/aas-web-ui/src/components/Widgets/DonutChart.vue b/aas-web-ui/src/components/Widgets/DonutChart.vue
index 31888de0..17e2131b 100644
--- a/aas-web-ui/src/components/Widgets/DonutChart.vue
+++ b/aas-web-ui/src/components/Widgets/DonutChart.vue
@@ -1,6 +1,6 @@
 <template>
     <v-container fluid class="pa-0">
-        <apexchart type="donut" ref="donutchart" height="420" :options="chartOptions" :series="chartSeries"></apexchart>
+        <apexchart ref="donutchart" type="donut" height="420" :options="chartOptions" :series="chartSeries"></apexchart>
     </v-container>
 </template>
 
@@ -49,17 +49,11 @@
             };
         },
 
-        mounted() {
-            this.$nextTick(() => {
-                const chart = (this.$refs.donutchart as any).chart;
-                if (chart && this.submodelElementData && Object.keys(this.submodelElementData).length > 0) {
-                    // console.log('Chart has rendered')
-                    // apply the theme on component mount
-                    this.applyTheme();
-                    // append the series to the chart
-                    this.initializeSeries();
-                }
-            });
+        computed: {
+            // Check if the current Theme is dark
+            isDark() {
+                return this.theme.global.current.value.dark;
+            },
         },
 
         watch: {
@@ -75,11 +69,17 @@
             },
         },
 
-        computed: {
-            // Check if the current Theme is dark
-            isDark() {
-                return this.theme.global.current.value.dark;
-            },
+        mounted() {
+            this.$nextTick(() => {
+                const chart = (this.$refs.donutchart as any).chart;
+                if (chart && this.submodelElementData && Object.keys(this.submodelElementData).length > 0) {
+                    // console.log('Chart has rendered')
+                    // apply the theme on component mount
+                    this.applyTheme();
+                    // append the series to the chart
+                    this.initializeSeries();
+                }
+            });
         },
 
         methods: {
@@ -91,7 +91,7 @@
                 let maxValue = 0;
                 let series = [] as any;
                 // determine the target and actual value
-                this.submodelElementData.value.forEach((element: any, i: number) => {
+                this.submodelElementData.value.forEach((element: any) => {
                     // Actual Value
                     if (this.widgetSettings.actualValue == element.idShort) {
                         actualValue = element.value;
diff --git a/aas-web-ui/src/components/Widgets/Gauge.vue b/aas-web-ui/src/components/Widgets/Gauge.vue
index ca4022d1..a8d28c41 100644
--- a/aas-web-ui/src/components/Widgets/Gauge.vue
+++ b/aas-web-ui/src/components/Widgets/Gauge.vue
@@ -22,16 +22,14 @@
 
 <script lang="ts">
     import { defineComponent } from 'vue';
-    import _ from 'lodash';
     import { useTheme } from 'vuetify';
     import DashboardHandling from '@/mixins/DashboardHandling';
-
     import { useNavigationStore } from '@/store/NavigationStore';
 
     export default defineComponent({
         name: 'Gauge',
-        props: ['chartData', 'timeVariable', 'yVariables', 'chartOptionsExternal', 'editDialog'],
         mixins: [DashboardHandling],
+        props: ['chartData', 'timeVariable', 'yVariables', 'chartOptionsExternal', 'editDialog'],
 
         setup() {
             const theme = useTheme();
@@ -89,17 +87,11 @@
             };
         },
 
-        mounted() {
-            this.$nextTick(() => {
-                const chart = (this.$refs.gauge as any).chart;
-                if (chart) {
-                    // console.log('Chart has rendered')
-                    // apply the theme on component mount
-                    this.applyTheme();
-                    // append the series to the chart
-                    this.initializeSeries();
-                }
-            });
+        computed: {
+            // Check if the current Theme is dark
+            isDark() {
+                return this.theme.global.current.value.dark;
+            },
         },
 
         watch: {
@@ -115,11 +107,17 @@
             },
         },
 
-        computed: {
-            // Check if the current Theme is dark
-            isDark() {
-                return this.theme.global.current.value.dark;
-            },
+        mounted() {
+            this.$nextTick(() => {
+                const chart = (this.$refs.gauge as any).chart;
+                if (chart) {
+                    // console.log('Chart has rendered')
+                    // apply the theme on component mount
+                    this.applyTheme();
+                    // append the series to the chart
+                    this.initializeSeries();
+                }
+            });
         },
 
         methods: {
diff --git a/aas-web-ui/src/components/Widgets/Histogram.vue b/aas-web-ui/src/components/Widgets/Histogram.vue
index a7a3bbce..7bbc9edd 100644
--- a/aas-web-ui/src/components/Widgets/Histogram.vue
+++ b/aas-web-ui/src/components/Widgets/Histogram.vue
@@ -3,7 +3,7 @@
         <!-- Options -->
         <v-list v-if="!hideSettings || editDialog" nav class="pa-0" style="margin-left: -8px; margin-top: -14px">
             <v-list-item class="pb-0">
-                <template v-slot:title>
+                <template #title>
                     <div class="text-subtitle-2">{{ 'Options: ' }}</div>
                 </template>
             </v-list-item>
@@ -11,20 +11,20 @@
         <v-row v-if="!hideSettings || editDialog" align="center">
             <v-col cols="auto">
                 <v-text-field
+                    v-model="numberOfCategories"
                     type="number"
                     hide-details
                     density="compact"
-                    v-model="numberOfCategories"
-                    @blur="initializeSeries()"
-                    @keydown.native.enter="initializeSeries()"
                     label="Bins"
-                    variant="outlined"></v-text-field>
+                    variant="outlined"
+                    @blur="initializeSeries()"
+                    @keydown.enter="initializeSeries()"></v-text-field>
             </v-col>
             <v-col cols="auto">
                 <v-switch
+                    v-model="stacked"
                     hide-details
                     label="stacked"
-                    v-model="stacked"
                     density="compact"
                     @change="changeVariant()"></v-switch>
             </v-col>
@@ -34,18 +34,17 @@
 </template>
 
 <script lang="ts">
-    import { defineComponent } from 'vue';
     import _ from 'lodash';
+    import { defineComponent } from 'vue';
     import { useTheme } from 'vuetify';
-    import WidgetHandling from '@/mixins/WidgetHandling';
     import DashboardHandling from '@/mixins/DashboardHandling';
-
+    import WidgetHandling from '@/mixins/WidgetHandling';
     import { useNavigationStore } from '@/store/NavigationStore';
 
     export default defineComponent({
         name: 'Histogram',
-        props: ['chartData', 'timeVariable', 'yVariables', 'chartOptionsExternal', 'editDialog'],
         mixins: [WidgetHandling, DashboardHandling],
+        props: ['chartData', 'timeVariable', 'yVariables', 'chartOptionsExternal', 'editDialog'],
 
         setup() {
             const theme = useTheme();
@@ -97,17 +96,11 @@
             };
         },
 
-        mounted() {
-            this.$nextTick(() => {
-                const chart = (this.$refs.histogram as any).chart;
-                if (chart) {
-                    // console.log('Chart has rendered')
-                    // apply the theme on component mount
-                    this.applyTheme();
-                    // append the series to the chart
-                    this.initializeSeries();
-                }
-            });
+        computed: {
+            // Check if the current Theme is dark
+            isDark() {
+                return this.theme.global.current.value.dark;
+            },
         },
 
         watch: {
@@ -123,11 +116,17 @@
             },
         },
 
-        computed: {
-            // Check if the current Theme is dark
-            isDark() {
-                return this.theme.global.current.value.dark;
-            },
+        mounted() {
+            this.$nextTick(() => {
+                const chart = (this.$refs.histogram as any).chart;
+                if (chart) {
+                    // console.log('Chart has rendered')
+                    // apply the theme on component mount
+                    this.applyTheme();
+                    // append the series to the chart
+                    this.initializeSeries();
+                }
+            });
         },
 
         methods: {
@@ -146,7 +145,7 @@
                     let completeOptions = _.merge({}, this.chartOptions, this.chartOptionsExternal);
                     this.stacked = completeOptions.chart.stacked;
                 }
-                let newSeries = histograms.map((histogram: any, index: number) => {
+                let newSeries = histograms.map((histogram: any) => {
                     return {
                         name: 'Number of values in bin',
                         data: histogram,
diff --git a/aas-web-ui/src/components/Widgets/InputField.vue b/aas-web-ui/src/components/Widgets/InputField.vue
index 73e5b7bb..a3910315 100644
--- a/aas-web-ui/src/components/Widgets/InputField.vue
+++ b/aas-web-ui/src/components/Widgets/InputField.vue
@@ -13,13 +13,13 @@
                     hide-details
                     style="width: 300px"
                     clearable
-                    @keydown.native.enter="updateValue(element, i)">
+                    @keydown.enter="updateValue(element, i)">
                     <!-- Current Value -->
-                    <template v-slot:prepend-inner>
+                    <template #prepend-inner>
                         <v-chip label size="x-small" border>{{ element.value }}</v-chip>
                         <v-divider class="ml-3 mr-1" vertical inset style="margin-top: 4px"></v-divider>
                     </template>
-                    <template v-slot:append-inner>
+                    <template #append-inner>
                         <!-- Suffix with Unit -->
                         <span v-if="element.unit" class="text-subtitleText">{{ element.unit }}</span>
                         <!-- Update Button -->
@@ -45,9 +45,6 @@
 
     export default defineComponent({
         name: 'InputField',
-        components: {
-            RequestHandling,
-        },
         mixins: [RequestHandling],
 
         props: ['submodelElementData', 'selectedNode', 'widgetSettings'],
@@ -63,9 +60,7 @@
             };
         },
 
-        mounted() {
-            this.initializeView(); // initialize list
-        },
+        computed: {},
 
         watch: {
             // Watch for changes in the submodelElementData and (re-)initialize the Component
@@ -77,7 +72,9 @@
             },
         },
 
-        computed: {},
+        mounted() {
+            this.initializeView(); // initialize list
+        },
 
         methods: {
             // Initialize the Component
diff --git a/aas-web-ui/src/components/Widgets/Lamp.vue b/aas-web-ui/src/components/Widgets/Lamp.vue
index f40f30e4..7903556d 100644
--- a/aas-web-ui/src/components/Widgets/Lamp.vue
+++ b/aas-web-ui/src/components/Widgets/Lamp.vue
@@ -26,9 +26,6 @@
 
     export default defineComponent({
         name: 'Lamp',
-        components: {
-            RequestHandling,
-        },
         mixins: [RequestHandling],
 
         props: ['submodelElementData', 'widgetSettings'],
@@ -43,9 +40,7 @@
             };
         },
 
-        mounted() {
-            this.initializeView(); // initialize list
-        },
+        computed: {},
 
         watch: {
             // Watch for changes in the submodelElementData and (re-)initialize the Component
@@ -57,7 +52,9 @@
             },
         },
 
-        computed: {},
+        mounted() {
+            this.initializeView(); // initialize list
+        },
 
         methods: {
             // Initialize the Component
diff --git a/aas-web-ui/src/components/Widgets/LineChart.vue b/aas-web-ui/src/components/Widgets/LineChart.vue
index b3ed2577..db8703ba 100644
--- a/aas-web-ui/src/components/Widgets/LineChart.vue
+++ b/aas-web-ui/src/components/Widgets/LineChart.vue
@@ -1,32 +1,32 @@
 <template>
     <v-container fluid class="pa-0">
         <!-- Options -->
-        <v-list nav class="pa-0" style="margin-left: -8px; margin-top: -14px" v-if="!hideSettings || editDialog">
+        <v-list v-if="!hideSettings || editDialog" nav class="pa-0" style="margin-left: -8px; margin-top: -14px">
             <v-list-item class="pb-0">
-                <template v-slot:title>
+                <template #title>
                     <div class="text-subtitle-2">{{ 'Options: ' }}</div>
                 </template>
             </v-list-item>
         </v-list>
-        <v-row align="center" v-if="!hideSettings || editDialog">
+        <v-row v-if="!hideSettings || editDialog" align="center">
             <v-col cols="auto">
                 <v-text-field
+                    v-model="range"
                     type="number"
                     hide-details
                     density="compact"
-                    v-model="range"
                     label="Range"
                     variant="outlined"
                     suffix="ms"
                     @blur="changeRange()"
-                    @keydown.native.enter="changeRange()"></v-text-field>
+                    @keydown.enter="changeRange()"></v-text-field>
             </v-col>
             <v-col cols="auto">
                 <v-select
+                    v-model="interpolation"
                     hide-details
                     density="compact"
                     :items="interpolationOptions"
-                    v-model="interpolation"
                     label="Interpolation"
                     variant="outlined"
                     @update:model-value="changeInterpolation()"></v-select>
@@ -37,16 +37,16 @@
 </template>
 
 <script lang="ts">
-    import { defineComponent } from 'vue';
     import _ from 'lodash';
+    import { defineComponent } from 'vue';
     import { useTheme } from 'vuetify';
-    import WidgetHandling from '@/mixins/WidgetHandling';
     import DashboardHandling from '@/mixins/DashboardHandling';
+    import WidgetHandling from '@/mixins/WidgetHandling';
 
     export default defineComponent({
         name: 'LineChart',
-        props: ['chartData', 'timeVariable', 'yVariables', 'chartOptionsExternal', 'editDialog'],
         mixins: [WidgetHandling, DashboardHandling],
+        props: ['chartData', 'timeVariable', 'yVariables', 'chartOptionsExternal', 'editDialog'],
 
         setup() {
             const theme = useTheme();
@@ -115,17 +115,11 @@
             };
         },
 
-        mounted() {
-            this.$nextTick(() => {
-                const chart = (this.$refs.linechart as any).chart;
-                if (chart) {
-                    // console.log('Chart has rendered')
-                    // apply the theme on component mount
-                    this.applyTheme();
-                    // append the series to the chart
-                    this.initializeSeries();
-                }
-            });
+        computed: {
+            // Check if the current Theme is dark
+            isDark() {
+                return this.theme.global.current.value.dark;
+            },
         },
 
         watch: {
@@ -143,11 +137,17 @@
             },
         },
 
-        computed: {
-            // Check if the current Theme is dark
-            isDark() {
-                return this.theme.global.current.value.dark;
-            },
+        mounted() {
+            this.$nextTick(() => {
+                const chart = (this.$refs.linechart as any).chart;
+                if (chart) {
+                    // console.log('Chart has rendered')
+                    // apply the theme on component mount
+                    this.applyTheme();
+                    // append the series to the chart
+                    this.initializeSeries();
+                }
+            });
         },
 
         methods: {
diff --git a/aas-web-ui/src/components/Widgets/RadialChart.vue b/aas-web-ui/src/components/Widgets/RadialChart.vue
index 61eabda5..6674e2e8 100644
--- a/aas-web-ui/src/components/Widgets/RadialChart.vue
+++ b/aas-web-ui/src/components/Widgets/RadialChart.vue
@@ -1,8 +1,8 @@
 <template>
     <v-container fluid class="pa-0">
         <apexchart
-            type="radialBar"
             ref="radialchart"
+            type="radialBar"
             height="420"
             :options="chartOptions"
             :series="chartSeries"></apexchart>
@@ -68,17 +68,11 @@
             };
         },
 
-        mounted() {
-            this.$nextTick(() => {
-                const chart = (this.$refs.radialchart as any).chart;
-                if (chart && this.submodelElementData && Object.keys(this.submodelElementData).length > 0) {
-                    // console.log('Chart has rendered')
-                    // apply the theme on component mount
-                    this.applyTheme();
-                    // append the series to the chart
-                    this.initializeSeries();
-                }
-            });
+        computed: {
+            // Check if the current Theme is dark
+            isDark() {
+                return this.theme.global.current.value.dark;
+            },
         },
 
         watch: {
@@ -94,11 +88,17 @@
             },
         },
 
-        computed: {
-            // Check if the current Theme is dark
-            isDark() {
-                return this.theme.global.current.value.dark;
-            },
+        mounted() {
+            this.$nextTick(() => {
+                const chart = (this.$refs.radialchart as any).chart;
+                if (chart && this.submodelElementData && Object.keys(this.submodelElementData).length > 0) {
+                    // console.log('Chart has rendered')
+                    // apply the theme on component mount
+                    this.applyTheme();
+                    // append the series to the chart
+                    this.initializeSeries();
+                }
+            });
         },
 
         methods: {
diff --git a/aas-web-ui/src/components/Widgets/ScatterChart.vue b/aas-web-ui/src/components/Widgets/ScatterChart.vue
index 1e99b688..b88e1754 100644
--- a/aas-web-ui/src/components/Widgets/ScatterChart.vue
+++ b/aas-web-ui/src/components/Widgets/ScatterChart.vue
@@ -3,23 +3,23 @@
         <!-- Options -->
         <v-list v-if="!hideSettings || editDialog" nav class="pa-0" style="margin-left: -8px; margin-top: -14px">
             <v-list-item class="pb-0">
-                <template v-slot:title>
+                <template #title>
                     <div class="text-subtitle-2">{{ 'Options: ' }}</div>
                 </template>
             </v-list-item>
         </v-list>
-        <v-row align="center" v-if="!hideSettings || editDialog">
+        <v-row v-if="!hideSettings || editDialog" align="center">
             <v-col cols="auto">
                 <v-text-field
+                    v-model="range"
                     type="number"
                     hide-details
                     density="compact"
-                    v-model="range"
                     label="Range"
                     variant="outlined"
                     suffix="ms"
                     @blur="changeRange()"
-                    @keydown.native.enter="changeRange()"></v-text-field>
+                    @keydown.enter="changeRange()"></v-text-field>
             </v-col>
         </v-row>
         <apexchart
@@ -32,16 +32,16 @@
 </template>
 
 <script lang="ts">
-    import { defineComponent } from 'vue';
     import _ from 'lodash';
+    import { defineComponent } from 'vue';
     import { useTheme } from 'vuetify';
-    import WidgetHandling from '@/mixins/WidgetHandling';
     import DashboardHandling from '@/mixins/DashboardHandling';
+    import WidgetHandling from '@/mixins/WidgetHandling';
 
     export default defineComponent({
         name: 'AreaChart',
-        props: ['chartData', 'timeVariable', 'yVariables', 'chartOptionsExternal', 'editDialog'],
         mixins: [WidgetHandling, DashboardHandling],
+        props: ['chartData', 'timeVariable', 'yVariables', 'chartOptionsExternal', 'editDialog'],
 
         setup() {
             const theme = useTheme();
@@ -107,17 +107,11 @@
             };
         },
 
-        mounted() {
-            this.$nextTick(() => {
-                const chart = (this.$refs.scatterchart as any).chart;
-                if (chart) {
-                    // console.log('Chart has rendered')
-                    // apply the theme on component mount
-                    this.applyTheme();
-                    // append the series to the chart
-                    this.initializeSeries();
-                }
-            });
+        computed: {
+            // Check if the current Theme is dark
+            isDark() {
+                return this.theme.global.current.value.dark;
+            },
         },
 
         watch: {
@@ -135,11 +129,17 @@
             },
         },
 
-        computed: {
-            // Check if the current Theme is dark
-            isDark() {
-                return this.theme.global.current.value.dark;
-            },
+        mounted() {
+            this.$nextTick(() => {
+                const chart = (this.$refs.scatterchart as any).chart;
+                if (chart) {
+                    // console.log('Chart has rendered')
+                    // apply the theme on component mount
+                    this.applyTheme();
+                    // append the series to the chart
+                    this.initializeSeries();
+                }
+            });
         },
 
         methods: {
diff --git a/aas-web-ui/src/components/Widgets/Switch.vue b/aas-web-ui/src/components/Widgets/Switch.vue
index 7af7bfac..b738e22b 100644
--- a/aas-web-ui/src/components/Widgets/Switch.vue
+++ b/aas-web-ui/src/components/Widgets/Switch.vue
@@ -2,12 +2,12 @@
     <v-container fluid class="pa-0">
         <template v-for="switchElement in inputElements" :key="switchElement.idShort">
             <v-switch
+                v-model="switchElement.value"
                 inset
                 hide-details
                 color="primary"
-                @change="sendSwitch(switchElement)"
-                v-model="switchElement.value"
-                :label="switchElement.name"></v-switch>
+                :label="switchElement.name"
+                @change="sendSwitch(switchElement)"></v-switch>
         </template>
     </v-container>
 </template>
@@ -17,10 +17,7 @@
     import RequestHandling from '@/mixins/RequestHandling';
 
     export default defineComponent({
-        name: 'Switch',
-        components: {
-            RequestHandling,
-        },
+        name: 'SwitchElement',
         mixins: [RequestHandling],
 
         props: ['submodelElementData', 'selectedNode', 'widgetSettings'],
@@ -35,9 +32,7 @@
             };
         },
 
-        mounted() {
-            this.initializeView(); // initialize list
-        },
+        computed: {},
 
         watch: {
             // Watch for changes in the submodelElementData and (re-)initialize the Component
@@ -49,7 +44,9 @@
             },
         },
 
-        computed: {},
+        mounted() {
+            this.initializeView(); // initialize list
+        },
 
         methods: {
             // Initialize the Component
@@ -105,7 +102,7 @@
                 let disableMessage = false;
                 // Send Request to update the value of the property
                 // console.log('Switch Value: ', path, content, headers, context, disableMessage);
-                this.putRequest(path, content, headers, context, disableMessage).then((response: any) => {});
+                this.putRequest(path, content, headers, context, disableMessage);
             },
         },
     });
diff --git a/aas-web-ui/src/main.ts b/aas-web-ui/src/main.ts
index caf45529..1d8dd313 100644
--- a/aas-web-ui/src/main.ts
+++ b/aas-web-ui/src/main.ts
@@ -11,24 +11,20 @@ interface PluginType {
 }
 
 // Components
-import App from './App.vue';
-import { createAppRouter } from './router';
-import { useNavigationStore } from './store/NavigationStore';
-import { useEnvStore } from './store/EnvironmentStore';
-import { useAuthStore } from './store/AuthStore';
-import { reactive } from 'vue';
-
-import VueApexCharts from 'vue3-apexcharts';
-
+import Keycloak from 'keycloak-js';
+import { KeycloakOnLoad } from 'keycloak-js';
+import { createPinia } from 'pinia';
 // Composables
 import { createApp } from 'vue';
 import { defineComponent } from 'vue';
-import { createPinia } from 'pinia';
-
+import VueApexCharts from 'vue3-apexcharts';
 // Plugins
 import { registerPlugins } from '@/plugins';
-import Keycloak from 'keycloak-js';
-import { KeycloakOnLoad } from 'keycloak-js';
+import App from './App.vue';
+import { createAppRouter } from './router';
+import { useAuthStore } from './store/AuthStore';
+import { useEnvStore } from './store/EnvironmentStore';
+import { useNavigationStore } from './store/NavigationStore';
 
 const app = createApp(App);
 
@@ -48,7 +44,7 @@ async function loadUserPlugins() {
     if (envStore.getKeycloakUrl !== '' && envStore.getKeycloakRealm !== '' && envStore.getKeycloakClientId !== '') {
         try {
             await initKeycloak(envStore.getKeycloakUrl, envStore.getKeycloakRealm, envStore.getKeycloakClientId);
-        } catch (error) {
+        } catch {
             alert('Could not connect to Keycloak.');
             return;
         }
@@ -60,7 +56,7 @@ async function loadUserPlugins() {
     const pluginFiles = import.meta.glob('./UserPlugins/*.vue');
     const files = Object.keys(pluginFiles);
 
-    let plugins = [] as Array<PluginType>;
+    const plugins = [] as Array<PluginType>;
 
     await Promise.all(
         files.map(async (path) => {
@@ -80,7 +76,7 @@ async function initKeycloak(keycloakUrl: string, keycloakRealm: string, keycloak
     return new Promise<void>((resolve, reject) => {
         let keycloak: Keycloak | null = null;
 
-        let initOptions = {
+        const initOptions = {
             url: keycloakUrl,
             realm: keycloakRealm,
             clientId: keycloakClientId,
@@ -120,9 +116,6 @@ async function initKeycloak(keycloakUrl: string, keycloakRealm: string, keycloak
                                     // console.log('Token refreshed');
                                     authStore.setToken(keycloak.token);
                                     authStore.setRefreshToken(keycloak.refreshToken);
-                                } else {
-                                    const exp = keycloak?.tokenParsed?.exp as number;
-                                    const timeScew = keycloak?.timeSkew as number;
                                 }
                                 authStore.setAuthStatus(true);
                             })
diff --git a/aas-web-ui/src/mixins/DashboardHandling.ts b/aas-web-ui/src/mixins/DashboardHandling.ts
index 9a75f283..f67be31e 100644
--- a/aas-web-ui/src/mixins/DashboardHandling.ts
+++ b/aas-web-ui/src/mixins/DashboardHandling.ts
@@ -1,11 +1,9 @@
 import { defineComponent } from 'vue';
 import { useRoute } from 'vue-router';
-
-import { useAASStore } from '@/store/AASDataStore';
-import { useEnvStore } from '@/store/EnvironmentStore';
-
 import RequestHandling from '@/mixins/RequestHandling';
 import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
+import { useAASStore } from '@/store/AASDataStore';
+import { useEnvStore } from '@/store/EnvironmentStore';
 
 export default defineComponent({
     name: 'DashboardHandling',
@@ -52,9 +50,9 @@ export default defineComponent({
     methods: {
         async dashboardAdd(item: any) {
             // console.log(item)
-            let group = await this.getAAS();
+            const group = await this.getAAS();
             // console.log(group);
-            let dashboardObj = {
+            const dashboardObj = {
                 title: item.title,
                 endpoint: this.SelectedNode.path,
                 group: {
@@ -74,13 +72,13 @@ export default defineComponent({
             };
             // console.log('Add Element to Dasboard: ', dashboardObj);
             // construct the request
-            let path = this.dashboardServicePath + '/addElement';
-            let headers: Headers = new Headers();
+            const path = this.dashboardServicePath + '/addElement';
+            const headers: Headers = new Headers();
             headers.append('Content-Type', 'application/json');
             headers.append('accept', '*/*');
-            let content = JSON.stringify(dashboardObj);
-            let context = 'adding element to dashboard';
-            let disableMessage = false;
+            const content = JSON.stringify(dashboardObj);
+            const context = 'adding element to dashboard';
+            const disableMessage = false;
             // send the request
             this.postRequest(path, content, headers, context, disableMessage).then((response: any) => {
                 if (response.success) {
@@ -90,9 +88,9 @@ export default defineComponent({
         },
 
         async getGroups() {
-            let path = this.dashboardServicePath + '/groups/summary';
-            let context = 'fetching all groups';
-            let disableMessage = false;
+            const path = this.dashboardServicePath + '/groups/summary';
+            const context = 'fetching all groups';
+            const disableMessage = false;
             const response: any = await this.getRequest(path, context, disableMessage);
             if (response.success) {
                 // console.log(response.data)
@@ -101,10 +99,10 @@ export default defineComponent({
         },
 
         async getElements(group: any) {
-            let pathGroup = this.URLEncode(group);
-            let path = this.dashboardServicePath + '/findGroup/' + pathGroup;
-            let context = 'fetching all elements of a group';
-            let disableMessage = false;
+            const pathGroup = this.URLEncode(group);
+            const path = this.dashboardServicePath + '/findGroup/' + pathGroup;
+            const context = 'fetching all elements of a group';
+            const disableMessage = false;
             const response: any = await this.getRequest(path, context, disableMessage);
             if (response.success) {
                 // console.log(response);
@@ -114,10 +112,10 @@ export default defineComponent({
 
         async deleteGroup(groups: any, groupId: any): Promise<any[]> {
             // console.log(groups)
-            let pathGroup = this.URLEncode(groupId);
-            let path = this.dashboardServicePath + '/deleteGroup/' + pathGroup;
-            let context = 'deleting all elements of a group';
-            let disableMessage = false;
+            const pathGroup = this.URLEncode(groupId);
+            const path = this.dashboardServicePath + '/deleteGroup/' + pathGroup;
+            const context = 'deleting all elements of a group';
+            const disableMessage = false;
             const response: any = await this.deleteRequest(path, context, disableMessage);
             if (response.success) {
                 // console.log(response);
@@ -131,9 +129,9 @@ export default defineComponent({
         },
 
         async deleteSingle(elementId: any): Promise<string | undefined> {
-            let path = this.dashboardServicePath + '/deleteElement/' + elementId;
-            let context = 'deleting one element of a group';
-            let disableMessage = false;
+            const path = this.dashboardServicePath + '/deleteElement/' + elementId;
+            const context = 'deleting one element of a group';
+            const disableMessage = false;
             const response: any = await this.deleteRequest(path, context, disableMessage);
             if (response.success) {
                 return elementId;
@@ -143,13 +141,13 @@ export default defineComponent({
 
         async updateElement(element: any): Promise<any | undefined> {
             // console.log(element)
-            let path = this.dashboardServicePath + '/updateElement/' + element.id;
-            let headers: Headers = new Headers();
+            const path = this.dashboardServicePath + '/updateElement/' + element.id;
+            const headers: Headers = new Headers();
             headers.append('Content-Type', 'application/json');
             headers.append('accept', '*/*');
-            let content = JSON.stringify(element);
-            let context = 'adding element to dashboard';
-            let disableMessage = false;
+            const content = JSON.stringify(element);
+            const context = 'adding element to dashboard';
+            const disableMessage = false;
             // send the request
             const response: any = await this.putRequest(path, content, headers, context, disableMessage);
             if (response.success) {
@@ -163,10 +161,10 @@ export default defineComponent({
                 // console.log(this.SelectedAAS)
                 return this.SelectedAAS;
             } else {
-                let path = this.SelectedAAS.endpoints[0].protocolInformation.href;
-                let context = 'getting aas from endpoint';
-                let disableMessage = false;
-                let response = await this.getRequest(path, context, disableMessage);
+                const path = this.SelectedAAS.endpoints[0].protocolInformation.href;
+                const context = 'getting aas from endpoint';
+                const disableMessage = false;
+                const response = await this.getRequest(path, context, disableMessage);
                 if (response && response.success) {
                     return response.data;
                 }
diff --git a/aas-web-ui/src/mixins/RequestHandling.ts b/aas-web-ui/src/mixins/RequestHandling.ts
index 47190509..3085d969 100644
--- a/aas-web-ui/src/mixins/RequestHandling.ts
+++ b/aas-web-ui/src/mixins/RequestHandling.ts
@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
-import { useNavigationStore } from '@/store/NavigationStore';
 import { useAuthStore } from '@/store/AuthStore';
+import { useNavigationStore } from '@/store/NavigationStore';
 
 export default defineComponent({
     name: 'RequestHandling',
@@ -65,7 +65,7 @@ export default defineComponent({
                 })
                 .then((data) => {
                     // Check if the Server responded with an error
-                    if (data && data.hasOwnProperty('status') && data.status >= 400) {
+                    if (data && Object.prototype.hasOwnProperty.call(data, 'status') && data.status >= 400) {
                         // Error response from the server
                         if (!disableMessage) this.errorHandler(data, context); // Call the error handler
                         return { success: false };
@@ -117,7 +117,7 @@ export default defineComponent({
                 })
                 .then((data) => {
                     // Check if the Server responded with an error
-                    if (data && data.hasOwnProperty('status') && data.status >= 400) {
+                    if (data && Object.prototype.hasOwnProperty.call(data, 'status') && data.status >= 400) {
                         // Error response from the server
                         if (!disableMessage) this.errorHandler(data, context); // Call the error handler
                         return { success: false };
@@ -167,7 +167,7 @@ export default defineComponent({
                 })
                 .then((data) => {
                     // Check if the Server responded with an error
-                    if (data && data.hasOwnProperty('status') && data.status >= 400) {
+                    if (data && Object.prototype.hasOwnProperty.call(data, 'status') && data.status >= 400) {
                         // Error response from the server
                         if (!disableMessage) this.errorHandler(data, context); // Call the error handler
                         return { success: false };
@@ -217,7 +217,7 @@ export default defineComponent({
                 })
                 .then((data) => {
                     // Check if the Server responded with an error
-                    if (data && data.hasOwnProperty('status') && data.status >= 400) {
+                    if (data && Object.prototype.hasOwnProperty.call(data, 'status') && data.status >= 400) {
                         // Error response from the server
                         if (!disableMessage) this.errorHandler(data, context); // Call the error handler
                         return { success: false };
@@ -266,7 +266,7 @@ export default defineComponent({
                 })
                 .then((data) => {
                     // Check if the Server responded with an error
-                    if (data && data.hasOwnProperty('status') && data.status >= 400) {
+                    if (data && Object.prototype.hasOwnProperty.call(data, 'status') && data.status >= 400) {
                         // Error response from the server
                         if (!disableMessage) this.errorHandler(data, context); // Call the error handler
                         return { success: false };
@@ -296,7 +296,7 @@ export default defineComponent({
         // Function to handle errors
         errorHandler(errorData: any, context: string) {
             // console.log('Error: ', errorData, 'Context: ', context)
-            let initialErrorMessage = 'Error ' + context + '!';
+            const initialErrorMessage = 'Error ' + context + '!';
             let errorMessage = '';
 
             // Building error message based on the new error response structure
@@ -307,7 +307,7 @@ export default defineComponent({
                 errorMessage += '\nError: ' + errorData.error;
             }
             if (errorData.timestamp) {
-                let errorDate = new Date(errorData.timestamp).toLocaleString();
+                const errorDate = new Date(errorData.timestamp).toLocaleString();
                 errorMessage += '\nTimestamp: ' + errorDate;
             }
             if (errorData.path) {
diff --git a/aas-web-ui/src/mixins/SubmodelElementHandling.ts b/aas-web-ui/src/mixins/SubmodelElementHandling.ts
index 269f74fd..49838670 100644
--- a/aas-web-ui/src/mixins/SubmodelElementHandling.ts
+++ b/aas-web-ui/src/mixins/SubmodelElementHandling.ts
@@ -1,13 +1,11 @@
+import md5 from 'md5';
+import { v4 as uuidv4 } from 'uuid';
 import { defineComponent } from 'vue';
 import { useRouter } from 'vue-router';
-import { v4 as uuidv4 } from 'uuid';
-import md5 from 'md5';
-
+import RequestHandling from '@/mixins/RequestHandling';
 import { useAASStore } from '@/store/AASDataStore';
 import { useNavigationStore } from '@/store/NavigationStore';
 
-import RequestHandling from '@/mixins/RequestHandling';
-
 export default defineComponent({
     name: 'SubmodelElementHandling',
     mixins: [RequestHandling],
@@ -119,7 +117,7 @@ export default defineComponent({
                 return false;
 
             for (const key of submodelElement.semanticId.keys) {
-                if (key.value.startsWith('http://') || 'https://') {
+                if (key.value.startsWith('http://') || key.value.startsWith('https://')) {
                     // e.g. IDTA IRI like
                     if (new RegExp('/d/d/{0,1}' + '$').test(semanticId)) {
                         if (key.value === semanticId) return true;
@@ -146,7 +144,7 @@ export default defineComponent({
         isNumber(valueType: any) {
             if (!valueType) return false;
             // List of all number types
-            let numberTypes = [
+            const numberTypes = [
                 'double',
                 'float',
                 'integer',
@@ -191,7 +189,7 @@ export default defineComponent({
         },
 
         // Function to download a binary File
-        downloadFile(filename: string, fileContent: Blob, contentType: string) {
+        downloadFile(filename: string, fileContent: Blob) {
             const link = document.createElement('a');
             link.href = window.URL.createObjectURL(fileContent);
             link.download = filename;
@@ -209,14 +207,14 @@ export default defineComponent({
             if (!this.aasRegistryURLMixin.includes('/shell-descriptors')) {
                 this.aasRegistryURLMixin += '/shell-descriptors';
             }
-            let path = this.aasRegistryURLMixin;
-            let context = 'retrieving AAS Data';
-            let disableMessage = false;
+            const path = this.aasRegistryURLMixin;
+            const context = 'retrieving AAS Data';
+            const disableMessage = false;
             try {
                 const response = await this.getRequest(path, context, disableMessage);
                 // console.log('Response: ', response);
                 if (response.success && response.data.result && response.data.result.length > 0) {
-                    let aasList = response.data.result;
+                    const aasList = response.data.result;
                     if (referenceValue[0].type == 'AssetAdministrationShell') {
                         return await this.checkReferenceAAS(aasList, referenceValue);
                     }
@@ -225,7 +223,7 @@ export default defineComponent({
                     }
                 }
                 return { success: false, aas: {}, submodel: {} };
-            } catch (error) {
+            } catch {
                 // handle error
                 return { success: false, aas: {}, submodel: {} };
             }
@@ -259,9 +257,9 @@ export default defineComponent({
             referenceValue: Array<any>
         ): Promise<{ success: boolean; aas?: object; submodel?: object }> {
             const promises = aasList.map(async (aas: any) => {
-                let path = aas.endpoints[0].protocolInformation.href + '/submodel-refs';
-                let context = 'retrieving Submodel References';
-                let disableMessage = false;
+                const path = aas.endpoints[0].protocolInformation.href + '/submodel-refs';
+                const context = 'retrieving Submodel References';
+                const disableMessage = false;
 
                 const response = await this.getRequest(path, context, disableMessage);
                 if (response.success) {
@@ -289,7 +287,7 @@ export default defineComponent({
         // Function to jump to a referenced Element
         jumpToReferencedElement(referencedAAS: any, referenceValue: Array<any>, referencedSubmodel?: any) {
             // console.log('jumpToReferencedElement. AAS: ', referencedAAS, 'Submodel: ', referencedSubmodel);
-            let endpoint = referencedAAS.endpoints[0].protocolInformation.href;
+            const endpoint = referencedAAS.endpoints[0].protocolInformation.href;
             if (referencedSubmodel && Object.keys(referencedSubmodel).length > 0) {
                 // if the referenced Element is a Submodel or SubmodelElement
                 this.jumpToSubmodelElement(referencedSubmodel, referenceValue, referencedAAS, endpoint);
@@ -320,14 +318,14 @@ export default defineComponent({
                             if (referenceValue[index - 1].type == 'SubmodelElementList') {
                                 // console.log('SubmodelElementList: ', this.referenceValue[index - 1])
                                 // check in which position of the list the element is (list needs to be requested to get the position)
-                                let listPath = path;
-                                let context = 'retrieving SubmodelElementList';
-                                let disableMessage = false;
+                                const listPath = path;
+                                const context = 'retrieving SubmodelElementList';
+                                const disableMessage = false;
                                 this.getRequest(listPath, context, disableMessage)
                                     .then((response: any) => {
                                         if (response.success) {
                                             // execute if the Request was successful
-                                            let list = response.data;
+                                            const list = response.data;
                                             list.value.forEach((element: any, i: number) => {
                                                 if (element.idShort == SubmodelElement.value) {
                                                     path += encodeURIComponent('[') + i + encodeURIComponent(']');
@@ -371,9 +369,9 @@ export default defineComponent({
                     this.aasStore.dispatchSelectedAAS(referencedAAS);
                     this.navigationStore.dispatchTriggerAASSelected();
                     // Request the referenced SubmodelElement
-                    let elementPath = path;
-                    let context = 'retrieving SubmodelElement';
-                    let disableMessage = true;
+                    const elementPath = path;
+                    const context = 'retrieving SubmodelElement';
+                    const disableMessage = true;
                     this.getRequest(elementPath, context, disableMessage).then((response: any) => {
                         if (response.success) {
                             // execute if the Request was successful
@@ -483,15 +481,15 @@ export default defineComponent({
                 return Promise.resolve([]);
             }
 
-            let cdPromises = SelectedNode.semanticId.keys.map((key: any) => {
-                let path = conceptDescriptionRepoURL + '/' + this.URLEncode(key.value);
-                let context = 'retrieving ConceptDescriptions';
-                let disableMessage = true;
+            const cdPromises = SelectedNode.semanticId.keys.map((key: any) => {
+                const path = conceptDescriptionRepoURL + '/' + this.URLEncode(key.value);
+                const context = 'retrieving ConceptDescriptions';
+                const disableMessage = true;
 
                 return this.getRequest(path, context, disableMessage).then((response: any) => {
                     if (response.success) {
                         // console.log('ConceptDescription Data: ', response.data);
-                        let conceptDescription = response.data;
+                        const conceptDescription = response.data;
                         conceptDescription.path = path;
                         // Check if ConceptDescription has data to be displayed
                         if (
@@ -606,7 +604,7 @@ export default defineComponent({
         // Name to be displayed
         nameToDisplay(sme: any) {
             if (sme.displayName) {
-                let displayNameEn = sme.displayName.find((displayName: any) => {
+                const displayNameEn = sme.displayName.find((displayName: any) => {
                     return displayName.language === 'en' && displayName.text !== '';
                 });
                 if (displayNameEn && displayNameEn.text) return displayNameEn.text;
diff --git a/aas-web-ui/src/mixins/WidgetHandling.ts b/aas-web-ui/src/mixins/WidgetHandling.ts
index a2560624..a56d2d01 100644
--- a/aas-web-ui/src/mixins/WidgetHandling.ts
+++ b/aas-web-ui/src/mixins/WidgetHandling.ts
@@ -1,10 +1,8 @@
 import { defineComponent } from 'vue';
-
-import { useNavigationStore } from '@/store/NavigationStore';
-import { useAASStore } from '@/store/AASDataStore';
-
 import RequestHandling from '@/mixins/RequestHandling';
 import SubmodelElementHandling from '@/mixins/SubmodelElementHandling';
+import { useAASStore } from '@/store/AASDataStore';
+import { useNavigationStore } from '@/store/NavigationStore';
 
 export default defineComponent({
     name: 'WidgetHandling',
@@ -28,8 +26,8 @@ export default defineComponent({
 
     methods: {
         prepareSeriesValues(chartData: any, yVariables: any) {
-            let newSeries = chartData.map((series: any, index: number) => {
-                let chartValues = series.map((element: any) => ({
+            const newSeries = chartData.map((series: any, index: number) => {
+                const chartValues = series.map((element: any) => ({
                     x: new Date(element.time),
                     y: Number(element.value).toFixed(2),
                 }));
@@ -81,9 +79,9 @@ export default defineComponent({
         },
 
         prepareHistogramData(chartData: any, numberOfCategories: any) {
-            let bins = Number(numberOfCategories);
+            const bins = Number(numberOfCategories);
             // Flatten the array and sort values
-            let allValues = chartData.flat().map((item: any) => Number(item.value));
+            const allValues = chartData.flat().map((item: any) => Number(item.value));
             allValues.sort((a: any, b: any) => a - b);
 
             // Determine range and interval
@@ -93,21 +91,21 @@ export default defineComponent({
             const interval = range / bins;
 
             // Create bins for histogram for each series
-            let histograms = chartData.map((series: any) => {
-                let histogram = new Array(bins).fill(0);
+            const histograms = chartData.map((series: any) => {
+                const histogram = new Array(bins).fill(0);
                 series.forEach((item: any) => {
-                    let value = Number(item.value);
-                    let index = Math.min(Math.floor((value - minValue) / interval), bins - 1);
+                    const value = Number(item.value);
+                    const index = Math.min(Math.floor((value - minValue) / interval), bins - 1);
                     histogram[index]++;
                 });
                 return histogram;
             });
 
             // Prepare categories array
-            let categories = new Array(bins);
+            const categories = new Array(bins);
             for (let i = 0; i < bins; i++) {
-                let rangeStart = minValue + i * interval;
-                let rangeEnd = rangeStart + interval;
+                const rangeStart = minValue + i * interval;
+                const rangeEnd = rangeStart + interval;
                 categories[i] = `${rangeStart.toFixed(2)} - ${rangeEnd.toFixed(2)}`;
             }
 
diff --git a/aas-web-ui/src/plugins/index.ts b/aas-web-ui/src/plugins/index.ts
index ed195162..92dc1296 100644
--- a/aas-web-ui/src/plugins/index.ts
+++ b/aas-web-ui/src/plugins/index.ts
@@ -5,19 +5,18 @@
  */
 
 // Plugins
-import { loadFonts } from './webfontloader';
-import { initializeVuetify } from './vuetify';
-
 // Types
 import type { App } from 'vue';
 import { useEnvStore } from '@/store/EnvironmentStore'; // replace with the path to your store file
+import { initializeVuetify } from './vuetify';
+import { loadFonts } from './webfontloader';
 
 export async function registerPlugins(app: App) {
     loadFonts();
 
     const envStore = useEnvStore();
 
-    let primaryColor = envStore.getEnvPrimaryColor;
+    const primaryColor = envStore.getEnvPrimaryColor;
 
     const vuetify = await initializeVuetify(primaryColor);
     app.use(vuetify);
diff --git a/aas-web-ui/src/plugins/vuetify.ts b/aas-web-ui/src/plugins/vuetify.ts
index a46798bf..66b663f0 100644
--- a/aas-web-ui/src/plugins/vuetify.ts
+++ b/aas-web-ui/src/plugins/vuetify.ts
@@ -7,7 +7,6 @@
 // Styles
 import '@mdi/font/css/materialdesignicons.css';
 import 'vuetify/styles';
-
 // Composables
 import { createVuetify } from 'vuetify';
 
diff --git a/aas-web-ui/src/router.ts b/aas-web-ui/src/router.ts
index 3587d2c5..19aeff4c 100644
--- a/aas-web-ui/src/router.ts
+++ b/aas-web-ui/src/router.ts
@@ -1,12 +1,12 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import MainWindow from '@/components/MainWindow.vue';
-import AASList from '@/components/AppNavigation/AASList.vue';
-import SubmodelList from '@/components/SubmodelList.vue';
-import ComponentVisualization from '@/components/ComponentVisualization.vue';
 import AASViewer from '@/components/AASViewer.vue';
 import About from '@/components/About.vue';
+import AASList from '@/components/AppNavigation/AASList.vue';
+import ComponentVisualization from '@/components/ComponentVisualization.vue';
 import Dashboard from '@/components/Dashboard/Dashboard.vue';
 import DashboardGroup from '@/components/Dashboard/DashboardGroup.vue';
+import MainWindow from '@/components/MainWindow.vue';
+import SubmodelList from '@/components/SubmodelList.vue';
 
 const routes = [
     { path: '/', name: 'MainWindow', component: MainWindow },
diff --git a/aas-web-ui/src/store/AuthStore.ts b/aas-web-ui/src/store/AuthStore.ts
index 191f61c7..3ea491f5 100644
--- a/aas-web-ui/src/store/AuthStore.ts
+++ b/aas-web-ui/src/store/AuthStore.ts
@@ -1,6 +1,5 @@
-import { get } from 'lodash';
-import { defineStore } from 'pinia';
 import Keycloak from 'keycloak-js';
+import { defineStore } from 'pinia';
 
 export const useAuthStore = defineStore({
     id: 'authStore',
diff --git a/aas-web-ui/src/vue-shims.d.ts b/aas-web-ui/src/vue-shims.d.ts
index e8fe42ae..eb892d01 100644
--- a/aas-web-ui/src/vue-shims.d.ts
+++ b/aas-web-ui/src/vue-shims.d.ts
@@ -1,5 +1,5 @@
 declare module '*.vue' {
     import { DefineComponent } from 'vue';
-    const component: DefineComponent<{}, {}, any>;
+    const component: DefineComponent<object, object, any>;
     export default component;
 }
diff --git a/aas-web-ui/tsconfig.json b/aas-web-ui/tsconfig.json
index 262a19e5..f9fe7883 100644
--- a/aas-web-ui/tsconfig.json
+++ b/aas-web-ui/tsconfig.json
@@ -19,5 +19,5 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "vite.config.ts"]
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "vite.config.mts"]
 }
diff --git a/aas-web-ui/vite.config.ts b/aas-web-ui/vite.config.mts
similarity index 83%
rename from aas-web-ui/vite.config.ts
rename to aas-web-ui/vite.config.mts
index 05f745d2..ea921e6b 100644
--- a/aas-web-ui/vite.config.ts
+++ b/aas-web-ui/vite.config.mts
@@ -1,15 +1,18 @@
 // Plugins
 import vue from '@vitejs/plugin-vue';
-import vuetify from 'vite-plugin-vuetify';
-
+import * as path from 'path';
 // Utilities
 import { defineConfig } from 'vite';
-import * as path from 'path';
+import eslintPlugin from 'vite-plugin-eslint';
+import vuetify from 'vite-plugin-vuetify';
 
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [
         vue(),
+        eslintPlugin({
+            include: ['./src/**/*.js', './src/**/*.vue', './src/**/*.ts'],
+        }),
         // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
         vuetify({
             autoImport: true,
diff --git a/aas-web-ui/yarn.lock b/aas-web-ui/yarn.lock
index e43f1de8..c8433a50 100644
--- a/aas-web-ui/yarn.lock
+++ b/aas-web-ui/yarn.lock
@@ -159,11 +159,67 @@
   resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz#acad351d582d157bb145535db2a6ff53dd514b5c"
   integrity sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==
 
+"@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
+  integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
+  dependencies:
+    eslint-visitor-keys "^3.3.0"
+
+"@eslint-community/regexpp@^4.10.0", "@eslint-community/regexpp@^4.11.0":
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.11.0.tgz#b0ffd0312b4a3fd2d6f77237e7248a5ad3a680ae"
+  integrity sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==
+
+"@eslint/config-array@^0.18.0":
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/@eslint/config-array/-/config-array-0.18.0.tgz#37d8fe656e0d5e3dbaea7758ea56540867fd074d"
+  integrity sha512-fTxvnS1sRMu3+JjXwJG0j/i4RT9u4qJ+lqS/yCGap4lH4zZGzQ7tu+xZqQmcMZq5OBZDL4QRxQzRjkWcGt8IVw==
+  dependencies:
+    "@eslint/object-schema" "^2.1.4"
+    debug "^4.3.1"
+    minimatch "^3.1.2"
+
+"@eslint/eslintrc@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-3.1.0.tgz#dbd3482bfd91efa663cbe7aa1f506839868207b6"
+  integrity sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.3.2"
+    espree "^10.0.1"
+    globals "^14.0.0"
+    ignore "^5.2.0"
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    minimatch "^3.1.2"
+    strip-json-comments "^3.1.1"
+
+"@eslint/js@9.9.1", "@eslint/js@^9.9.1":
+  version "9.9.1"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-9.9.1.tgz#4a97e85e982099d6c7ee8410aacb55adaa576f06"
+  integrity sha512-xIDQRsfg5hNBqHz04H1R3scSVwmI+KUbqjsQKHKQ1DAUSaUjYPReZZmS/5PNiKu1fUvzDd6H7DEDKACSEhu+TQ==
+
+"@eslint/object-schema@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@eslint/object-schema/-/object-schema-2.1.4.tgz#9e69f8bb4031e11df79e03db09f9dbbae1740843"
+  integrity sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==
+
 "@fontsource/roboto@^5.0.14":
   version "5.0.14"
   resolved "https://registry.yarnpkg.com/@fontsource/roboto/-/roboto-5.0.14.tgz#a3f67e47116309233ff3bba2c3613d2cf0302529"
   integrity sha512-zHAxlTTm9RuRn9/StwclFJChf3z9+fBrOxC3fw71htjHP1BgXNISwRjdJtAKAmMe5S2BzgpnjkQR93P9EZYI/Q==
 
+"@humanwhocodes/module-importer@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
+  integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
+
+"@humanwhocodes/retry@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/retry/-/retry-0.3.0.tgz#6d86b8cb322660f03d3f0aa94b99bdd8e172d570"
+  integrity sha512-d2CGZR2o7fS6sWB7DG/3a95bGKQyHMACZ5aW8qGkkqQpUoZV6C0X7Pc7l4ZNMZkfNBf4VWNe9E1jRsf0G146Ew==
+
 "@jridgewell/sourcemap-codec@^1.4.15":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
@@ -181,6 +237,40 @@
   dependencies:
     langium "3.0.0"
 
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
+"@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
+"@pkgr/core@^0.1.0":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.1.tgz#1ec17e2edbec25c8306d424ecfbf13c7de1aaa31"
+  integrity sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==
+
+"@rollup/pluginutils@^4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
+  integrity sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==
+  dependencies:
+    estree-walker "^2.0.1"
+    picomatch "^2.2.2"
+
 "@rollup/rollup-android-arm-eabi@4.21.1":
   version "4.21.1"
   resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.1.tgz#c3a7938551273a2b72820cf5d22e54cf41dc206e"
@@ -266,7 +356,30 @@
   resolved "https://registry.yarnpkg.com/@tweenjs/tween.js/-/tween.js-23.1.2.tgz#4e5357fd6742f5aa50447d3fa808aed4cda93ed7"
   integrity sha512-kMCNaZCJugWI86xiEHaY338CU5JpD0B97p1j1IKNn/Zto8PgACjQx0UxbHjmOcLl/dDOBnItwD07KmCs75pxtQ==
 
-"@types/estree@1.0.5":
+"@types/eslint@*":
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-9.6.1.tgz#d5795ad732ce81715f27f75da913004a56751584"
+  integrity sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==
+  dependencies:
+    "@types/estree" "*"
+    "@types/json-schema" "*"
+
+"@types/eslint@^8.4.5":
+  version "8.56.12"
+  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.56.12.tgz#1657c814ffeba4d2f84c0d4ba0f44ca7ea1ca53a"
+  integrity sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==
+  dependencies:
+    "@types/estree" "*"
+    "@types/json-schema" "*"
+
+"@types/eslint__js@^8.42.3":
+  version "8.42.3"
+  resolved "https://registry.yarnpkg.com/@types/eslint__js/-/eslint__js-8.42.3.tgz#d1fa13e5c1be63a10b4e3afe992779f81c1179a0"
+  integrity sha512-alfG737uhmPdnvkrLdZLcEKJ/B8s9Y4hrZ+YAdzUeoArBlSUERA2E87ROfOaS4jd/C45fzOoZzidLc1IPwLqOw==
+  dependencies:
+    "@types/eslint" "*"
+
+"@types/estree@*", "@types/estree@1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
   integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
@@ -276,6 +389,11 @@
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.14.tgz#319b63ad6df705ee2a65a73ef042c8271e696613"
   integrity sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==
 
+"@types/json-schema@*":
+  version "7.0.15"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
+  integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
+
 "@types/leaflet@^1.9.12":
   version "1.9.12"
   resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.9.12.tgz#a6626a0b3fba36fd34723d6e95b22e8024781ad6"
@@ -283,11 +401,6 @@
   dependencies:
     "@types/geojson" "*"
 
-"@types/lodash@^4.17.7":
-  version "4.17.7"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.7.tgz#2f776bcb53adc9e13b2c0dfd493dfcbd7de43612"
-  integrity sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==
-
 "@types/md5@^2.3.5":
   version "2.3.5"
   resolved "https://registry.yarnpkg.com/@types/md5/-/md5-2.3.5.tgz#481cef0a896e3a5dcbfc5a8a8b02c05958af48a5"
@@ -331,6 +444,87 @@
   resolved "https://registry.yarnpkg.com/@types/webxr/-/webxr-0.5.19.tgz#463a27bc06ff1c0a0c997e86b48bf24c5f50a4af"
   integrity sha512-4hxA+NwohSgImdTSlPXEqDqqFktNgmTXQ05ff1uWam05tNGroCMp4G+4XVl6qWm1p7GQ/9oD41kAYsSssF6Mzw==
 
+"@typescript-eslint/eslint-plugin@8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.3.0.tgz#726627fad16d41d20539637efee8c2329fe6be32"
+  integrity sha512-FLAIn63G5KH+adZosDYiutqkOkYEx0nvcwNNfJAf+c7Ae/H35qWwTYvPZUKFj5AS+WfHG/WJJfWnDnyNUlp8UA==
+  dependencies:
+    "@eslint-community/regexpp" "^4.10.0"
+    "@typescript-eslint/scope-manager" "8.3.0"
+    "@typescript-eslint/type-utils" "8.3.0"
+    "@typescript-eslint/utils" "8.3.0"
+    "@typescript-eslint/visitor-keys" "8.3.0"
+    graphemer "^1.4.0"
+    ignore "^5.3.1"
+    natural-compare "^1.4.0"
+    ts-api-utils "^1.3.0"
+
+"@typescript-eslint/parser@8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-8.3.0.tgz#3c72c32bc909cb91ce3569e7d11d729ad84deafa"
+  integrity sha512-h53RhVyLu6AtpUzVCYLPhZGL5jzTD9fZL+SYf/+hYOx2bDkyQXztXSc4tbvKYHzfMXExMLiL9CWqJmVz6+78IQ==
+  dependencies:
+    "@typescript-eslint/scope-manager" "8.3.0"
+    "@typescript-eslint/types" "8.3.0"
+    "@typescript-eslint/typescript-estree" "8.3.0"
+    "@typescript-eslint/visitor-keys" "8.3.0"
+    debug "^4.3.4"
+
+"@typescript-eslint/scope-manager@8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-8.3.0.tgz#834301d2e70baf924c26818b911bdc40086f7468"
+  integrity sha512-mz2X8WcN2nVu5Hodku+IR8GgCOl4C0G/Z1ruaWN4dgec64kDBabuXyPAr+/RgJtumv8EEkqIzf3X2U5DUKB2eg==
+  dependencies:
+    "@typescript-eslint/types" "8.3.0"
+    "@typescript-eslint/visitor-keys" "8.3.0"
+
+"@typescript-eslint/type-utils@8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-8.3.0.tgz#c1ae6af8c21a27254321016b052af67ddb44a9ac"
+  integrity sha512-wrV6qh//nLbfXZQoj32EXKmwHf4b7L+xXLrP3FZ0GOUU72gSvLjeWUl5J5Ue5IwRxIV1TfF73j/eaBapxx99Lg==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "8.3.0"
+    "@typescript-eslint/utils" "8.3.0"
+    debug "^4.3.4"
+    ts-api-utils "^1.3.0"
+
+"@typescript-eslint/types@8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.3.0.tgz#378e62447c2d7028236e55a81d3391026600563b"
+  integrity sha512-y6sSEeK+facMaAyixM36dQ5NVXTnKWunfD1Ft4xraYqxP0lC0POJmIaL/mw72CUMqjY9qfyVfXafMeaUj0noWw==
+
+"@typescript-eslint/typescript-estree@8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.3.0.tgz#3e3d38af101ba61a8568f034733b72bfc9f176b9"
+  integrity sha512-Mq7FTHl0R36EmWlCJWojIC1qn/ZWo2YiWYc1XVtasJ7FIgjo0MVv9rZWXEE7IK2CGrtwe1dVOxWwqXUdNgfRCA==
+  dependencies:
+    "@typescript-eslint/types" "8.3.0"
+    "@typescript-eslint/visitor-keys" "8.3.0"
+    debug "^4.3.4"
+    fast-glob "^3.3.2"
+    is-glob "^4.0.3"
+    minimatch "^9.0.4"
+    semver "^7.6.0"
+    ts-api-utils "^1.3.0"
+
+"@typescript-eslint/utils@8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.3.0.tgz#b10972319deac5959c7a7075d0cf2b5e1de7ec08"
+  integrity sha512-F77WwqxIi/qGkIGOGXNBLV7nykwfjLsdauRB/DOFPdv6LTF3BHHkBpq81/b5iMPSF055oO2BiivDJV4ChvNtXA==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.4.0"
+    "@typescript-eslint/scope-manager" "8.3.0"
+    "@typescript-eslint/types" "8.3.0"
+    "@typescript-eslint/typescript-estree" "8.3.0"
+
+"@typescript-eslint/visitor-keys@8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.3.0.tgz#320d747d107af1eef1eb43fbc4ccdbddda13068b"
+  integrity sha512-RmZwrTbQ9QveF15m/Cl28n0LXD6ea2CjkhH5rQ55ewz3H24w+AMCJHPVYaZ8/0HoG8Z3cLLFFycRXxeO2tz9FA==
+  dependencies:
+    "@typescript-eslint/types" "8.3.0"
+    eslint-visitor-keys "^3.4.3"
+
 "@vitejs/plugin-vue@^5.1.2":
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-5.1.2.tgz#f11091e0130eca6c1ca8cfb85ee71ea53b255d31"
@@ -483,6 +677,38 @@
   resolved "https://registry.yarnpkg.com/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz#7272d89f8e4f6fb7a1600c28c378cc18d3b577b9"
   integrity sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==
 
+acorn-jsx@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
+
+acorn@^8.12.0, acorn@^8.9.0:
+  version "8.12.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.12.1.tgz#71616bdccbe25e27a54439e0046e89ca76df2248"
+  integrity sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==
+
+ajv@^6.12.4:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
 anymatch@~3.1.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
@@ -504,6 +730,11 @@ apexcharts@^3.52.0:
     svg.resize.js "^1.4.3"
     svg.select.js "^3.0.1"
 
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -514,6 +745,19 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
   integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
 
+boolbase@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+  integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
 brace-expansion@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
@@ -521,13 +765,26 @@ brace-expansion@^2.0.1:
   dependencies:
     balanced-match "^1.0.0"
 
-braces@~3.0.2:
+braces@^3.0.3, braces@~3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
   integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
   dependencies:
     fill-range "^7.1.1"
 
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
+
+chalk@^4.0.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 charenc@0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
@@ -567,6 +824,18 @@ chevrotain@~11.0.3:
   optionalDependencies:
     fsevents "~2.3.2"
 
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
 commander@7:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
@@ -582,6 +851,11 @@ computeds@^0.0.1:
   resolved "https://registry.yarnpkg.com/computeds/-/computeds-0.0.1.tgz#215b08a4ba3e08a11ff6eee5d6d8d7166a97ce2e"
   integrity sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==
 
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
+
 cose-base@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/cose-base/-/cose-base-1.0.3.tgz#650334b41b869578a543358b80cda7e0abe0a60a"
@@ -589,11 +863,25 @@ cose-base@^1.0.0:
   dependencies:
     layout-base "^1.0.0"
 
+cross-spawn@^7.0.2:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
 crypt@0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b"
   integrity sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==
 
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
 csstype@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
@@ -900,6 +1188,13 @@ de-indent@^1.0.2:
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
   integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
 
+debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.6.tgz#2ab2c38fbaffebf8aa95fdfe6d88438c7a13c52b"
+  integrity sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==
+  dependencies:
+    ms "2.1.2"
+
 debug@^4.3.3:
   version "4.3.5"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.5.tgz#e83444eceb9fedd4a1da56d671ae2446a01a6e1e"
@@ -907,6 +1202,11 @@ debug@^4.3.3:
   dependencies:
     ms "2.1.2"
 
+deep-is@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
+  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
+
 delaunator@5:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-5.0.1.tgz#39032b08053923e924d6094fe2cde1a99cc51278"
@@ -953,16 +1253,211 @@ esbuild@^0.21.3:
     "@esbuild/win32-ia32" "0.21.5"
     "@esbuild/win32-x64" "0.21.5"
 
-estree-walker@^2.0.2:
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
+eslint-config-prettier@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz#31af3d94578645966c082fcb71a5846d3c94867f"
+  integrity sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==
+
+eslint-plugin-prettier@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz#d1c8f972d8f60e414c25465c163d16f209411f95"
+  integrity sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+    synckit "^0.9.1"
+
+eslint-plugin-promise@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-7.1.0.tgz#06b3ad6d36b3c3ef3ec201c8a8d97049cf5dbb20"
+  integrity sha512-8trNmPxdAy3W620WKDpaS65NlM5yAumod6XeC4LOb+jxlkG4IVcp68c6dXY2ev+uT4U1PtG57YDV6EGAXN0GbQ==
+
+eslint-plugin-simple-import-sort@^12.1.1:
+  version "12.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-12.1.1.tgz#e64bfdaf91c5b98a298619aa634a9f7aa43b709e"
+  integrity sha512-6nuzu4xwQtE3332Uz0to+TxDQYRLTKRESSc2hefVT48Zc8JthmN23Gx9lnYhu0FtkRSL1oxny3kJ2aveVhmOVA==
+
+eslint-plugin-vue@^9.27.0:
+  version "9.27.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.27.0.tgz#c22dae704a03d9ecefa81364ff89f60ce0481f94"
+  integrity sha512-5Dw3yxEyuBSXTzT5/Ge1X5kIkRTQ3nvBn/VwPwInNiZBSJOO/timWMUaflONnFBzU6NhB68lxnCda7ULV5N7LA==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.4.0"
+    globals "^13.24.0"
+    natural-compare "^1.4.0"
+    nth-check "^2.1.1"
+    postcss-selector-parser "^6.0.15"
+    semver "^7.6.0"
+    vue-eslint-parser "^9.4.3"
+    xml-name-validator "^4.0.0"
+
+eslint-scope@^7.1.1:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
+  integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^5.2.0"
+
+eslint-scope@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-8.0.2.tgz#5cbb33d4384c9136083a71190d548158fe128f94"
+  integrity sha512-6E4xmrTw5wtxnLA5wYL3WDfhZ/1bUBGOXV0zQvVRDOtrR8D0p6W7fs3JweNYhwRYeGvd/1CKX2se0/2s7Q/nJA==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^5.2.0"
+
+eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
+  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
+
+eslint-visitor-keys@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-4.0.0.tgz#e3adc021aa038a2a8e0b2f8b0ce8f66b9483b1fb"
+  integrity sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==
+
+eslint@^9.9.1:
+  version "9.9.1"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-9.9.1.tgz#147ac9305d56696fb84cf5bdecafd6517ddc77ec"
+  integrity sha512-dHvhrbfr4xFQ9/dq+jcVneZMyRYLjggWjk6RVsIiHsP8Rz6yZ8LvZ//iU4TrZF+SXWG+JkNF2OyiZRvzgRDqMg==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.11.0"
+    "@eslint/config-array" "^0.18.0"
+    "@eslint/eslintrc" "^3.1.0"
+    "@eslint/js" "9.9.1"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@humanwhocodes/retry" "^0.3.0"
+    "@nodelib/fs.walk" "^1.2.8"
+    ajv "^6.12.4"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.3.2"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^8.0.2"
+    eslint-visitor-keys "^4.0.0"
+    espree "^10.1.0"
+    esquery "^1.5.0"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^8.0.0"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    ignore "^5.2.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    is-path-inside "^3.0.3"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
+    natural-compare "^1.4.0"
+    optionator "^0.9.3"
+    strip-ansi "^6.0.1"
+    text-table "^0.2.0"
+
+espree@^10.0.1, espree@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-10.1.0.tgz#8788dae611574c0f070691f522e4116c5a11fc56"
+  integrity sha512-M1M6CpiE6ffoigIOWYO9UDP8TMUw9kqb21tf+08IgDYjCsOvCuDt4jQcZmoYxx+w7zlKw9/N0KXfto+I8/FrXA==
+  dependencies:
+    acorn "^8.12.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^4.0.0"
+
+espree@^9.3.1:
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
+  integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
+  dependencies:
+    acorn "^8.9.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^3.4.1"
+
+esquery@^1.4.0, esquery@^1.5.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7"
+  integrity sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==
+  dependencies:
+    estraverse "^5.1.0"
+
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^5.1.0, estraverse@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
+
+estree-walker@^2.0.1, estree-walker@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
 
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-diff@^1.1.2:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.3.0.tgz#ece407fa550a64d638536cd727e129c61616e0f0"
+  integrity sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==
+
+fast-glob@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
+  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fast-levenshtein@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
+
+fastq@^1.6.0:
+  version "1.17.1"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.17.1.tgz#2a523f07a4e7b1e81a42b91b8bf2254107753b47"
+  integrity sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==
+  dependencies:
+    reusify "^1.0.4"
+
 fflate@~0.8.2:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.8.2.tgz#fc8631f5347812ad6028bbe4a2308b2792aa1dea"
   integrity sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==
 
+file-entry-cache@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-8.0.0.tgz#7787bddcf1131bffb92636c69457bbc0edd6d81f"
+  integrity sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==
+  dependencies:
+    flat-cache "^4.0.0"
+
 fill-range@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
@@ -970,23 +1465,73 @@ fill-range@^7.1.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+find-up@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
+  dependencies:
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
+
+flat-cache@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-4.0.1.tgz#0ece39fcb14ee012f4b0410bd33dd9c1f011127c"
+  integrity sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==
+  dependencies:
+    flatted "^3.2.9"
+    keyv "^4.5.4"
+
+flatted@^3.2.9:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a"
+  integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
+
 fsevents@~2.3.2, fsevents@~2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
   integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
 
-glob-parent@~5.1.2:
+glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
   dependencies:
     is-glob "^4.0.1"
 
+glob-parent@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
+  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
+  dependencies:
+    is-glob "^4.0.3"
+
+globals@^13.24.0:
+  version "13.24.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
+  integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
+  dependencies:
+    type-fest "^0.20.2"
+
+globals@^14.0.0:
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-14.0.0.tgz#898d7413c29babcf6bafe56fcadded858ada724e"
+  integrity sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==
+
+graphemer@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
+  integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
+
 hachure-fill@^0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/hachure-fill/-/hachure-fill-0.5.2.tgz#d19bc4cc8750a5962b47fb1300557a85fcf934cc"
   integrity sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==
 
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
 he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
@@ -999,11 +1544,29 @@ iconv-lite@0.6:
   dependencies:
     safer-buffer ">= 2.1.2 < 3.0.0"
 
+ignore@^5.2.0, ignore@^5.3.1:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
+  integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
+
 immutable@^4.0.0:
   version "4.3.7"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.7.tgz#c70145fc90d89fb02021e65c84eb0226e4e5a381"
   integrity sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==
 
+import-fresh@^3.2.1:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
+  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
+
 "internmap@1 - 2":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
@@ -1031,7 +1594,7 @@ is-extglob@^2.1.1:
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
   integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
 
-is-glob@^4.0.1, is-glob@~4.0.1:
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
   integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
@@ -1043,11 +1606,43 @@ is-number@^7.0.0:
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
   integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
 
+is-path-inside@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
+  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
 js-sha256@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/js-sha256/-/js-sha256-0.11.0.tgz#256a921d9292f7fe98905face82e367abaca9576"
   integrity sha512-6xNlKayMZvds9h1Y1VWc0fQHQ82BxTXizWPEtEeGvmOUYpBRy4gbWroHLpzowe6xiQhHpelCQiE7HEdznyBL9Q==
 
+js-yaml@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
+  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
+  dependencies:
+    argparse "^2.0.1"
+
+json-buffer@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
+  integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
+
+json-schema-traverse@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
+  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
+
+json-stable-stringify-without-jsonify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
+  integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
+
 jwt-decode@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-4.0.0.tgz#2270352425fd413785b2faf11f6e755c5151bd4b"
@@ -1068,6 +1663,13 @@ keycloak-js@^25.0.4:
     js-sha256 "^0.11.0"
     jwt-decode "^4.0.0"
 
+keyv@^4.5.4:
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
+  integrity sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==
+  dependencies:
+    json-buffer "3.0.1"
+
 khroma@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/khroma/-/khroma-2.1.0.tgz#45f2ce94ce231a437cf5b63c2e886e6eb42bbbb1"
@@ -1094,11 +1696,31 @@ leaflet@^1.9.4:
   resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
   integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
 
+levn@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
+  dependencies:
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
+
+locate-path@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
+  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
+  dependencies:
+    p-locate "^5.0.0"
+
 lodash-es@4.17.21, lodash-es@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
 
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
 lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
@@ -1125,6 +1747,11 @@ md5@^2.3.0:
     crypt "0.0.2"
     is-buffer "~1.1.6"
 
+merge2@^1.3.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
 mermaid@^11.0.2:
   version "11.0.2"
   resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-11.0.2.tgz#d2470d11fbadf80971c651ece59191ea6656c3aa"
@@ -1153,7 +1780,22 @@ meshoptimizer@~0.18.1:
   resolved "https://registry.yarnpkg.com/meshoptimizer/-/meshoptimizer-0.18.1.tgz#cdb90907f30a7b5b1190facd3b7ee6b7087797d8"
   integrity sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==
 
-minimatch@^9.0.3:
+micromatch@^4.0.4:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
+  dependencies:
+    braces "^3.0.3"
+    picomatch "^2.3.1"
+
+minimatch@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimatch@^9.0.3, minimatch@^9.0.4:
   version "9.0.5"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
   integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
@@ -1175,11 +1817,56 @@ nanoid@^3.3.7:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
 
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+  integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
+
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
+nth-check@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
+  integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
+  dependencies:
+    boolbase "^1.0.0"
+
+optionator@^0.9.3:
+  version "0.9.4"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.4.tgz#7ea1c1a5d91d764fb282139c88fe11e182a3a734"
+  integrity sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==
+  dependencies:
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.5"
+
+p-limit@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.1.0"
+
+p-locate@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
+  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
+  dependencies:
+    p-limit "^3.0.2"
+
+parent-module@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
+  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
+  dependencies:
+    callsites "^3.0.0"
+
 path-browserify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd"
@@ -1190,12 +1877,22 @@ path-data-parser@0.1.0, path-data-parser@^0.1.0:
   resolved "https://registry.yarnpkg.com/path-data-parser/-/path-data-parser-0.1.0.tgz#8f5ba5cc70fc7becb3dcefaea08e2659aba60b8c"
   integrity sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==
 
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
 picocolors@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
   integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
 
-picomatch@^2.0.4, picomatch@^2.2.1:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -1221,6 +1918,14 @@ points-on-path@^0.2.1:
     path-data-parser "0.1.0"
     points-on-curve "0.2.0"
 
+postcss-selector-parser@^6.0.15:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de"
+  integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss@^8.4.40, postcss@^8.4.41:
   version "8.4.41"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.41.tgz#d6104d3ba272d882fe18fc07d15dc2da62fa2681"
@@ -1230,11 +1935,33 @@ postcss@^8.4.40, postcss@^8.4.41:
     picocolors "^1.0.1"
     source-map-js "^1.2.0"
 
-prettier@3.3.3:
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
+
+prettier-linter-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
+  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
+  dependencies:
+    fast-diff "^1.1.2"
+
+prettier@^3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.3.tgz#30c54fe0be0d8d12e6ae61dbb10109ea00d53105"
   integrity sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==
 
+punycode@^2.1.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
+  integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
+
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
 readdirp@~3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
@@ -1242,6 +1969,16 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+resolve-from@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
+  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
+
+reusify@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
+  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
+
 roboto-fontface@*:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/roboto-fontface/-/roboto-fontface-0.10.0.tgz#7eee40cfa18b1f7e4e605eaf1a2740afb6fd71b0"
@@ -1252,6 +1989,13 @@ robust-predicates@^3.0.2:
   resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-3.0.2.tgz#d5b28528c4824d20fc48df1928d41d9efa1ad771"
   integrity sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==
 
+rollup@^2.77.2:
+  version "2.79.1"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.79.1.tgz#bedee8faef7c9f93a2647ac0108748f497f081c7"
+  integrity sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 rollup@^4.20.0:
   version "4.21.1"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.21.1.tgz#65b9b9e9de9a64604fab083fb127f3e9eac2935d"
@@ -1287,6 +2031,13 @@ roughjs@^4.6.6:
     points-on-curve "^0.2.0"
     points-on-path "^0.2.1"
 
+run-parallel@^1.1.9:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
+  dependencies:
+    queue-microtask "^1.2.2"
+
 rw@1:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
@@ -1306,21 +2057,57 @@ sass@^1.77.8:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
+semver@^7.3.6, semver@^7.6.0:
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+
 semver@^7.5.4:
   version "7.6.2"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.2.tgz#1e3b34759f896e8f14d6134732ce798aeb0c6e13"
   integrity sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==
 
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
   integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
 
+strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-json-comments@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
 stylis@^4.3.1:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.4.tgz#ca5c6c4a35c4784e4e93a2a24dc4e9fa075250a4"
   integrity sha512-osIBl6BGUmSfDkyH2mB7EFvCJntXDrLhKjHTRj/rK6xLH0yuPrHULDRQzKokSOD4VoorhtKpfcfW1GAntu8now==
 
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
 svg.draggable.js@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz#c514a2f1405efb6f0263e7958f5b68fce50603ba"
@@ -1376,6 +2163,19 @@ svg.select.js@^3.0.1:
   dependencies:
     svg.js "^2.6.5"
 
+synckit@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.9.1.tgz#febbfbb6649979450131f64735aa3f6c14575c88"
+  integrity sha512-7gr8p9TQP6RAHusBOSLs46F4564ZrjV8xFmw5zCmgmhGUcw2hxsShhJ6CEiHQMgPDwAQ1fWHPM0ypc4RMAig4A==
+  dependencies:
+    "@pkgr/core" "^0.1.0"
+    tslib "^2.6.2"
+
+text-table@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+  integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
+
 three@^0.167.1:
   version "0.167.1"
   resolved "https://registry.yarnpkg.com/three/-/three-0.167.1.tgz#3fe4ba2b0a03fd662afe4977a56803d955b61689"
@@ -1388,11 +2188,42 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+ts-api-utils@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.3.0.tgz#4b490e27129f1e8e686b45cc4ab63714dc60eea1"
+  integrity sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==
+
 ts-dedent@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5"
   integrity sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==
 
+tslib@^2.6.2:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.7.0.tgz#d9b40c5c40ab59e8738f297df3087bf1a2690c01"
+  integrity sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==
+
+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
+type-fest@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
+  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
+
+typescript-eslint@^8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/typescript-eslint/-/typescript-eslint-8.3.0.tgz#f4d9c5ba71f6bead03ec41ecb2bece1de511e49f"
+  integrity sha512-EvWjwWLwwKDIJuBjk2I6UkV8KEQcwZ0VM10nR1rIunRDIP67QJTZAHBXTX0HW/oI1H10YESF8yWie8fRQxjvFA==
+  dependencies:
+    "@typescript-eslint/eslint-plugin" "8.3.0"
+    "@typescript-eslint/parser" "8.3.0"
+    "@typescript-eslint/utils" "8.3.0"
+
 typescript@^5.5.4:
   version "5.5.4"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.4.tgz#d9852d6c82bad2d2eda4fd74a5762a8f5909e9ba"
@@ -1408,6 +2239,18 @@ upath@^2.0.1:
   resolved "https://registry.yarnpkg.com/upath/-/upath-2.0.1.tgz#50c73dea68d6f6b990f51d279ce6081665d61a8b"
   integrity sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==
 
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  dependencies:
+    punycode "^2.1.0"
+
+util-deprecate@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
+
 uuid@^10.0.0:
   version "10.0.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-10.0.0.tgz#5a95aa454e6e002725c79055fd42aaba30ca6294"
@@ -1418,6 +2261,15 @@ uuid@^9.0.1:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
   integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
 
+vite-plugin-eslint@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/vite-plugin-eslint/-/vite-plugin-eslint-1.8.1.tgz#0381b8272e7f0fd8b663311b64f7608d55d8b04c"
+  integrity sha512-PqdMf3Y2fLO9FsNPmMX+//2BF5SF8nEWspZdgl4kSt7UvHDRHVVfHvxsD7ULYzZrJDGRxR81Nq7TOFgwMnUang==
+  dependencies:
+    "@rollup/pluginutils" "^4.2.1"
+    "@types/eslint" "^8.4.5"
+    rollup "^2.77.2"
+
 vite-plugin-vuetify@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/vite-plugin-vuetify/-/vite-plugin-vuetify-2.0.4.tgz#9beb700ee50da58d83399721d6cf4b0af83202d5"
@@ -1478,6 +2330,19 @@ vue-demi@^0.14.10:
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.10.tgz#afc78de3d6f9e11bf78c55e8510ee12814522f04"
   integrity sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==
 
+vue-eslint-parser@^9.4.3:
+  version "9.4.3"
+  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz#9b04b22c71401f1e8bca9be7c3e3416a4bde76a8"
+  integrity sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==
+  dependencies:
+    debug "^4.3.4"
+    eslint-scope "^7.1.1"
+    eslint-visitor-keys "^3.3.0"
+    espree "^9.3.1"
+    esquery "^1.4.0"
+    lodash "^4.17.21"
+    semver "^7.3.6"
+
 vue-router@^4.4.3:
   version "4.4.3"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.4.3.tgz#58a39dc804632bfb6d26f052aa8f6718bd130299"
@@ -1519,3 +2384,25 @@ webfontloader@^1.0.0:
   version "1.6.28"
   resolved "https://registry.yarnpkg.com/webfontloader/-/webfontloader-1.6.28.tgz#db786129253cb6e8eae54c2fb05f870af6675bae"
   integrity sha512-Egb0oFEga6f+nSgasH3E0M405Pzn6y3/9tOVanv/DLfa1YBIgcv90L18YyWnvXkRbIM17v5Kv6IT2N6g1x5tvQ==
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+word-wrap@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
+  integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
+
+xml-name-validator@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz#79a006e2e63149a8600f15430f0a4725d1524835"
+  integrity sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==
+
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==