diff --git a/eslint.config.js b/eslint.config.js
index 5c086d03b..ce4e62946 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -3,11 +3,11 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { recommendedVue2 } from '@nextcloud/eslint-config'
+import { recommended } from '@nextcloud/eslint-config'
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 
 export default [
-	...recommendedVue2,
+	...recommended,
 	eslintPluginPrettierRecommended,
 	{
 		rules: {
diff --git a/package-lock.json b/package-lock.json
index ab95849ba..67169227e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
       "dependencies": {
         "@nextcloud/auth": "^2.5.3",
         "@nextcloud/axios": "^2.5.2",
-        "@nextcloud/dialogs": "^6.4.2",
+        "@nextcloud/dialogs": "^7.0.1",
         "@nextcloud/event-bus": "^3.3.3",
         "@nextcloud/files": "^3.12.1",
         "@nextcloud/initial-state": "^3.0.0",
@@ -19,16 +19,17 @@
         "@nextcloud/logger": "^3.0.3",
         "@nextcloud/moment": "^1.3.5",
         "@nextcloud/router": "^3.1.0",
-        "@nextcloud/vue": "^8.36.0",
+        "@nextcloud/vue": "^9.0.1",
         "debounce": "^3.0.0",
         "markdown-it": "^14.1.0",
         "p-queue": "^9.1.0",
+        "pinia": "^3.0.4",
         "qrcode": "^1.5.4",
         "v-click-outside": "^3.2.0",
-        "vue": "^2.7.16",
+        "vue": "^3.5.22",
         "vue-material-design-icons": "^5.3.1",
-        "vue-router": "^3.6.5",
-        "vuedraggable": "^2.24.3"
+        "vue-router": "^4.6.0",
+        "vuedraggable": "^4.1.0"
       },
       "devDependencies": {
         "@mdi/js": "^7.4.47",
@@ -38,7 +39,7 @@
         "@nextcloud/eslint-config": "^9.0.0-rc.8",
         "@nextcloud/prettier-config": "^1.2.0",
         "@nextcloud/stylelint-config": "^3.2.1",
-        "@nextcloud/vite-config": "^1.7.2",
+        "@nextcloud/vite-config": "^2.5.1",
         "@playwright/test": "^1.58.2",
         "@vue/tsconfig": "^0.5.1",
         "eslint-config-prettier": "^10.1.8",
@@ -212,6 +213,22 @@
         "@keyv/serialize": "^1.1.1"
       }
     },
+    "node_modules/@ckpack/vue-color": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@ckpack/vue-color/-/vue-color-1.6.0.tgz",
+      "integrity": "sha512-b9kFTKhYbNArfgP1lmnaVm0VNsWdZjqIbyHUYry7mZ+E7JeTQclbjq1+2xWn0SE3wzqRYlXmAVjECPOgteWmMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.6.0",
+        "material-colors": "^1.2.6"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/@csstools/css-parser-algorithms": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
@@ -348,6 +365,15 @@
         "postcss-selector-parser": "^7.1.1"
       }
     },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+      "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@es-joy/jsdoccomment": {
       "version": "0.83.0",
       "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.83.0.tgz",
@@ -1251,7 +1277,6 @@
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@js-sdsl/ordered-map": {
@@ -1273,54 +1298,6 @@
       "license": "MIT",
       "peer": true
     },
-    "node_modules/@linusborg/vue-simple-portal": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/@linusborg/vue-simple-portal/-/vue-simple-portal-0.1.5.tgz",
-      "integrity": "sha512-dq+oubEVW4UabBoQxmH97GiDa+F6sTomw4KcXFHnXEpw69rdkXFCxo1WzwuvWjoLiUVYJTyN1dtlUvTa50VcXg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "nanoid": "^3.1.20"
-      },
-      "peerDependencies": {
-        "vue": "^2.6.6"
-      }
-    },
-    "node_modules/@mapbox/hast-util-table-cell-style": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/@mapbox/hast-util-table-cell-style/-/hast-util-table-cell-style-0.2.1.tgz",
-      "integrity": "sha512-LyQz4XJIdCdY/+temIhD/Ed0x/p4GAOUycpFSEK2Ads1CPKZy6b7V/2ROEtQiLLQ8soIs0xe/QAoR6kwpyW/yw==",
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "unist-util-visit": "^1.4.1"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@mapbox/hast-util-table-cell-style/node_modules/unist-util-is": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz",
-      "integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==",
-      "license": "MIT"
-    },
-    "node_modules/@mapbox/hast-util-table-cell-style/node_modules/unist-util-visit": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz",
-      "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==",
-      "license": "MIT",
-      "dependencies": {
-        "unist-util-visit-parents": "^2.0.0"
-      }
-    },
-    "node_modules/@mapbox/hast-util-table-cell-style/node_modules/unist-util-visit-parents": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz",
-      "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==",
-      "license": "MIT",
-      "dependencies": {
-        "unist-util-is": "^3.0.0"
-      }
-    },
     "node_modules/@mdi/js": {
       "version": "7.4.47",
       "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz",
@@ -1525,9 +1502,9 @@
       }
     },
     "node_modules/@nextcloud/dialogs": {
-      "version": "6.4.2",
-      "resolved": "https://registry.npmjs.org/@nextcloud/dialogs/-/dialogs-6.4.2.tgz",
-      "integrity": "sha512-xj6fyUdb56StWt1DWeDHYnqK0Ck7EWQLUEyWtXHnneknoOV3x/Y0HPRL5L2PTJaDuVQB8TcVW53JjR38JG9W6Q==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@nextcloud/dialogs/-/dialogs-7.2.0.tgz",
+      "integrity": "sha512-seb2yYnGsP72t3aeK7WdcgfANpb/AHYc86Fz0kfzM11tvdqbs6Mz4Ja3bxccIJFXoyAp+NYS9UKpxA7bAQPywQ==",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "@mdi/js": "^7.4.47",
@@ -1541,20 +1518,17 @@
         "@nextcloud/paths": "^3.0.0",
         "@nextcloud/router": "^3.1.0",
         "@nextcloud/sharing": "^0.3.0",
+        "@nextcloud/vue": "^9.3.1",
         "@types/toastify-js": "^1.12.4",
-        "@vueuse/core": "^11.3.0",
+        "@vueuse/core": "^14.1.0",
         "cancelable-promise": "^4.3.1",
         "p-queue": "^9.0.1",
         "toastify-js": "^1.12.0",
-        "vue-frag": "^1.4.3",
+        "vue": "^3.5.25",
         "webdav": "^5.8.0"
       },
       "engines": {
-        "node": "^20.0.0 || ^22.0.0 || ^24.0.0"
-      },
-      "peerDependencies": {
-        "@nextcloud/vue": "^8.24.0",
-        "vue": "^2.7.16"
+        "node": "^20 || ^22 || ^24"
       }
     },
     "node_modules/@nextcloud/e2e-test-server": {
@@ -1777,14 +1751,14 @@
       }
     },
     "node_modules/@nextcloud/vite-config": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vite-config/-/vite-config-1.7.2.tgz",
-      "integrity": "sha512-5KILNBVEComCyFw6OI2QKvAT5bTMo3Z0o/YN+UpAm8LC3CnuLplRl5Z4UPQZMKdQeMHZ2WXmqL+biSfM7bweJw==",
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vite-config/-/vite-config-2.5.2.tgz",
+      "integrity": "sha512-RoYMsMNyryZ2LTyFWODuVLmVwII8J99KUCFdvnPVosXELZq8oxxWmwGdYPyCavKMZrZ6JRZ2tUvnJ8MCKk78Uw==",
       "dev": true,
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "@rollup/plugin-replace": "^6.0.2",
-        "@vitejs/plugin-vue2": "^2.3.4",
+        "@vitejs/plugin-vue": "^6.0.1",
         "browserslist-to-esbuild": "^2.1.1",
         "magic-string": "^0.30.19",
         "rollup-plugin-corejs": "^1.0.1",
@@ -1797,8 +1771,7 @@
         "vite-plugin-node-polyfills": "^0.24.0"
       },
       "engines": {
-        "node": "^20.0.0 || ^22.0.0 || ^24.0.0",
-        "npm": "^10.5.1"
+        "node": "^20 || ^22 || ^24"
       },
       "peerDependencies": {
         "browserslist": ">=4.0",
@@ -1807,122 +1780,57 @@
       }
     },
     "node_modules/@nextcloud/vue": {
-      "version": "8.36.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-8.36.0.tgz",
-      "integrity": "sha512-x1MEh4nvCrD1zoJ3ybhtbSDox+1wyHRP7st95Uu14Wm630quRrfXGaQ1bxqaZ7en/wqaihR0NPyQKfmjrPmseg==",
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/@nextcloud/vue/-/vue-9.4.0.tgz",
+      "integrity": "sha512-MoEbaFqFeZfTB+8d/BtgObAfzJMQ+vdidzMP/zKzx9J4cW+vgY5bciDUueY+t3f0uwSJXO3xsqXXWj9x2KihzQ==",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
+        "@ckpack/vue-color": "^1.6.0",
         "@floating-ui/dom": "^1.7.5",
-        "@linusborg/vue-simple-portal": "^0.1.5",
         "@nextcloud/auth": "^2.5.3",
         "@nextcloud/axios": "^2.5.2",
         "@nextcloud/browser-storage": "^0.5.0",
         "@nextcloud/capabilities": "^1.2.1",
         "@nextcloud/event-bus": "^3.3.3",
-        "@nextcloud/initial-state": "^2.2.0",
+        "@nextcloud/initial-state": "^3.0.0",
         "@nextcloud/l10n": "^3.4.1",
         "@nextcloud/logger": "^3.0.3",
         "@nextcloud/router": "^3.1.0",
         "@nextcloud/sharing": "^0.3.0",
-        "@nextcloud/vue-select": "^3.26.0",
-        "@vueuse/components": "^11.0.0",
-        "@vueuse/core": "^11.0.0",
+        "@vuepic/vue-datepicker": "^11.0.3",
+        "@vueuse/components": "^14.1.0",
+        "@vueuse/core": "^14.0.0",
         "blurhash": "^2.0.5",
         "clone": "^2.1.2",
-        "debounce": "^2.2.0",
+        "debounce": "^3.0.0",
         "dompurify": "^3.3.1",
         "emoji-mart-vue-fast": "^15.0.5",
         "escape-html": "^1.0.3",
-        "floating-vue": "^1.0.0-beta.19",
+        "floating-vue": "^5.2.2",
         "focus-trap": "^7.8.0",
-        "linkify-string": "^4.3.2",
-        "md5": "^2.3.0",
-        "p-queue": "^8.1.1",
+        "linkifyjs": "^4.3.2",
+        "p-queue": "^9.1.0",
         "rehype-external-links": "^3.0.0",
         "rehype-highlight": "^7.0.2",
-        "rehype-react": "^7.1.2",
+        "rehype-react": "^8.0.0",
         "remark-breaks": "^4.0.0",
         "remark-parse": "^11.0.0",
-        "remark-rehype": "^11.0.0",
+        "remark-rehype": "^11.1.2",
         "remark-unlink-protocols": "^1.0.0",
-        "splitpanes": "^2.4.1",
-        "string-length": "^5.0.1",
+        "splitpanes": "^4.0.4",
         "striptags": "^3.2.0",
         "tabbable": "^6.4.0",
         "tributejs": "^5.1.3",
-        "unified": "^11.0.1",
+        "ts-md5": "^2.0.1",
+        "unified": "^11.0.5",
         "unist-builder": "^4.0.0",
         "unist-util-visit": "^5.1.0",
-        "vue": "^2.7.16",
-        "vue-color": "^2.8.1",
-        "vue-frag": "^1.4.3",
-        "vue-router": "^3.6.5",
-        "vue2-datepicker": "^3.11.0"
+        "vue": "^3.5.18",
+        "vue-router": "^4.6.4",
+        "vue-select": "^4.0.0-beta.6"
       },
       "engines": {
-        "node": "^20.0.0 || ^22.0.0 || ^24.0.0"
-      }
-    },
-    "node_modules/@nextcloud/vue-select": {
-      "version": "3.26.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/vue-select/-/vue-select-3.26.0.tgz",
-      "integrity": "sha512-UvJExrxzx5pP3lv7j6zrv2yj6B1dXph7sh3lLNPnbJPjPoH/yg58mHNFBcPJrRYMbpy2t3hlC6F7s33KCTr9FA==",
-      "license": "MIT",
-      "engines": {
-        "node": "^20.0.0 || ^22.0.0 || ^24.0.0"
-      },
-      "peerDependencies": {
-        "vue": "2.x"
-      }
-    },
-    "node_modules/@nextcloud/vue/node_modules/@nextcloud/initial-state": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@nextcloud/initial-state/-/initial-state-2.2.0.tgz",
-      "integrity": "sha512-cDW98L5KGGgpS8pzd+05304/p80cyu8U2xSDQGa+kGPTpUFmCbv2qnO5WrwwGTauyjYijCal2bmw82VddSH+Pg==",
-      "license": "GPL-3.0-or-later",
-      "engines": {
-        "node": "^20.0.0",
-        "npm": "^10.0.0"
-      }
-    },
-    "node_modules/@nextcloud/vue/node_modules/debounce": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/debounce/-/debounce-2.2.0.tgz",
-      "integrity": "sha512-Xks6RUDLZFdz8LIdR6q0MTH44k7FikOmnh5xkSjMig6ch45afc8sjTjRQf3P6ax8dMgcQrYO/AR2RGWURrruqw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@nextcloud/vue/node_modules/p-queue": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-8.1.1.tgz",
-      "integrity": "sha512-aNZ+VfjobsWryoiPnEApGGmf5WmNsCo9xu8dfaYamG5qaLP7ClhLN6NgsFe6SwJ2UbLEBK5dv9x8Mn5+RVhMWQ==",
-      "license": "MIT",
-      "dependencies": {
-        "eventemitter3": "^5.0.1",
-        "p-timeout": "^6.1.2"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@nextcloud/vue/node_modules/p-timeout": {
-      "version": "6.1.4",
-      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-6.1.4.tgz",
-      "integrity": "sha512-MyIV3ZA/PmyBN/ud8vV9XzwTrNtR4jFrObymZYnZqMmW0zA8Z17vnT0rBgFE/TlohB+YCHqXMgZzb3Csp49vqg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": "^20.11.0 || ^22 || ^24"
       }
     },
     "node_modules/@nodelib/fs.scandir": {
@@ -2393,6 +2301,13 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-rc.2",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.2.tgz",
+      "integrity": "sha512-izyXV/v+cHiRfozX62W9htOAvwMo4/bXKDrQ+vom1L1qRuexPock/7VZDAhnpHCLNejd3NJ6hiab+tO0D44Rgw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@rollup/plugin-inject": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-inject/-/plugin-inject-5.0.5.tgz",
@@ -3063,14 +2978,12 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/estree-jsx": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
       "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree": "*"
@@ -3126,16 +3039,6 @@
         "undici-types": "~7.16.0"
       }
     },
-    "node_modules/@types/react": {
-      "version": "19.2.10",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.10.tgz",
-      "integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "csstype": "^3.2.2"
-      }
-    },
     "node_modules/@types/semver": {
       "version": "7.7.1",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.7.1.tgz",
@@ -3168,9 +3071,9 @@
       "license": "MIT"
     },
     "node_modules/@types/web-bluetooth": {
-      "version": "0.0.20",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
-      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
@@ -3435,18 +3338,21 @@
       "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
       "license": "ISC"
     },
-    "node_modules/@vitejs/plugin-vue2": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue2/-/plugin-vue2-2.3.4.tgz",
-      "integrity": "sha512-LgqtRRedJb1KdmgcllwGX0gtlPvOvtR6pITXmqxGwQhBZaAysg0Hd7wvj3sjCsj4+PENWsqS7O+ceYSOgJ+H9g==",
+    "node_modules/@vitejs/plugin-vue": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.4.tgz",
+      "integrity": "sha512-uM5iXipgYIn13UUQCZNdWkYk+sysBeA97d5mHsAoAt1u/wpN3+zxOmsVJWosuzX+IMGRzeYUNytztrYznboIkQ==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "1.0.0-rc.2"
+      },
       "engines": {
-        "node": "^14.18.0 || >= 16.0.0"
+        "node": "^20.19.0 || >=22.12.0"
       },
       "peerDependencies": {
-        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0",
-        "vue": "^2.7.0-0"
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0",
+        "vue": "^3.2.25"
       }
     },
     "node_modules/@volar/language-core": {
@@ -3482,7 +3388,6 @@
       "version": "3.5.27",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.27.tgz",
       "integrity": "sha512-gnSBQjZA+//qDZen+6a2EdHqJ68Z7uybrMf3SPjEGgG4dicklwDVmMC1AeIHxtLVPT7sn6sH1KOO+tS6gwOUeQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.28.5",
@@ -3496,7 +3401,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
       "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -3509,7 +3413,6 @@
       "version": "3.5.27",
       "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.27.tgz",
       "integrity": "sha512-oAFea8dZgCtVVVTEC7fv3T5CbZW9BxpFzGGxC79xakTr6ooeEqmRuvQydIiDAkglZEAd09LgVf1RoDnL54fu5w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-core": "3.5.27",
@@ -3517,32 +3420,30 @@
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "2.7.16",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
-      "integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
+      "version": "3.5.27",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.27.tgz",
+      "integrity": "sha512-sHZu9QyDPeDmN/MRoshhggVOWE5WlGFStKFwu8G52swATgSny27hJRWteKDSUUzUH+wp+bmeNbhJnEAel/auUQ==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.23.5",
-        "postcss": "^8.4.14",
-        "source-map": "^0.6.1"
-      },
-      "optionalDependencies": {
-        "prettier": "^1.18.2 || ^2.0.0"
+        "@babel/parser": "^7.28.5",
+        "@vue/compiler-core": "3.5.27",
+        "@vue/compiler-dom": "3.5.27",
+        "@vue/compiler-ssr": "3.5.27",
+        "@vue/shared": "3.5.27",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.21",
+        "postcss": "^8.5.6",
+        "source-map-js": "^1.2.1"
       }
     },
-    "node_modules/@vue/compiler-sfc/node_modules/prettier": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
-      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.27",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.27.tgz",
+      "integrity": "sha512-Sj7h+JHt512fV1cTxKlYhg7qxBvack+BGncSpH+8vnN+KN95iPIcqB5rsbblX40XorP+ilO7VIKlkuu3Xq2vjw==",
       "license": "MIT",
-      "optional": true,
-      "bin": {
-        "prettier": "bin-prettier.js"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      },
-      "funding": {
-        "url": "https://github.com/prettier/prettier?sponsor=1"
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.27",
+        "@vue/shared": "3.5.27"
       }
     },
     "node_modules/@vue/compiler-vue2": {
@@ -3556,6 +3457,39 @@
         "he": "^1.2.0"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.9.tgz",
+      "integrity": "sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.9"
+      }
+    },
+    "node_modules/@vue/devtools-kit": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.9.tgz",
+      "integrity": "sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.9",
+        "birpc": "^2.3.0",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/@vue/devtools-shared": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.9.tgz",
+      "integrity": "sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==",
+      "license": "MIT",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
     "node_modules/@vue/language-core": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.2.0.tgz",
@@ -3607,11 +3541,54 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.27",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.27.tgz",
+      "integrity": "sha512-vvorxn2KXfJ0nBEnj4GYshSgsyMNFnIQah/wczXlsNXt+ijhugmW+PpJ2cNPe4V6jpnBcs0MhCODKllWG+nvoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.5.27"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.27",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.27.tgz",
+      "integrity": "sha512-fxVuX/fzgzeMPn/CLQecWeDIFNt3gQVhxM0rW02Tvp/YmZfXQgcTXlakq7IMutuZ/+Ogbn+K0oct9J3JZfyk3A==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.27",
+        "@vue/shared": "3.5.27"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.27",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.27.tgz",
+      "integrity": "sha512-/QnLslQgYqSJ5aUmb5F0z0caZPGHRB8LEAQ1s81vHFM5CBfnun63rxhvE/scVb/j3TbBuoZwkJyiLCkBluMpeg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/reactivity": "3.5.27",
+        "@vue/runtime-core": "3.5.27",
+        "@vue/shared": "3.5.27",
+        "csstype": "^3.2.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.27",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.27.tgz",
+      "integrity": "sha512-qOz/5thjeP1vAFc4+BY3Nr6wxyLhpeQgAE/8dDtKo6a6xdk+L4W46HDZgNmLOBUDEkFXV3G7pRiUqxjX0/2zWA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.27",
+        "@vue/shared": "3.5.27"
+      },
+      "peerDependencies": {
+        "vue": "3.5.27"
+      }
+    },
     "node_modules/@vue/shared": {
       "version": "3.5.27",
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.27.tgz",
       "integrity": "sha512-dXr/3CgqXsJkZ0n9F3I4elY8wM9jMJpP3pvRG52r6m0tu/MsAFIe6JpXVGeNMd/D9F4hQynWT8Rfuj0bdm9kFQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@vue/tsconfig": {
@@ -3621,129 +3598,70 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@vueuse/components": {
-      "version": "11.3.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-11.3.0.tgz",
-      "integrity": "sha512-sqaGtWPgobXvZmv3atcjW8YW0ypecFuB286OEKFXaPrLsA5b2Y+xAvHvq5V7d+VJRKt705gCK3BNBjxu3g1PdQ==",
+    "node_modules/@vuepic/vue-datepicker": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-11.0.3.tgz",
+      "integrity": "sha512-sb2adwqwK2PizLQOpxCYps2SwhVT6/ic2HMIOqHJXuYa6iAJZWGL5YVlS7O4aW+sk6ZyxlDURLO7kDZPL4HB/w==",
       "license": "MIT",
       "dependencies": {
-        "@vueuse/core": "11.3.0",
-        "@vueuse/shared": "11.3.0",
-        "vue-demi": ">=0.14.10"
-      }
-    },
-    "node_modules/@vueuse/components/node_modules/vue-demi": {
-      "version": "0.14.10",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
+        "date-fns": "^4.1.0"
       },
       "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
+        "node": ">=18.12.0"
       },
       "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
+        "vue": ">=3.3.0"
       }
     },
-    "node_modules/@vueuse/core": {
-      "version": "11.3.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-11.3.0.tgz",
-      "integrity": "sha512-7OC4Rl1f9G8IT6rUfi9JrKiXy4bfmHhZ5x2Ceojy0jnd3mHNEvV4JaRygH362ror6/NZ+Nl+n13LPzGiPN8cKA==",
+    "node_modules/@vueuse/components": {
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-14.2.0.tgz",
+      "integrity": "sha512-Vl4VMqoYC3ea6zUTDS7Jyk7kz0T2i4L4kg+uLG1Fj3uZFfAidcWqZRVGfVyyaQkzMZHQcdpGBRSndyH4wxYEeg==",
       "license": "MIT",
       "dependencies": {
-        "@types/web-bluetooth": "^0.0.20",
-        "@vueuse/metadata": "11.3.0",
-        "@vueuse/shared": "11.3.0",
-        "vue-demi": ">=0.14.10"
+        "@vueuse/core": "14.2.0",
+        "@vueuse/shared": "14.2.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
+      "peerDependencies": {
+        "vue": "^3.5.0"
       }
     },
-    "node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.14.10",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-      "hasInstallScript": true,
+    "node_modules/@vueuse/core": {
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.2.0.tgz",
+      "integrity": "sha512-tpjzVl7KCQNVd/qcaCE9XbejL38V6KJAEq/tVXj7mDPtl6JtzmUdnXelSS+ULRkkrDgzYVK7EerQJvd2jR794Q==",
       "license": "MIT",
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "14.2.0",
+        "@vueuse/shared": "14.2.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       },
       "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
+        "vue": "^3.5.0"
       }
     },
     "node_modules/@vueuse/metadata": {
-      "version": "11.3.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.3.0.tgz",
-      "integrity": "sha512-pwDnDspTqtTo2HwfLw4Rp6yywuuBdYnPYDq+mO38ZYKGebCUQC/nVj/PXSiK9HX5otxLz8Fn7ECPbjiRz2CC3g==",
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.2.0.tgz",
+      "integrity": "sha512-i3axTGjU8b13FtyR4Keeama+43iD+BwX9C2TmzBVKqjSHArF03hjkp2SBZ1m72Jk2UtrX0aYCugBq2R1fhkuAQ==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@vueuse/shared": {
-      "version": "11.3.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.3.0.tgz",
-      "integrity": "sha512-P8gSSWQeucH5821ek2mn/ciCk+MS/zoRKqdQIM3bHq6p7GXDAJLmnRRKmF5F65sAVJIfzQlwR3aDzwCn10s8hA==",
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.2.0.tgz",
+      "integrity": "sha512-Z0bmluZTlAXgUcJ4uAFaML16JcD8V0QG00Db3quR642I99JXIDRa2MI2LGxiLVhcBjVnL1jOzIvT5TT2lqJlkA==",
       "license": "MIT",
-      "dependencies": {
-        "vue-demi": ">=0.14.10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@vueuse/shared/node_modules/vue-demi": {
-      "version": "0.14.10",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       },
       "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
+        "vue": "^3.5.0"
       }
     },
     "node_modules/acorn": {
@@ -3840,7 +3758,9 @@
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
       "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -4039,6 +3959,15 @@
         "tweetnacl": "^0.14.3"
       }
     },
+    "node_modules/birpc": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.9.0.tgz",
+      "integrity": "sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/bl": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -4477,6 +4406,16 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -4495,15 +4434,6 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/char-regex": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-2.0.2.tgz",
-      "integrity": "sha512-cbGOjAptfM2LVmWhwRFHEKTPkLwNddVmuqYZQt895yXwAsWsXObCG+YN4DGQ/JBtT4GP1a1lPPdio2z413LmTg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12.20"
-      }
-    },
     "node_modules/character-entities": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
@@ -4514,6 +4444,36 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/charenc": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
@@ -4562,12 +4522,6 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/clamp": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/clamp/-/clamp-1.0.1.tgz",
-      "integrity": "sha512-kgMuFyE78OC6Dyu3Dy7vcx4uy97EIbVxJB/B0eJ3bUNAkwdNcxYzgKltnyADiYwsR7SEqkkUPsEUT//OVS6XMA==",
-      "license": "MIT"
-    },
     "node_modules/cliui": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
@@ -4730,6 +4684,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/copy-anything": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-4.0.5.tgz",
+      "integrity": "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==",
+      "license": "MIT",
+      "dependencies": {
+        "is-what": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/core-js": {
       "version": "3.48.0",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.48.0.tgz",
@@ -4965,11 +4934,15 @@
         "node": ">= 12"
       }
     },
-    "node_modules/date-format-parse": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/date-format-parse/-/date-format-parse-0.2.7.tgz",
-      "integrity": "sha512-/+lyMUKoRogMuTeOVii6lUwjbVlesN9YRYLzZT/g3TEZ3uD9QnpjResujeEqUW+OSNbT7T1+SYdyEkTcRv+KDQ==",
-      "license": "MIT"
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
     },
     "node_modules/de-indent": {
       "version": "1.0.2",
@@ -5323,9 +5296,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.283",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.283.tgz",
-      "integrity": "sha512-3vifjt1HgrGW/h76UEeny+adYApveS9dH2h3p57JYzBSXJIKUJAvtmIytDKjcSCt9xHfrNCFJ7gts6vkhuq++w==",
+      "version": "1.5.286",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.286.tgz",
+      "integrity": "sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A==",
       "dev": true,
       "license": "ISC"
     },
@@ -5874,11 +5847,20 @@
         "@types/estree-jsx": ">=1.0.5"
       }
     },
+    "node_modules/estree-util-is-identifier-name": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+      "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/esutils": {
@@ -6161,31 +6143,31 @@
       "peer": true
     },
     "node_modules/floating-vue": {
-      "version": "1.0.0-beta.19",
-      "resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-1.0.0-beta.19.tgz",
-      "integrity": "sha512-OcM7z5Ua4XAykqolmvPj3l1s+KqUKj6Xz2t66eqjgaWfNBjtuifmxO5+4rRXakIch/Crt8IH+vKdKcR3jOUaoQ==",
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-5.2.2.tgz",
+      "integrity": "sha512-afW+h2CFafo+7Y9Lvw/xsqjaQlKLdJV7h1fCHfcYQ1C4SVMlu7OAekqWgu5d4SgvkBVU0pVpLlVsrSTBURFRkg==",
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/dom": "^0.1.10",
-        "vue-resize": "^1.0.0"
+        "@floating-ui/dom": "~1.1.1",
+        "vue-resize": "^2.0.0-alpha.1"
       },
       "peerDependencies": {
-        "vue": "^2.6.10"
+        "@nuxt/kit": "^3.2.0",
+        "vue": "^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        }
       }
     },
-    "node_modules/floating-vue/node_modules/@floating-ui/core": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.3.1.tgz",
-      "integrity": "sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g==",
-      "license": "MIT"
-    },
     "node_modules/floating-vue/node_modules/@floating-ui/dom": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.1.10.tgz",
-      "integrity": "sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.1.1.tgz",
+      "integrity": "sha512-TpIO93+DIujg3g7SykEAGZMDtbJRrmnYRCNYSjJlvIbGhBjRSNTLVbNeDQBrzy9qDgUbiWdc7KA0uZHZ2tJmiw==",
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/core": "^0.3.0"
+        "@floating-ui/core": "^1.1.0"
       }
     },
     "node_modules/focus-trap": {
@@ -6446,9 +6428,9 @@
       }
     },
     "node_modules/globals": {
-      "version": "17.2.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-17.2.0.tgz",
-      "integrity": "sha512-tovnCz/fEq+Ripoq+p/gN1u7l6A7wwkoBT9pRCzTHzsD/LvADIzXZdjmRymh5Ztf0DYC3Rwg5cZRYjxzBmzbWg==",
+      "version": "17.3.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-17.3.0.tgz",
+      "integrity": "sha512-yMqGUQVVCkD4tqjOJf3TnrvaaHDMYp4VlUSObbkIiuCPe/ofdMBFIAcBbCSRFWOnos6qRiTVStDwqPLUclaxIw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -6619,37 +6601,40 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/hast-to-hyperscript": {
-      "version": "10.0.3",
-      "resolved": "https://registry.npmjs.org/hast-to-hyperscript/-/hast-to-hyperscript-10.0.3.tgz",
-      "integrity": "sha512-NuBoUStp4fRwmvlfbidlEiRSTk0gSHm+97q4Xn9CJ10HO+Py7nlTuDi6RhM1qLOureukGrCXLG7AAxaGqqyslQ==",
+    "node_modules/hast-util-is-element": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz",
+      "integrity": "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==",
       "license": "MIT",
       "dependencies": {
-        "@types/unist": "^2.0.0",
-        "comma-separated-tokens": "^2.0.0",
-        "property-information": "^6.0.0",
-        "space-separated-tokens": "^2.0.0",
-        "style-to-object": "^0.4.1",
-        "web-namespaces": "^2.0.0"
+        "@types/hast": "^3.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/hast-to-hyperscript/node_modules/@types/unist": {
-      "version": "2.0.11",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
-      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
-      "license": "MIT"
-    },
-    "node_modules/hast-util-is-element": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz",
-      "integrity": "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==",
+    "node_modules/hast-util-to-jsx-runtime": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
+      "integrity": "sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==",
       "license": "MIT",
       "dependencies": {
-        "@types/hast": "^3.0.0"
+        "@types/estree": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "style-to-js": "^1.0.0",
+        "unist-util-position": "^5.0.0",
+        "vfile-message": "^4.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -6673,10 +6658,13 @@
       }
     },
     "node_modules/hast-util-whitespace": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-2.0.1.tgz",
-      "integrity": "sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
       "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/unified"
@@ -6713,6 +6701,12 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+      "license": "MIT"
+    },
     "node_modules/hookified": {
       "version": "1.15.1",
       "resolved": "https://registry.npmjs.org/hookified/-/hookified-1.15.1.tgz",
@@ -6893,9 +6887,9 @@
       "peer": true
     },
     "node_modules/inline-style-parser": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
-      "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==",
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz",
+      "integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==",
       "license": "MIT"
     },
     "node_modules/is-absolute-url": {
@@ -6910,6 +6904,30 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-arguments": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz",
@@ -6970,6 +6988,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -7024,6 +7052,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-nan": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz",
@@ -7139,6 +7177,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-what": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-5.5.0.tgz",
+      "integrity": "sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/isarray": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
@@ -7341,21 +7391,11 @@
         "uc.micro": "^2.0.0"
       }
     },
-    "node_modules/linkify-string": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/linkify-string/-/linkify-string-4.3.2.tgz",
-      "integrity": "sha512-JqBuQpSa+CSj2tskIII70SKOjPfjXwDFyjRRNFTrlg76gp2nap36xeRj/cWaXxukqBNrxM+L07XyKRsUtH/DpQ==",
-      "license": "MIT",
-      "peerDependencies": {
-        "linkifyjs": "^4.0.0"
-      }
-    },
     "node_modules/linkifyjs": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.3.2.tgz",
       "integrity": "sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/local-pkg": {
       "version": "1.1.2",
@@ -7413,12 +7453,6 @@
       "license": "MIT",
       "peer": true
     },
-    "node_modules/lodash.throttle": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
-      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==",
-      "license": "MIT"
-    },
     "node_modules/lodash.truncate": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
@@ -7434,6 +7468,16 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/longest-streak": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
+      "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/lowlight": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-3.3.0.tgz",
@@ -7466,7 +7510,6 @@
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
       "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.5"
@@ -7605,6 +7648,66 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdast-util-mdx-expression": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
+      "integrity": "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-jsx": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.2.0.tgz",
+      "integrity": "sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "parse-entities": "^4.0.0",
+        "stringify-entities": "^4.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdxjs-esm": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
+      "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdast-util-newline-to-break": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mdast-util-newline-to-break/-/mdast-util-newline-to-break-2.0.0.tgz",
@@ -7619,6 +7722,20 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdast-util-phrasing": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
+      "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdast-util-to-hast": {
       "version": "13.2.1",
       "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz",
@@ -7640,6 +7757,27 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdast-util-to-markdown": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz",
+      "integrity": "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "longest-streak": "^3.0.0",
+        "mdast-util-phrasing": "^4.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "unist-util-visit": "^5.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdast-util-to-string": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
@@ -8242,6 +8380,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "license": "MIT"
+    },
     "node_modules/mkdirp-classic": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
@@ -8700,6 +8844,31 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/parse-entities": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
+      "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse-entities/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+      "license": "MIT"
+    },
     "node_modules/parse-imports-exports": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/parse-imports-exports/-/parse-imports-exports-0.2.4.tgz",
@@ -8802,6 +8971,12 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -8821,6 +8996,27 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz",
+      "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^7.7.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.5.0",
+        "vue": "^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pkg-dir": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-5.0.0.tgz",
@@ -9123,9 +9319,9 @@
       "license": "MIT"
     },
     "node_modules/property-information": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
-      "integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
+      "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -9556,119 +9752,14 @@
       }
     },
     "node_modules/rehype-react": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/rehype-react/-/rehype-react-7.2.0.tgz",
-      "integrity": "sha512-MHYyCHka+3TtzBMKtcuvVOBAbI1HrfoYA+XH9m7/rlrQQATCPwtJnPdkxKKcIGF8vc9mxqQja9r9f+FHItQeWg==",
-      "license": "MIT",
-      "dependencies": {
-        "@mapbox/hast-util-table-cell-style": "^0.2.0",
-        "@types/hast": "^2.0.0",
-        "hast-to-hyperscript": "^10.0.0",
-        "hast-util-whitespace": "^2.0.0",
-        "unified": "^10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      },
-      "peerDependencies": {
-        "@types/react": ">=17"
-      }
-    },
-    "node_modules/rehype-react/node_modules/@types/hast": {
-      "version": "2.3.10",
-      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz",
-      "integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "^2"
-      }
-    },
-    "node_modules/rehype-react/node_modules/@types/unist": {
-      "version": "2.0.11",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
-      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
-      "license": "MIT"
-    },
-    "node_modules/rehype-react/node_modules/is-buffer": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
-      "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/rehype-react/node_modules/unified": {
-      "version": "10.1.2",
-      "resolved": "https://registry.npmjs.org/unified/-/unified-10.1.2.tgz",
-      "integrity": "sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "^2.0.0",
-        "bail": "^2.0.0",
-        "extend": "^3.0.0",
-        "is-buffer": "^2.0.0",
-        "is-plain-obj": "^4.0.0",
-        "trough": "^2.0.0",
-        "vfile": "^5.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/rehype-react/node_modules/unist-util-stringify-position": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-3.0.3.tgz",
-      "integrity": "sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/rehype-react/node_modules/vfile": {
-      "version": "5.3.7",
-      "resolved": "https://registry.npmjs.org/vfile/-/vfile-5.3.7.tgz",
-      "integrity": "sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "^2.0.0",
-        "is-buffer": "^2.0.0",
-        "unist-util-stringify-position": "^3.0.0",
-        "vfile-message": "^3.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/rehype-react/node_modules/vfile-message": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-3.1.4.tgz",
-      "integrity": "sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-react/-/rehype-react-8.0.0.tgz",
+      "integrity": "sha512-vzo0YxYbB2HE+36+9HWXVdxNoNDubx63r5LBzpxBGVWM8s9mdnMdbmuJBAX6TTyuGdZjZix6qU3GcSuKCIWivw==",
       "license": "MIT",
       "dependencies": {
-        "@types/unist": "^2.0.0",
-        "unist-util-stringify-position": "^3.0.0"
+        "@types/hast": "^3.0.0",
+        "hast-util-to-jsx-runtime": "^2.0.0",
+        "unified": "^11.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -9822,6 +9913,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "license": "MIT"
+    },
     "node_modules/ripemd160": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.3.tgz",
@@ -10380,15 +10477,16 @@
       }
     },
     "node_modules/sortablejs": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
-      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==",
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==",
       "license": "MIT"
     },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -10512,6 +10610,15 @@
         "spdx-license-ids": "^3.0.0"
       }
     },
+    "node_modules/speakingurl": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
+      "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/split-ca": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/split-ca/-/split-ca-1.0.1.tgz",
@@ -10520,10 +10627,16 @@
       "license": "ISC"
     },
     "node_modules/splitpanes": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/splitpanes/-/splitpanes-2.4.1.tgz",
-      "integrity": "sha512-kpEo1WuMXuc6QfdQdO2V/fl/trONlkUKp+pputsLTiW9RMtwEvjb4/aYGm2m3+KAzjmb+zLwr4A4SYZu74+pgQ==",
-      "license": "MIT"
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/splitpanes/-/splitpanes-4.0.4.tgz",
+      "integrity": "sha512-RbysugZhjbCw5fgplvk3hOXr41stahQDtZhHVkhnnJI6H4wlGDhM2kIpbehy7v92duy9GnMa8zIhHigIV1TWtg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antoniandre"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
     },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
@@ -10594,22 +10707,6 @@
         "node": ">=0.6.19"
       }
     },
-    "node_modules/string-length": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/string-length/-/string-length-5.0.1.tgz",
-      "integrity": "sha512-9Ep08KAMUn0OadnVaBuRdE2l615CQ508kr0XMadjClfYpdCyvrbFp6Taebo8yyxokQ4viUd/xPPUA4FGgUa0ow==",
-      "license": "MIT",
-      "dependencies": {
-        "char-regex": "^2.0.0",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12.20"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/string-width": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.1.1.tgz",
@@ -10628,11 +10725,27 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
       "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+      "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -10690,13 +10803,22 @@
         "url": "https://github.com/sponsors/Borewit"
       }
     },
+    "node_modules/style-to-js": {
+      "version": "1.1.21",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.21.tgz",
+      "integrity": "sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "style-to-object": "1.0.14"
+      }
+    },
     "node_modules/style-to-object": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.4.4.tgz",
-      "integrity": "sha512-HYNoHZa2GorYNyqiCaBgsxvcJIn7OHq6inEga+E6Ke3m5JkoqpQbnFssk4jwe+K7AhGa2fcha4wSOf1Kn01dMg==",
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz",
+      "integrity": "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==",
       "license": "MIT",
       "dependencies": {
-        "inline-style-parser": "0.1.1"
+        "inline-style-parser": "0.2.7"
       }
     },
     "node_modules/stylelint": {
@@ -10986,6 +11108,18 @@
         "postcss": "^8.4.31"
       }
     },
+    "node_modules/superjson": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.6.tgz",
+      "integrity": "sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==",
+      "license": "MIT",
+      "dependencies": {
+        "copy-anything": "^4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -11216,12 +11350,6 @@
         "node": ">=0.6.0"
       }
     },
-    "node_modules/tinycolor2": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
-      "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==",
-      "license": "MIT"
-    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -11330,6 +11458,15 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/ts-md5": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ts-md5/-/ts-md5-2.0.1.tgz",
+      "integrity": "sha512-yF35FCoEOFBzOclSkMNEUbFQZuv89KEQ+5Xz03HrMSGUGB1+r+El+JiGOFwsP4p9RFNzwlrydYoTLvPOuICl9w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
@@ -11383,7 +11520,7 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "peer": true,
       "bin": {
@@ -12378,26 +12515,24 @@
       "license": "MIT"
     },
     "node_modules/vue": {
-      "version": "2.7.16",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.16.tgz",
-      "integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
-      "deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
-      "license": "MIT",
-      "dependencies": {
-        "@vue/compiler-sfc": "2.7.16",
-        "csstype": "^3.1.0"
-      }
-    },
-    "node_modules/vue-color": {
-      "version": "2.8.2",
-      "resolved": "https://registry.npmjs.org/vue-color/-/vue-color-2.8.2.tgz",
-      "integrity": "sha512-1qmsxl5GiIjx/jApBbTGr2r4bN/7WRKUTl3tc53vkXb9Ua0rZmiqsdq6VdG1e7dVNTLJahdsRGWcjeU2+98+NA==",
+      "version": "3.5.27",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.27.tgz",
+      "integrity": "sha512-aJ/UtoEyFySPBGarREmN4z6qNKpbEguYHMmXSiOGk69czc+zhs0NF6tEFrY8TZKAl8N/LYAkd4JHVd5E/AsSmw==",
       "license": "MIT",
       "dependencies": {
-        "clamp": "^1.0.1",
-        "lodash.throttle": "^4.0.0",
-        "material-colors": "^1.0.0",
-        "tinycolor2": "^1.1.2"
+        "@vue/compiler-dom": "3.5.27",
+        "@vue/compiler-sfc": "3.5.27",
+        "@vue/runtime-dom": "3.5.27",
+        "@vue/server-renderer": "3.5.27",
+        "@vue/shared": "3.5.27"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
     "node_modules/vue-eslint-parser": {
@@ -12425,18 +12560,6 @@
         "eslint": "^8.57.0 || ^9.0.0"
       }
     },
-    "node_modules/vue-frag": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/vue-frag/-/vue-frag-1.4.3.tgz",
-      "integrity": "sha512-pQZj03f/j9LRhzz9vKaXTCXUHVYHuAXicshFv76VFqwz4MG3bcb+sPZMAbd0wmw7THjkrTPuoM0EG9TbG8CgMQ==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/privatenumber/vue-frag?sponsor=1"
-      },
-      "peerDependencies": {
-        "vue": "^2.6.0"
-      }
-    },
     "node_modules/vue-material-design-icons": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.3.1.tgz",
@@ -12444,42 +12567,54 @@
       "license": "MIT"
     },
     "node_modules/vue-resize": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz",
-      "integrity": "sha512-z5M7lJs0QluJnaoMFTIeGx6dIkYxOwHThlZDeQnWZBizKblb99GSejPnK37ZbNE/rVwDcYcHY+Io+AxdpY952w==",
+      "version": "2.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
+      "integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/vue-router": {
+      "version": "4.6.4",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
+      "integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.13.10"
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
       },
       "peerDependencies": {
-        "vue": "^2.6.0"
+        "vue": "^3.5.0"
       }
     },
-    "node_modules/vue-router": {
-      "version": "3.6.5",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz",
-      "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==",
+    "node_modules/vue-router/node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
       "license": "MIT"
     },
-    "node_modules/vue2-datepicker": {
-      "version": "3.11.1",
-      "resolved": "https://registry.npmjs.org/vue2-datepicker/-/vue2-datepicker-3.11.1.tgz",
-      "integrity": "sha512-6PU/+pnp2mgZAfnSXmbdwj9516XsEvTiw61Q5SNrvvdy8W/FCxk1GAe9UZn/m9YfS5A47yK6XkcjMHbp7aFApA==",
+    "node_modules/vue-select": {
+      "version": "4.0.0-beta.6",
+      "resolved": "https://registry.npmjs.org/vue-select/-/vue-select-4.0.0-beta.6.tgz",
+      "integrity": "sha512-K+zrNBSpwMPhAxYLTCl56gaMrWZGgayoWCLqe5rWwkB8aUbAUh7u6sXjIR7v4ckp2WKC7zEEUY27g6h1MRsIHw==",
       "license": "MIT",
-      "dependencies": {
-        "date-format-parse": "^0.2.7"
-      },
       "peerDependencies": {
-        "vue": "^2.5.0"
+        "vue": "3.x"
       }
     },
     "node_modules/vuedraggable": {
-      "version": "2.24.3",
-      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
-      "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
+      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
       "license": "MIT",
       "dependencies": {
-        "sortablejs": "1.10.2"
+        "sortablejs": "1.14.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.1"
       }
     },
     "node_modules/wait-on": {
@@ -12502,16 +12637,6 @@
         "node": ">=20.0.0"
       }
     },
-    "node_modules/web-namespaces": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
-      "integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/web-streams-polyfill": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
@@ -12832,6 +12957,16 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index cc1901f8a..5a763f376 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
   "dependencies": {
     "@nextcloud/auth": "^2.5.3",
     "@nextcloud/axios": "^2.5.2",
-    "@nextcloud/dialogs": "^6.4.2",
+    "@nextcloud/dialogs": "^7.0.1",
     "@nextcloud/event-bus": "^3.3.3",
     "@nextcloud/files": "^3.12.1",
     "@nextcloud/initial-state": "^3.0.0",
@@ -39,16 +39,17 @@
     "@nextcloud/logger": "^3.0.3",
     "@nextcloud/moment": "^1.3.5",
     "@nextcloud/router": "^3.1.0",
-    "@nextcloud/vue": "^8.36.0",
+    "@nextcloud/vue": "^9.0.1",
     "debounce": "^3.0.0",
     "markdown-it": "^14.1.0",
     "p-queue": "^9.1.0",
+    "pinia": "^3.0.4",
     "qrcode": "^1.5.4",
     "v-click-outside": "^3.2.0",
-    "vue": "^2.7.16",
+    "vue": "^3.5.22",
     "vue-material-design-icons": "^5.3.1",
-    "vue-router": "^3.6.5",
-    "vuedraggable": "^2.24.3"
+    "vue-router": "^4.6.0",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@mdi/js": "^7.4.47",
@@ -58,7 +59,7 @@
     "@nextcloud/eslint-config": "^9.0.0-rc.8",
     "@nextcloud/prettier-config": "^1.2.0",
     "@nextcloud/stylelint-config": "^3.2.1",
-    "@nextcloud/vite-config": "^1.7.2",
+    "@nextcloud/vite-config": "^2.5.1",
     "@playwright/test": "^1.58.2",
     "@vue/tsconfig": "^0.5.1",
     "eslint-config-prettier": "^10.1.8",
diff --git a/src/Forms.vue b/src/Forms.vue
index 15245a93e..995e0ba68 100644
--- a/src/Forms.vue
+++ b/src/Forms.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<NcContent app-name="forms">
+	<NcContent appName="forms">
 		<NcAppNavigation
 			v-if="canCreateForms || hasForms"
 			:aria-label="t('forms', 'Forms navigation')">
@@ -20,17 +20,17 @@
 			<!-- Form-Owner-->
 			<template v-if="ownedForms.length > 0">
 				<NcAppNavigationCaption
-					is-heading
+					isHeading
 					class="forms-navigation__list-heading"
-					heading-id="forms-navigation-your-forms"
+					headingId="forms-navigation-your-forms"
 					:name="t('forms', 'Your forms')" />
 				<ul aria-labelledby="forms-navigation-your-forms">
 					<AppNavigationForm
 						v-for="form in ownedForms"
 						:key="form.id"
 						:form="form"
-						@open-sharing="openSharing"
-						@mobile-close-navigation="mobileCloseNavigation"
+						@openSharing="openSharing"
+						@mobileCloseNavigation="mobileCloseNavigation"
 						@clone="onCloneForm"
 						@delete="onDeleteForm" />
 				</ul>
@@ -39,18 +39,18 @@
 			<!-- Shared Forms-->
 			<template v-if="sharedForms.length > 0">
 				<NcAppNavigationCaption
-					is-heading
+					isHeading
 					class="forms-navigation__list-heading"
-					heading-id="forms-navigation-shared-forms"
+					headingId="forms-navigation-shared-forms"
 					:name="t('forms', 'Shared with you')" />
 				<ul aria-labelledby="forms-navigation-shared-forms">
 					<AppNavigationForm
 						v-for="form in sharedForms"
 						:key="form.id"
 						:form="form"
-						read-only
-						@open-sharing="openSharing"
-						@mobile-close-navigation="mobileCloseNavigation" />
+						readOnly
+						@openSharing="openSharing"
+						@mobileCloseNavigation="mobileCloseNavigation" />
 				</ul>
 			</template>
 
@@ -118,19 +118,23 @@
 		<!-- No errors show router content -->
 		<template v-else>
 			<router-view
-				:form.sync="selectedForm"
-				:sidebar-opened.sync="sidebarOpened"
-				@open-sharing="openSharing" />
+				:form="selectedForm"
+				:sidebarOpened="sidebarOpened"
+				@update:form="updateSelectedForm"
+				@update:sidebarOpened="sidebarOpened = $event"
+				@openSharing="openSharing" />
 			<Sidebar
 				v-if="!selectedForm.partial && canEdit"
 				:form="selectedForm"
-				:sidebar-opened.sync="sidebarOpened"
-				:active.sync="sidebarActive" />
+				:sidebarOpened="sidebarOpened"
+				:active="sidebarActive"
+				@update:sidebarOpened="sidebarOpened = $event"
+				@update:active="sidebarActive = $event" />
 		</template>
 
 		<!-- Archived forms modal -->
 		<ArchivedFormsModal
-			:open.sync="showArchivedForms"
+			v-model:open="showArchivedForms"
 			:forms="archivedForms"
 			@clone="onCloneForm" />
 	</NcContent>
@@ -144,6 +148,8 @@ import { loadState } from '@nextcloud/initial-state'
 import moment from '@nextcloud/moment'
 import { generateOcsUrl } from '@nextcloud/router'
 import { useIsMobile } from '@nextcloud/vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import NcAppContent from '@nextcloud/vue/components/NcAppContent'
 import NcAppNavigation from '@nextcloud/vue/components/NcAppNavigation'
 import NcAppNavigationCaption from '@nextcloud/vue/components/NcAppNavigationCaption'
@@ -163,6 +169,8 @@ import { FormState } from './models/Constants.ts'
 import logger from './utils/Logger.js'
 import OcsResponse2Data from './utils/OcsResponse2Data.js'
 
+const appName = 'forms'
+
 export default {
 	// eslint-disable-next-line vue/multi-word-component-names
 	name: 'Forms',
@@ -184,186 +192,129 @@ export default {
 		Sidebar,
 	},
 
-	mixins: [PermissionTypes],
-
 	setup() {
-		return {
-			isMobile: useIsMobile(),
-		}
-	},
+		const route = useRoute()
+		const router = useRouter()
+		const isMobile = useIsMobile()
 
-	data() {
-		return {
-			loading: true,
-			sidebarOpened: false,
-			sidebarActive: 'forms-sharing',
-			forms: [],
-			allSharedForms: [],
+		const loading = ref(true)
+		const sidebarOpened = ref(false)
+		const sidebarActive = ref('forms-sharing')
+		const forms = ref([])
+		const allSharedForms = ref([])
+		const showArchivedForms = ref(false)
+		const canCreateForms = ref(loadState(appName, 'appConfig').canCreateForms)
 
-			showArchivedForms: false,
+		const PERMISSION_TYPES = PermissionTypes.data().PERMISSION_TYPES
 
-			canCreateForms: loadState(appName, 'appConfig').canCreateForms,
-		}
-	},
-
-	computed: {
-		canEdit() {
-			return this.selectedForm.permissions.includes(
-				this.PERMISSION_TYPES.PERMISSION_EDIT,
-			)
-		},
+		const routeHash = computed(() => route.params.hash)
 
-		hasForms() {
-			return this.allSharedForms.length > 0 || this.forms.length > 0
-		},
-
-		/**
-		 * All own active forms
-		 */
-		ownedForms() {
-			return this.forms.filter((form) => form.state !== FormState.FormArchived)
-		},
-
-		/**
-		 * All active shared forms
-		 */
-		sharedForms() {
-			return this.allSharedForms.filter(
-				(form) => form.state !== FormState.FormArchived,
-			)
-		},
-
-		/**
-		 * All forms that have been archived
-		 */
-		archivedForms() {
-			return [...this.forms, ...this.allSharedForms].filter(
-				(form) => form.state === FormState.FormArchived,
-			)
-		},
-
-		routeHash() {
-			return this.$route.params.hash
-		},
-
-		// If the user is allowed to access this route
-		routeAllowed() {
-			// Check formId from initial state on app initialization
-			if (this.loading && loadState(appName, 'formId') === 'invalid') {
+		const routeAllowed = computed(() => {
+			if (loading.value && loadState(appName, 'formId') === 'invalid') {
 				return false
 			}
 
-			// Not allowed, if no hash
-			if (!this.routeHash) {
+			if (!routeHash.value) {
 				return false
 			}
 
-			// Try to find form in owned & shared list
-			const form = [...this.forms, ...this.allSharedForms].find(
-				(form) => form.hash === this.routeHash,
+			const form = [...forms.value, ...allSharedForms.value].find(
+				(form) => form.hash === routeHash.value,
 			)
 
-			// If no form found, load it from server. Route will be automatically re-evaluated.
 			if (form === undefined) {
-				this.fetchPartialForm(this.routeHash)
+				fetchPartialForm(routeHash.value)
 				return false
 			}
 
-			if (this.$route.name === 'results') {
+			if (route.name === 'results') {
 				return (
-					form.permissions.includes(this.$route.name)
-					|| form.submissionCount > 0
+					form.permissions.includes(route.name) || form.submissionCount > 0
 				)
 			}
 
-			// Return whether route is in the permissions-list
-			return form.permissions.includes(this.$route.name)
-		},
+			return form?.permissions.includes(route.name)
+		})
 
-		selectedForm: {
-			get() {
-				if (this.routeAllowed) {
-					return this.forms
-						.concat(this.allSharedForms)
-						.find((form) => form.hash === this.routeHash)
-				}
-				return {}
-			},
+		const selectedForm = computed(() => {
+			if (routeAllowed.value) {
+				return (
+					[...forms.value, ...allSharedForms.value].find(
+						(form) => form.hash === routeHash.value,
+					) || {}
+				)
+			}
+			return {}
+		})
 
-			set(form) {
-				// always close sidebar
-				this.sidebarOpened = false
+		const updateSelectedForm = (form) => {
+			sidebarOpened.value = false
 
-				// If a owned form
-				let index = this.forms.findIndex(
-					(search) => search.hash === this.routeHash,
-				)
-				if (index > -1) {
-					this.$set(this.forms, index, form)
-					return
-				}
-				// Otherwise a shared form
-				index = this.allSharedForms.findIndex(
-					(search) => search.hash === this.routeHash,
-				)
-				if (index > -1) {
-					this.$set(this.allSharedForms, index, form)
-				}
-			},
-		},
-	},
+			const index = forms.value.findIndex((f) => f.hash === form.hash)
+			if (index > -1) {
+				forms.value[index] = form
+				return
+			}
 
-	beforeMount() {
-		this.loadForms()
-	},
+			const sharedIndex = allSharedForms.value.findIndex(
+				(f) => f.hash === form.hash,
+			)
+			if (sharedIndex > -1) {
+				allSharedForms.value[sharedIndex] = form
+			}
+		}
 
-	mounted() {
-		subscribe('forms:last-updated:set', (id) => this.onLastUpdatedByEventBus(id))
-		subscribe('forms:ownership-transfered', (id) => this.onDeleteForm(id))
-	},
+		const canEdit = computed(() => {
+			return selectedForm.value.permissions?.includes(
+				PERMISSION_TYPES.PERMISSION_EDIT,
+			)
+		})
 
-	unmounted() {
-		unsubscribe('forms:last-updated:set', (id) =>
-			this.onLastUpdatedByEventBus(id),
-		)
-		unsubscribe('forms:ownership-transfered', (id) => this.onDeleteForm(id))
-	},
+		const hasForms = computed(() => {
+			return allSharedForms.value.length > 0 || forms.value.length > 0
+		})
 
-	methods: {
-		/**
-		 * Closes the App-Navigation on mobile-devices
-		 */
-		mobileCloseNavigation() {
-			if (this.isMobile) {
+		const ownedForms = computed(() => {
+			return forms.value.filter(
+				(form) => form.state !== FormState.FormArchived,
+			)
+		})
+
+		const sharedForms = computed(() => {
+			return allSharedForms.value.filter(
+				(form) => form.state !== FormState.FormArchived,
+			)
+		})
+
+		const archivedForms = computed(() => {
+			return [...forms.value, ...allSharedForms.value].filter(
+				(form) => form.state === FormState.FormArchived,
+			)
+		})
+
+		const mobileCloseNavigation = () => {
+			if (isMobile.value) {
 				emit('toggle-navigation', { open: false })
 			}
-		},
+		}
 
-		/**
-		 * Open a form and its sidebar for sharing
-		 *
-		 * @param {string} hash the hash of the form to load
-		 */
-		openSharing(hash) {
-			if (hash !== this.routeHash) {
-				this.$router.push({ name: 'edit', params: { hash } })
+		const openSharing = (hash) => {
+			if (hash !== routeHash.value) {
+				router.push({ name: 'edit', params: { hash } })
 			}
-			this.sidebarActive = 'forms-sharing'
-			this.sidebarOpened = true
-		},
 
-		/**
-		 * Initial forms load
-		 */
-		async loadForms() {
-			this.loading = true
+			sidebarActive.value = 'forms-sharing'
+			sidebarOpened.value = true
+		}
+
+		const loadForms = async () => {
+			loading.value = true
 
-			// Load Owned forms
 			try {
 				const response = await axios.get(
 					generateOcsUrl('apps/forms/api/v3/forms'),
 				)
-				this.forms = OcsResponse2Data(response)
+				forms.value = OcsResponse2Data(response)
 			} catch (error) {
 				logger.error('Error while loading owned forms list', { error })
 				showError(
@@ -376,7 +327,7 @@ export default {
 				const response = await axios.get(
 					generateOcsUrl('apps/forms/api/v3/forms?type=shared'),
 				)
-				this.allSharedForms = OcsResponse2Data(response)
+				allSharedForms.value = OcsResponse2Data(response)
 			} catch (error) {
 				logger.error('Error while loading shared forms list', {
 					error,
@@ -386,18 +337,18 @@ export default {
 				)
 			}
 
-			this.loading = false
-		},
+			loading.value = false
+		}
 
 		/**
-		 * Fetch a partial form by its hash and add it to the shared forms list.
+		 * Fetch a partial form by its hash after initial load completes.
 		 *
-		 * @param {string} hash the hash of the form to load
+		 * @param {string} hash The hash of the form to fetch.
 		 */
-		async fetchPartialForm(hash) {
+		async function fetchPartialForm(hash) {
 			await new Promise((resolve) => {
 				const wait = () => {
-					if (this.loading) {
+					if (loading.value) {
 						window.setTimeout(wait, 250)
 					} else {
 						resolve()
@@ -406,9 +357,9 @@ export default {
 				wait()
 			})
 
-			this.loading = true
+			loading.value = true
 			if (
-				[...this.forms, ...this.allSharedForms].find(
+				[...forms.value, ...allSharedForms.value].find(
 					(form) => form.hash === hash,
 				) === undefined
 			) {
@@ -420,54 +371,45 @@ export default {
 					)
 					const form = OcsResponse2Data(response)
 
-					// If the user has (at least) submission-permissions, add it to the shared forms
 					if (
-						form.permissions.includes(
-							this.PERMISSION_TYPES.PERMISSION_SUBMIT,
-						)
+						form.permissions.includes(PERMISSION_TYPES.PERMISSION_SUBMIT)
 					) {
-						this.allSharedForms.push(form)
+						allSharedForms.value.push(form)
 					}
 				} catch (error) {
 					logger.error(`Form ${hash} not found`, { error })
 					showError(t('forms', 'Form not found'))
 
 					if ([403, 404].includes(error.response?.status)) {
-						if (this.$route.name !== 'root') {
-							this.$router.push({ name: 'root' })
+						if (route.name !== 'root') {
+							router.push({ name: 'root' })
 						}
 					}
 				}
 			}
 
-			this.loading = false
-		},
+			loading.value = false
+		}
 
-		async onNewForm() {
+		const onNewForm = async () => {
 			try {
-				// Request a new empty form
 				const response = await axios.post(
 					generateOcsUrl('apps/forms/api/v3/forms'),
 				)
 				const newForm = OcsResponse2Data(response)
-				this.forms.unshift(newForm)
-				this.$router.push({
+				forms.value.unshift(newForm)
+				router.push({
 					name: 'edit',
 					params: { hash: newForm.hash },
 				})
-				this.mobileCloseNavigation()
+				mobileCloseNavigation()
 			} catch (error) {
 				logger.error('Unable to create new form', { error })
 				showError(t('forms', 'Unable to create a new form'))
 			}
-		},
+		}
 
-		/**
-		 * Request to clone a form, store returned form and open it.
-		 *
-		 * @param {number} id id of the form to clone
-		 */
-		async onCloneForm(id) {
+		const onCloneForm = async (id) => {
 			try {
 				const response = await axios.post(
 					generateOcsUrl('apps/forms/api/v3/forms?fromId={id}', {
@@ -475,53 +417,81 @@ export default {
 					}),
 				)
 				const newForm = OcsResponse2Data(response)
-				this.forms.unshift(newForm)
-				this.$router.push({
+				forms.value.unshift(newForm)
+				router.push({
 					name: 'edit',
 					params: { hash: newForm.hash },
 				})
-				this.mobileCloseNavigation()
+				mobileCloseNavigation()
 			} catch (error) {
 				logger.error(`Unable to copy form ${id}`, { error })
 				showError(t('forms', 'Unable to copy form'))
 			}
-		},
+		}
 
-		/**
-		 * Remove form from forms list after successful server deletion request
-		 *
-		 * @param {number} id the form id
-		 */
-		async onDeleteForm(id) {
-			const formIndex = this.forms.findIndex((form) => form.id === id)
-			const deletedHash = this.forms[formIndex].hash
+		const onDeleteForm = async (id) => {
+			const formIndex = forms.value.findIndex((form) => form.id === id)
+			const deletedHash = forms.value[formIndex].hash
 
-			this.forms.splice(formIndex, 1)
+			forms.value.splice(formIndex, 1)
 
-			// Redirect if current form has been deleted
-			if (deletedHash === this.routeHash && this.$route.name !== 'root') {
-				this.$router.push({ name: 'root' })
+			if (deletedHash === routeHash.value && route.name !== 'root') {
+				router.push({ name: 'root' })
 			}
-		},
+		}
 
-		/**
-		 * Update last updated timestamp in given form
-		 *
-		 * @param {number} id the form id
-		 */
-		onLastUpdatedByEventBus(id) {
-			const formIndex = this.forms.findIndex((form) => form.id === id)
+		const onLastUpdatedByEventBus = (id) => {
+			const formIndex = forms.value.findIndex((form) => form.id === id)
 			if (formIndex !== -1) {
-				this.forms[formIndex].lastUpdated = moment().unix()
-				this.forms.sort((b, a) => a.lastUpdated - b.lastUpdated)
+				forms.value[formIndex].lastUpdated = moment().unix()
+				forms.value.sort((b, a) => a.lastUpdated - b.lastUpdated)
 			} else {
-				const sharedFormIndex = this.allSharedForms.findIndex(
+				const sharedFormIndex = allSharedForms.value.findIndex(
 					(form) => form.id === id,
 				)
-				this.allSharedForms[sharedFormIndex].lastUpdated = moment().unix()
-				this.allSharedForms.sort((b, a) => a.lastUpdated - b.lastUpdated)
+				allSharedForms.value[sharedFormIndex].lastUpdated = moment().unix()
+				allSharedForms.value.sort((b, a) => a.lastUpdated - b.lastUpdated)
 			}
-		},
+		}
+
+		onMounted(() => {
+			loadForms()
+			subscribe('forms:last-updated:set', onLastUpdatedByEventBus)
+			subscribe('forms:ownership-transfered', onDeleteForm)
+		})
+
+		onUnmounted(() => {
+			unsubscribe('forms:last-updated:set', onLastUpdatedByEventBus)
+			unsubscribe('forms:ownership-transfered', onDeleteForm)
+		})
+
+		return {
+			loading,
+			sidebarOpened,
+			sidebarActive,
+			forms,
+			allSharedForms,
+			showArchivedForms,
+			canCreateForms,
+			isMobile,
+			selectedForm,
+			updateSelectedForm,
+			canEdit,
+			hasForms,
+			ownedForms,
+			sharedForms,
+			archivedForms,
+			routeHash,
+			routeAllowed,
+			mobileCloseNavigation,
+			openSharing,
+			loadForms,
+			fetchPartialForm,
+			onNewForm,
+			onCloneForm,
+			onDeleteForm,
+			onLastUpdatedByEventBus,
+		}
 	},
 }
 </script>
diff --git a/src/FormsEmptyContent.vue b/src/FormsEmptyContent.vue
index d1bc2ac00..64a84d9d5 100644
--- a/src/FormsEmptyContent.vue
+++ b/src/FormsEmptyContent.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<NcContent app-name="forms">
+	<NcContent appName="forms">
 		<NcAppContent class="forms-emptycontent">
 			<NcEmptyContent
 				:name="currentModel.title"
diff --git a/src/FormsSettings.vue b/src/FormsSettings.vue
index 7676e039e..60c607c8e 100644
--- a/src/FormsSettings.vue
+++ b/src/FormsSettings.vue
@@ -11,7 +11,7 @@
 				v-model="appConfig.restrictCreation"
 				class="forms-settings__creation__switch"
 				type="switch"
-				@update:model-value="onRestrictCreationChange">
+				@update:modelValue="onRestrictCreationChange">
 				{{ t('forms', 'Restrict form creation to selected groups') }}
 			</NcCheckboxRadioSwitch>
 			<NcSelect
@@ -29,21 +29,21 @@
 				ref="switchAllowPublicLink"
 				v-model="appConfig.allowPublicLink"
 				type="switch"
-				@update:model-value="onAllowPublicLinkChange">
+				@update:modelValue="onAllowPublicLinkChange">
 				{{ t('forms', 'Allow sharing by link') }}
 			</NcCheckboxRadioSwitch>
 			<NcCheckboxRadioSwitch
 				ref="switchAllowPermitAll"
 				v-model="appConfig.allowPermitAll"
 				type="switch"
-				@update:model-value="onAllowPermitAllChange">
+				@update:modelValue="onAllowPermitAllChange">
 				{{ t('forms', 'Allow sharing to all logged in accounts') }}
 			</NcCheckboxRadioSwitch>
 			<NcCheckboxRadioSwitch
 				ref="switchAllowShowToAll"
 				v-model="appConfig.allowShowToAll"
 				type="switch"
-				@update:model-value="onAllowShowToAllChange">
+				@update:modelValue="onAllowShowToAllChange">
 				{{
 					t(
 						'forms',
diff --git a/src/FormsSubmit.vue b/src/FormsSubmit.vue
index aa90e9ec6..f3c32afe9 100644
--- a/src/FormsSubmit.vue
+++ b/src/FormsSubmit.vue
@@ -4,13 +4,13 @@
 -->
 
 <template>
-	<NcContent app-name="forms" :class="{ 'app-forms-embedded': isEmbedded }">
+	<NcContent appName="forms" :class="{ 'app-forms-embedded': isEmbedded }">
 		<Submit
 			:form="form"
-			public-view
-			:share-hash="shareHash"
-			:is-logged-in="isLoggedIn"
-			:sidebar-opened="false" />
+			publicView
+			:shareHash="shareHash"
+			:isLoggedIn="isLoggedIn"
+			:sidebarOpened="false" />
 	</NcContent>
 </template>
 
diff --git a/src/components/AppNavigationForm.vue b/src/components/AppNavigationForm.vue
index a671c6982..83b2fde23 100644
--- a/src/components/AppNavigationForm.vue
+++ b/src/components/AppNavigationForm.vue
@@ -7,9 +7,9 @@
 	<NcListItem
 		:active="isActive"
 		:actions-aria-label="t('forms', 'Form actions')"
-		:counter-number="form.submissionCount"
+		:counterNumber="form.submissionCount"
 		compact
-		:force-display-actions="forceDisplayActions"
+		:forceDisplayActions="forceDisplayActions"
 		:name="formTitle"
 		:to="{
 			name: routerTarget,
@@ -29,9 +29,8 @@
 			#actions>
 			<NcActionRouter
 				v-if="!isArchived && canEdit"
-				close-after-click
+				closeAfterClick
 				:disabled="isFormLocked"
-				exact
 				:to="{ name: 'edit', params: { hash: form.hash } }"
 				@click="mobileCloseNavigation">
 				<template #icon>
@@ -41,7 +40,7 @@
 			</NcActionRouter>
 			<NcActionButton
 				v-if="!isArchived && !readOnly"
-				close-after-click
+				closeAfterClick
 				@click="onShareForm">
 				<template #icon>
 					<IconShareVariant :size="20" />
@@ -50,8 +49,7 @@
 			</NcActionButton>
 			<NcActionRouter
 				v-if="canSeeResults"
-				close-after-click
-				exact
+				closeAfterClick
 				:to="{ name: 'results', params: { hash: form.hash } }"
 				@click="mobileCloseNavigation">
 				<template #icon>
@@ -59,7 +57,7 @@
 				</template>
 				{{ t('forms', 'Results') }}
 			</NcActionRouter>
-			<NcActionButton v-if="canEdit" close-after-click @click="onCloneForm">
+			<NcActionButton v-if="canEdit" closeAfterClick @click="onCloneForm">
 				<template #icon>
 					<IconContentCopy :size="20" />
 				</template>
@@ -68,7 +66,7 @@
 			<NcActionSeparator v-if="canEdit && !readOnly" />
 			<NcActionButton
 				v-if="canEdit && !readOnly"
-				close-after-click
+				closeAfterClick
 				:disabled="isFormLocked"
 				@click="onToggleArchive">
 				<template #icon>
@@ -83,7 +81,7 @@
 			</NcActionButton>
 			<NcActionButton
 				v-if="canEdit && !readOnly"
-				close-after-click
+				closeAfterClick
 				:disabled="isFormLocked"
 				@click="showDeleteDialog = true">
 				<template #icon>
@@ -92,7 +90,7 @@
 				{{ t('forms', 'Delete form') }}
 			</NcActionButton>
 			<NcDialog
-				:open.sync="showDeleteDialog"
+				v-model:open="showDeleteDialog"
 				:name="t('forms', 'Delete form')"
 				:message="
 					t('forms', 'Are you sure you want to delete {title}?', {
@@ -171,13 +169,7 @@ export default {
 		},
 	},
 
-	emits: [
-		'mobile-close-navigation',
-		'open-sharing',
-		'clone',
-		'update-form-state',
-		'delete',
-	],
+	emits: ['mobileCloseNavigation', 'openSharing', 'clone', 'delete'],
 
 	data() {
 		return {
@@ -301,11 +293,11 @@ export default {
 		 * Closes the App-Navigation on mobile-devices
 		 */
 		mobileCloseNavigation() {
-			this.$emit('mobile-close-navigation')
+			this.$emit('mobileCloseNavigation')
 		},
 
 		onShareForm() {
-			this.$emit('open-sharing', this.form.hash)
+			this.$emit('openSharing', this.form.hash)
 		},
 
 		onCloneForm() {
@@ -327,11 +319,10 @@ export default {
 						},
 					},
 				)
-				this.$set(
-					this.form,
-					'state',
-					this.isArchived ? FormState.FormClosed : FormState.FormArchived,
-				)
+				// eslint-disable-next-line vue/no-mutating-props
+				this.form.state = this.isArchived
+					? FormState.FormClosed
+					: FormState.FormArchived
 			} catch (error) {
 				logger.error('Error changing archived state of form', {
 					error,
diff --git a/src/components/ArchivedFormsModal.vue b/src/components/ArchivedFormsModal.vue
index 23ee9f841..5cc33b475 100644
--- a/src/components/ArchivedFormsModal.vue
+++ b/src/components/ArchivedFormsModal.vue
@@ -5,7 +5,7 @@
 
 <template>
 	<NcDialog
-		content-classes="archived-forms"
+		contentClasses="archived-forms"
 		:name="t('forms', 'Archived forms')"
 		:open="open"
 		size="normal"
@@ -15,10 +15,10 @@
 				v-for="(form, key) in shownForms"
 				:key="key"
 				:form="form"
-				force-display-actions
+				forceDisplayActions
 				@clone="onCloneForm(form.id)"
 				@delete="onDelete(form)"
-				@mobile-close-navigation="$emit('update:open', false)" />
+				@mobileCloseNavigation="$emit('update:open', false)" />
 		</ul>
 	</NcDialog>
 </template>
diff --git a/src/components/OptionInputDialog.vue b/src/components/OptionInputDialog.vue
index e33522e40..084c298ab 100644
--- a/src/components/OptionInputDialog.vue
+++ b/src/components/OptionInputDialog.vue
@@ -5,7 +5,7 @@
 
 <template>
 	<NcDialog
-		content-classes="options-modal"
+		contentClasses="options-modal"
 		:name="t('forms', 'Add multiple options')"
 		:open="open"
 		:buttons="buttons"
@@ -18,10 +18,10 @@
 			resize="vertical"
 			rows="10" />
 		<NcSelect
-			:input-label="t('forms', 'Options')"
+			:inputLabel="t('forms', 'Options')"
 			multiple
 			disabled
-			:model-value="multipleOptions" />
+			:modelValue="multipleOptions" />
 	</NcDialog>
 </template>
 
@@ -50,7 +50,7 @@ export default defineComponent({
 		},
 	},
 
-	emits: ['update:open', 'multiple-answers'],
+	emits: ['update:open', 'multipleAnswers'],
 
 	data() {
 		return {
@@ -93,7 +93,7 @@ export default defineComponent({
 			this.$emit('update:open', false)
 			if (this.multipleOptions.length > 1) {
 				// extract all options entries to parent
-				this.$emit('multiple-answers', this.multipleOptions)
+				this.$emit('multipleAnswers', this.multipleOptions)
 				this.enteredOptions = ''
 				return
 			}
diff --git a/src/components/PillMenu.vue b/src/components/PillMenu.vue
index 476fc23e8..565057d2e 100644
--- a/src/components/PillMenu.vue
+++ b/src/components/PillMenu.vue
@@ -9,15 +9,15 @@
 			v-for="option of options"
 			:key="option.id"
 			:aria-label="isMobile ? option.ariaLabel : null"
-			:model-value="active.id"
+			:modelValue="active.id"
 			:disabled="disabled || option.disabled"
 			class="pill-menu__toggle"
 			:class="{ 'pill-menu__toggle--icon-only': isMobile && option.icon }"
-			button-variant
-			button-variant-grouped="horizontal"
+			buttonVariant
+			buttonVariantGrouped="horizontal"
 			type="radio"
 			:value="option.id"
-			@update:model-value="$emit('update:active', option)">
+			@update:modelValue="$emit('update:active', option)">
 			<template v-if="option.icon" #icon>
 				<NcIconSvgWrapper :path="option.icon" />
 			</template>
diff --git a/src/components/QRDialog.vue b/src/components/QRDialog.vue
index 8035188ea..a5325f899 100644
--- a/src/components/QRDialog.vue
+++ b/src/components/QRDialog.vue
@@ -5,7 +5,7 @@
 
 <template>
 	<NcDialog
-		close-on-click-outside
+		closeOnClickOutside
 		:name="title"
 		:open="isOpen"
 		@close="isOpen = false"
diff --git a/src/components/Questions/AnswerInput.vue b/src/components/Questions/AnswerInput.vue
index 240ad226e..91a8c3349 100644
--- a/src/components/Questions/AnswerInput.vue
+++ b/src/components/Questions/AnswerInput.vue
@@ -5,10 +5,10 @@
 
 <template>
 	<li class="question__item" @focusout="handleTabbing">
-		<div
+		<component
 			:is="pseudoIcon"
 			v-if="!isDropdown"
-			class="question__item__pseudoInput" />
+			class="question__item__pseudoInput"></component>
 		<input
 			ref="input"
 			:aria-label="ariaLabel"
@@ -149,13 +149,13 @@ export default {
 	},
 
 	emits: [
-		'tabbed-out',
-		'create-answer',
+		'tabbedOut',
+		'createAnswer',
 		'update:answer',
-		'focus-next',
+		'focusNext',
 		'delete',
-		'move-down',
-		'move-up',
+		'moveDown',
+		'moveUp',
 	],
 
 	data() {
@@ -250,7 +250,7 @@ export default {
 
 	methods: {
 		handleTabbing() {
-			this.$emit('tabbed-out', this.optionType)
+			this.$emit('tabbedOut', this.optionType)
 		},
 
 		/**
@@ -273,14 +273,15 @@ export default {
 
 				if (this.answer.local) {
 					// Dispatched for creation. Marked as synced
-					this.$set(this.answer, 'local', false)
+					// eslint-disable-next-line vue/no-mutating-props
+					this.answer.local = false
 					const newAnswer = await this.createAnswer(answer)
 
 					// Forward changes, but use current answer.text to avoid erasing
 					// any in-between changes while creating the answer
 					newAnswer.text = this.$refs.input.value
 
-					this.$emit('create-answer', this.index, newAnswer)
+					this.$emit('createAnswer', this.index, newAnswer)
 				} else {
 					await this.updateAnswer(answer)
 
@@ -297,7 +298,7 @@ export default {
 		 */
 		focusNextInput() {
 			if (this.index <= this.maxIndex) {
-				this.$emit('focus-next', this.index, this.optionType)
+				this.$emit('focusNext', this.index, this.optionType)
 			}
 		},
 
@@ -396,7 +397,7 @@ export default {
 		 * Reorder option but keep focus on the button
 		 */
 		onMoveDown() {
-			this.$emit('move-down')
+			this.$emit('moveDown')
 			this.focusButton(
 				this.index < this.maxIndex - 1
 					? 'buttonOptionDown'
@@ -405,7 +406,7 @@ export default {
 		},
 
 		onMoveUp() {
-			this.$emit('move-up')
+			this.$emit('moveUp')
 			this.focusButton(this.index > 1 ? 'buttonOptionUp' : 'buttonOptionDown')
 		},
 
diff --git a/src/components/Questions/Question.vue b/src/components/Questions/Question.vue
index e62a361aa..b9ed9d0c5 100644
--- a/src/components/Questions/Question.vue
+++ b/src/components/Questions/Question.vue
@@ -79,7 +79,7 @@
 				<NcActions
 					v-if="!readOnly"
 					:id="actionsId"
-					force-menu
+					forceMenu
 					placement="bottom-end"
 					class="question__header__title__menu">
 					<template v-if="isRequired" #icon>
@@ -91,24 +91,24 @@
 						</IconOverlay>
 					</template>
 					<NcActionCheckbox
-						:model-value="isRequired"
-						@update:model-value="onRequiredChange">
+						:modelValue="isRequired"
+						@update:modelValue="onRequiredChange">
 						<!-- TRANSLATORS Making this question necessary to be answered when submitting to a form -->
 						{{ t('forms', 'Required') }}
 					</NcActionCheckbox>
 					<slot name="actions" />
 					<NcActionInput
 						:label="t('forms', 'Technical name of the question')"
-						:label-outside="false"
-						:show-trailing-button="false"
-						:model-value="name"
+						:labelOutside="false"
+						:showTrailingButton="false"
+						:modelValue="name"
 						@input="onNameChange">
 						<template #icon>
 							<IconIdentifier :size="20" />
 						</template>
 						{{ t('forms', 'Technical name') }}
 					</NcActionInput>
-					<NcActionButton close-after-click @click="onClone">
+					<NcActionButton closeAfterClick @click="onClone">
 						<template #icon>
 							<IconContentCopy :size="20" />
 						</template>
@@ -266,8 +266,8 @@ export default {
 		'update:description',
 		'update:name',
 		'update:isRequired',
-		'move-down',
-		'move-up',
+		'moveDown',
+		'moveUp',
 		'delete',
 		'clone',
 	],
@@ -350,12 +350,12 @@ export default {
 		 * Reorder question but keep focus on the button
 		 */
 		onMoveDown() {
-			this.$emit('move-down')
+			this.$emit('moveDown')
 			this.$nextTick(() => this.$refs.buttonDown.$el.focus())
 		},
 
 		onMoveUp() {
-			this.$emit('move-up')
+			this.$emit('moveUp')
 			this.$nextTick(() => this.$refs.buttonUp.$el.focus())
 		},
 
diff --git a/src/components/Questions/QuestionColor.vue b/src/components/Questions/QuestionColor.vue
index 192ace897..8ff270fb8 100644
--- a/src/components/Questions/QuestionColor.vue
+++ b/src/components/Questions/QuestionColor.vue
@@ -6,14 +6,14 @@
 <template>
 	<Question
 		v-bind="questionProps"
-		:title-placeholder="answerType.titlePlaceholder"
-		:warning-invalid="answerType.warningInvalid"
+		:titlePlaceholder="answerType.titlePlaceholder"
+		:warningInvalid="answerType.warningInvalid"
 		v-on="commonListeners">
 		<div class="question__content">
 			<NcColorPicker
-				:model-value="pickedColor"
-				advanced-fields
-				@update:model-value="onUpdatePickedColor">
+				:modelValue="pickedColor"
+				advancedFields
+				@update:modelValue="onUpdatePickedColor">
 				<NcButton :disabled="!readOnly">
 					{{ colorPickerPlaceholder }}
 				</NcButton>
diff --git a/src/components/Questions/QuestionDate.vue b/src/components/Questions/QuestionDate.vue
index c9b6a669b..00bb60436 100644
--- a/src/components/Questions/QuestionDate.vue
+++ b/src/components/Questions/QuestionDate.vue
@@ -6,24 +6,24 @@
 <template>
 	<Question
 		v-bind="questionProps"
-		:title-placeholder="answerType.titlePlaceholder"
-		:warning-invalid="answerType.warningInvalid"
+		:titlePlaceholder="answerType.titlePlaceholder"
+		:warningInvalid="answerType.warningInvalid"
 		v-on="commonListeners">
 		<template v-if="answerType.pickerType === 'date'" #actions>
 			<NcActionCheckbox
-				:model-value="dateRange"
-				@update:model-value="onDateRangeChange">
+				:modelValue="dateRange"
+				@update:modelValue="onDateRangeChange">
 				{{ t('forms', 'Use date range') }}
 			</NcActionCheckbox>
 			<NcActionInput
 				type="date"
-				is-native-picker
-				:model-value="dateMin"
+				isNativePicker
+				:modelValue="dateMin"
 				:label="t('forms', 'Earliest date')"
-				hide-label
+				hideLabel
 				:formatter="extraSettingsFormatter"
 				:max="dateMax"
-				@update:model-value="onDateMinChange">
+				@update:modelValue="onDateMinChange">
 				<template #icon>
 					<NcIconSvgWrapper
 						:svg="svgTodayIcon"
@@ -32,13 +32,13 @@
 			</NcActionInput>
 			<NcActionInput
 				type="date"
-				is-native-picker
-				:model-value="dateMax"
+				isNativePicker
+				:modelValue="dateMax"
 				:label="t('forms', 'Latest date')"
-				hide-label
+				hideLabel
 				:formatter="extraSettingsFormatter"
 				:min="dateMin"
-				@update:model-value="onDateMaxChange">
+				@update:modelValue="onDateMaxChange">
 				<template #icon>
 					<NcIconSvgWrapper
 						:svg="svgEventIcon"
@@ -48,18 +48,18 @@
 		</template>
 		<template v-else-if="answerType.pickerType === 'time'" #actions>
 			<NcActionCheckbox
-				:model-value="timeRange"
-				@update:model-value="onTimeRangeChange">
+				:modelValue="timeRange"
+				@update:modelValue="onTimeRangeChange">
 				{{ t('forms', 'Use time range') }}
 			</NcActionCheckbox>
 			<NcActionInput
 				type="time"
-				is-native-picker
-				:model-value="timeMin"
+				isNativePicker
+				:modelValue="timeMin"
 				:label="t('forms', 'Earliest time')"
-				hide-label
+				hideLabel
 				:max="timeMax"
-				@update:model-value="onTimeMinChange">
+				@update:modelValue="onTimeMinChange">
 				<template #icon>
 					<NcIconSvgWrapper
 						:svg="svgClockLoader20"
@@ -68,12 +68,12 @@
 			</NcActionInput>
 			<NcActionInput
 				type="time"
-				is-native-picker
-				:model-value="timeMax"
+				isNativePicker
+				:modelValue="timeMax"
 				:label="t('forms', 'Latest time')"
-				hide-label
+				hideLabel
 				:min="timeMin"
-				@update:model-value="onTimeMaxChange">
+				@update:modelValue="onTimeMaxChange">
 				<template #icon>
 					<NcIconSvgWrapper
 						:svg="svgClockLoader80"
@@ -83,16 +83,16 @@
 		</template>
 		<div class="question__content">
 			<NcDateTimePicker
-				:model-value="time"
+				:modelValue="time"
 				:disabled="!readOnly"
 				:format="stringify"
 				:placeholder="datetimePickerPlaceholder"
-				:show-second="false"
+				:showSecond="false"
 				:type="dateTimePickerType"
-				:disabled-date="disabledDates"
-				:disabled-time="disabledTimes"
-				:input-attr="inputAttr"
-				range-separator=" - "
+				:disabledDate="disabledDates"
+				:disabledTime="disabledTimes"
+				:inputAttr="inputAttr"
+				rangeSeparator=" - "
 				@change="onValueChange" />
 		</div>
 	</Question>
diff --git a/src/components/Questions/QuestionDropdown.vue b/src/components/Questions/QuestionDropdown.vue
index 79025399e..88e6f61fe 100644
--- a/src/components/Questions/QuestionDropdown.vue
+++ b/src/components/Questions/QuestionDropdown.vue
@@ -6,18 +6,18 @@
 <template>
 	<Question
 		v-bind="questionProps"
-		:title-placeholder="answerType.titlePlaceholder"
-		:warning-invalid="answerType.warningInvalid"
-		:content-valid="contentValid"
-		:shift-drag-handle="shiftDragHandle"
+		:titlePlaceholder="answerType.titlePlaceholder"
+		:warningInvalid="answerType.warningInvalid"
+		:contentValid="contentValid"
+		:shiftDragHandle="shiftDragHandle"
 		v-on="commonListeners">
 		<template #actions>
 			<NcActionCheckbox
-				:model-value="extraSettings?.shuffleOptions"
-				@update:model-value="onShuffleOptionsChange">
+				:modelValue="extraSettings?.shuffleOptions"
+				@update:modelValue="onShuffleOptionsChange">
 				{{ t('forms', 'Shuffle options') }}
 			</NcActionCheckbox>
-			<NcActionButton close-after-click @click="isOptionDialogShown = true">
+			<NcActionButton closeAfterClick @click="isOptionDialogShown = true">
 				<template #icon>
 					<IconContentPaste :size="20" />
 				</template>
@@ -26,7 +26,7 @@
 		</template>
 		<NcSelect
 			v-if="readOnly"
-			:model-value="selectedOption"
+			:modelValue="selectedOption"
 			:name="name || undefined"
 			:placeholder="selectOptionPlaceholder"
 			:multiple="isMultiple"
@@ -44,48 +44,46 @@
 				v-else
 				v-model="choices"
 				class="question__content"
-				animation="200"
+				:animation="200"
 				direction="vertical"
 				handle=".option__drag-handle"
-				invert-swap
-				tag="ul"
+				invertSwap
+				tag="transition-group"
+				:componentData="{
+					name: isDragging
+						? 'no-external-transition-on-drag'
+						: 'options-list-transition',
+				}"
 				@change="saveOptionsOrder('choice')"
 				@start="isDragging = true"
 				@end="isDragging = false">
-				<TransitionGroup
-					:name="
-						isDragging
-							? 'no-external-transition-on-drag'
-							: 'options-list-transition'
-					">
+				<template #item="{ element: answer, index }">
 					<!-- Answer text input edit -->
 					<AnswerInput
-						v-for="(answer, index) in choices"
-						:key="answer.local ? 'option-local' : answer.id"
 						ref="input"
 						:answer="answer"
-						:form-id="formId"
-						is-dropdown
+						:formId="formId"
+						isDropdown
 						:index="index"
-						:is-unique="!isMultiple"
-						:max-index="options.length - 1"
-						:max-option-length="maxStringLengths.optionText"
-						option-type="choice"
-						@create-answer="onCreateAnswer"
+						:isUnique="!isMultiple"
+						:maxIndex="options.length - 1"
+						:maxOptionLength="maxStringLengths.optionText"
+						optionType="choice"
+						@createAnswer="onCreateAnswer"
 						@update:answer="updateAnswer"
 						@delete="deleteOption"
-						@focus-next="focusNextInput"
-						@move-up="onOptionMoveUp(index, 'choice')"
-						@move-down="onOptionMoveDown(index, 'choice')"
-						@tabbed-out="checkValidOption('choice')" />
-				</TransitionGroup>
+						@focusNext="focusNextInput"
+						@moveUp="onOptionMoveUp(index)"
+						@moveDown="onOptionMoveDown(index)"
+						@tabbedOut="checkValidOption" />
+				</template>
 			</Draggable>
 		</template>
 
 		<!-- Add multiple options modal -->
 		<OptionInputDialog
-			:open.sync="isOptionDialogShown"
-			@multiple-answers="handleMultipleOptions" />
+			v-model:open="isOptionDialogShown"
+			@multipleAnswers="handleMultipleOptions" />
 	</Question>
 </template>
 
diff --git a/src/components/Questions/QuestionFile.vue b/src/components/Questions/QuestionFile.vue
index 65aaa45ac..a419862c3 100644
--- a/src/components/Questions/QuestionFile.vue
+++ b/src/components/Questions/QuestionFile.vue
@@ -6,12 +6,12 @@
 <template>
 	<Question
 		v-bind="questionProps"
-		:title-placeholder="answerType.titlePlaceholder"
-		:warning-invalid="answerType.warningInvalid"
+		:titlePlaceholder="answerType.titlePlaceholder"
+		:warningInvalid="answerType.warningInvalid"
 		v-on="commonListeners">
 		<template #actions>
 			<template v-if="!allowedFileTypesDialogOpened">
-				<NcActionButton is-menu @click="allowedFileTypesDialogOpened = true">
+				<NcActionButton isMenu @click="allowedFileTypesDialogOpened = true">
 					<template #icon>
 						<IconFileDocumentAlert :size="20" />
 					</template>
@@ -32,12 +32,10 @@
 				<NcActionCheckbox
 					v-for="({ label: fileTypeLabel }, fileType) in fileTypes"
 					:key="fileType"
-					:model-value="
-						extraSettings?.allowedFileTypes?.includes(fileType)
-					"
+					:modelValue="extraSettings?.allowedFileTypes?.includes(fileType)"
 					:value="fileType"
 					class="file-type-checkbox"
-					@update:model-value="onAllowedFileTypesChange(fileType, $event)">
+					@update:modelValue="onAllowedFileTypesChange(fileType, $event)">
 					{{ fileTypeLabel }}
 				</NcActionCheckbox>
 
@@ -46,7 +44,7 @@
 					type="multiselect"
 					multiple
 					taggable
-					:model-value="extraSettings?.allowedFileExtensions || []"
+					:modelValue="extraSettings?.allowedFileExtensions || []"
 					@option:created="onAllowedFileExtensionsAdded"
 					@option:deselected="onAllowedFileExtensionsDeleted" />
 
@@ -56,23 +54,23 @@
 			<template v-if="!allowedFileTypesDialogOpened">
 				<NcActionInput
 					type="number"
-					:model-value="maxAllowedFilesCount"
-					label-outside
+					:modelValue="maxAllowedFilesCount"
+					labelOutside
 					:label="t('forms', 'Maximum number of files')"
-					:show-trailing-button="false"
+					:showTrailingButton="false"
 					@input="onMaxAllowedFilesCountInput($event.target.value)" />
 
 				<NcActionInput
 					type="number"
-					:model-value="maxFileSizeValue"
-					label-outside
-					:show-trailing-button="false"
+					:modelValue="maxFileSizeValue"
+					labelOutside
+					:showTrailingButton="false"
 					:label="t('forms', 'Maximum file size')"
 					@input="onMaxFileSizeValueInput($event.target.value)" />
 
 				<NcActionInput
 					type="multiselect"
-					:model-value="maxFileSizeUnit"
+					:modelValue="maxFileSizeUnit"
 					:options="availableUnits"
 					required
 					:clearable="false"
diff --git a/src/components/Questions/QuestionGrid.vue b/src/components/Questions/QuestionGrid.vue
index 2f68ebaad..45ba59a72 100644
--- a/src/components/Questions/QuestionGrid.vue
+++ b/src/components/Questions/QuestionGrid.vue
@@ -6,10 +6,10 @@
 <template>
 	<Question
 		v-bind="questionProps"
-		:title-placeholder="answerType.titlePlaceholder"
-		:warning-invalid="answerType.warningInvalid"
-		:content-valid="contentValid"
-		:shift-drag-handle="shiftDragHandle"
+		:titlePlaceholder="answerType.titlePlaceholder"
+		:warningInvalid="answerType.warningInvalid"
+		:contentValid="contentValid"
+		:shiftDragHandle="shiftDragHandle"
 		v-on="commonListeners">
 		<template v-if="readOnly">
 			<fieldset :name="name || undefined" :aria-labelledby="titleId">
@@ -43,7 +43,7 @@
 											hasError ? errorId : undefined
 										"
 										:aria-invalid="hasError ? 'true' : undefined"
-										:model-value="values[row.id]"
+										:modelValue="values[row.id]"
 										:value="column.id.toString()"
 										:name="`${row.id}-answer`"
 										type="radio"
@@ -58,7 +58,7 @@
 											hasError ? errorId : undefined
 										"
 										:aria-invalid="hasError ? 'true' : undefined"
-										:model-value="values[row.id] || []"
+										:modelValue="values[row.id] || []"
 										:value="column.id.toString()"
 										:name="`${row.id}-answer`"
 										type="checkbox"
@@ -70,7 +70,7 @@
 								<template v-if="questionType === 'number'">
 									<NcInputField
 										type="number"
-										:model-value="plainValues[row.id][column.id]"
+										:modelValue="plainValues[row.id][column.id]"
 										@input="
 											onChangeTextNumber(
 												row.id,
@@ -99,7 +99,7 @@
 					animation="200"
 					direction="vertical"
 					handle=".option__drag-handle"
-					invert-swap
+					invertSwap
 					tag="ul"
 					@change="saveOptionsOrder('column')"
 					@start="isDragging = true"
@@ -116,19 +116,19 @@
 							:key="answer.local ? 'option-local' : answer.id"
 							ref="input"
 							:answer="answer"
-							:form-id="formId"
+							:formId="formId"
 							:index="index"
-							:is-unique="isUnique"
-							:max-index="columns.length - 2"
-							:max-option-length="maxStringLengths.optionText"
-							option-type="column"
-							@create-answer="onCreateAnswer"
+							:isUnique="isUnique"
+							:maxIndex="columns.length - 2"
+							:maxOptionLength="maxStringLengths.optionText"
+							optionType="column"
+							@createAnswer="onCreateAnswer"
 							@update:answer="updateAnswer"
 							@delete="deleteOption"
-							@focus-next="focusNextInput"
-							@move-up="onOptionMoveUp(index, 'column')"
-							@move-down="onOptionMoveDown(index, 'column')"
-							@tabbed-out="checkValidOption('column')" />
+							@focusNext="focusNextInput"
+							@moveUp="onOptionMoveUp(index, 'column')"
+							@moveDown="onOptionMoveDown(index, 'column')"
+							@tabbedOut="checkValidOption('column')" />
 					</TransitionGroup>
 				</Draggable>
 
@@ -139,7 +139,7 @@
 					animation="200"
 					direction="vertical"
 					handle=".option__drag-handle"
-					invert-swap
+					invertSwap
 					tag="ul"
 					@change="saveOptionsOrder('row')"
 					@start="isDragging = true"
@@ -156,19 +156,19 @@
 							:key="answer.local ? 'option-local' : answer.id"
 							ref="input"
 							:answer="answer"
-							:form-id="formId"
+							:formId="formId"
 							:index="index"
-							:is-unique="isUnique"
-							:max-index="rows.length - 2"
-							:max-option-length="maxStringLengths.optionText"
-							option-type="row"
-							@create-answer="onCreateAnswer"
+							:isUnique="isUnique"
+							:maxIndex="rows.length - 2"
+							:maxOptionLength="maxStringLengths.optionText"
+							optionType="row"
+							@createAnswer="onCreateAnswer"
 							@update:answer="updateAnswer"
 							@delete="deleteOption"
-							@focus-next="focusNextInput"
-							@move-up="onOptionMoveUp(index, 'row')"
-							@move-down="onOptionMoveDown(index, 'row')"
-							@tabbed-out="checkValidOption('row')" />
+							@focusNext="focusNextInput"
+							@moveUp="onOptionMoveUp(index, 'row')"
+							@moveDown="onOptionMoveDown(index, 'row')"
+							@tabbedOut="checkValidOption('row')" />
 					</TransitionGroup>
 				</Draggable>
 			</template>
diff --git a/src/components/Questions/QuestionLinearScale.vue b/src/components/Questions/QuestionLinearScale.vue
index d4be15ec3..d4bb89ef6 100644
--- a/src/components/Questions/QuestionLinearScale.vue
+++ b/src/components/Questions/QuestionLinearScale.vue
@@ -6,32 +6,32 @@
 <template>
 	<Question
 		v-bind="questionProps"
-		:title-placeholder="answerType.titlePlaceholder"
-		:warning-invalid="answerType.warningInvalid"
+		:titlePlaceholder="answerType.titlePlaceholder"
+		:warningInvalid="answerType.warningInvalid"
 		v-on="commonListeners">
 		<template #actions>
 			<NcActionInput
-				:model-value="optionsLowest"
+				:modelValue="optionsLowest"
 				type="multiselect"
 				:clearable="false"
 				:label="t('forms', 'Lowest value')"
-				label-outside
+				labelOutside
 				:options="[0, 1]"
 				required
-				@update:model-value="onOptionsLowestChange">
+				@update:modelValue="onOptionsLowestChange">
 				<template #icon>
 					<IconPencil :size="20" />
 				</template>
 			</NcActionInput>
 			<NcActionInput
-				:model-value="optionsHighest"
+				:modelValue="optionsHighest"
 				type="multiselect"
 				:clearable="false"
 				:label="t('forms', 'Highest value')"
-				label-outside
+				labelOutside
 				:options="[2, 3, 4, 5, 6, 7, 8, 9, 10]"
 				required
-				@update:model-value="onOptionsHighestChange">
+				@update:modelValue="onOptionsHighestChange">
 				<template #icon>
 					<IconPencil :size="20" />
 				</template>
@@ -46,14 +46,14 @@
 			<NcTextArea
 				v-if="!readOnly"
 				ref="lowest"
-				:model-value="optionsLabelLowest"
+				:modelValue="optionsLabelLowest"
 				class="question-linear-scale__label-input"
 				:label="t('forms', 'Label for lowest value')"
 				:placeholder="t('forms', 'Label (optional)')"
 				resize="none"
 				@input="resizeLabel('lowest')"
 				@blur="onBlur('lowest')"
-				@update:model-value="onOptionsLabelLowestChange" />
+				@update:modelValue="onOptionsLabelLowestChange" />
 			<div
 				v-else-if="optionsLabelLowest !== ''"
 				:id="labelId"
@@ -78,26 +78,26 @@
 						:id="`linear-scale-${id}-${option}`"
 						:aria-describedby="index === 0 ? labelId : undefined"
 						:disabled="!readOnly"
-						:model-value="questionValues"
+						:modelValue="questionValues"
 						:value="option.toString()"
 						:name="`${id}-answer`"
 						type="radio"
 						:required="checkRequired(option)"
-						@update:model-value="onChange"
+						@update:modelValue="onChange"
 						@keydown.enter.exact.prevent="onKeydownEnter" />
 				</div>
 			</fieldset>
 			<NcTextArea
 				v-if="!readOnly"
 				ref="highest"
-				:model-value="optionsLabelHighest"
+				:modelValue="optionsLabelHighest"
 				class="question-linear-scale__label-input"
 				:label="t('forms', 'Label (optional)')"
 				:aria-label="t('forms', 'Label for highest value')"
 				resize="none"
 				@input="resizeLabel('highest')"
 				@blur="onBlur('highest')"
-				@update:model-value="onOptionsLabelHighestChange" />
+				@update:modelValue="onOptionsLabelHighestChange" />
 			<div
 				v-else-if="optionsLabelHighest !== ''"
 				class="question-linear-scale__label question-linear-scale__label-highest">
diff --git a/src/components/Questions/QuestionLong.vue b/src/components/Questions/QuestionLong.vue
index d6d59423c..e221a2dbb 100644
--- a/src/components/Questions/QuestionLong.vue
+++ b/src/components/Questions/QuestionLong.vue
@@ -6,8 +6,8 @@
 <template>
 	<Question
 		v-bind="questionProps"
-		:title-placeholder="answerType.titlePlaceholder"
-		:warning-invalid="answerType.warningInvalid"
+		:titlePlaceholder="answerType.titlePlaceholder"
+		:warningInvalid="answerType.warningInvalid"
 		v-on="commonListeners">
 		<div class="question__content">
 			<textarea
diff --git a/src/components/Questions/QuestionMultiple.vue b/src/components/Questions/QuestionMultiple.vue
index f4b0d1ea3..582ede15a 100644
--- a/src/components/Questions/QuestionMultiple.vue
+++ b/src/components/Questions/QuestionMultiple.vue
@@ -6,20 +6,20 @@
 <template>
 	<Question
 		v-bind="questionProps"
-		:title-placeholder="answerType.titlePlaceholder"
-		:warning-invalid="answerType.warningInvalid"
-		:content-valid="contentValid"
-		:shift-drag-handle="shiftDragHandle"
+		:titlePlaceholder="answerType.titlePlaceholder"
+		:warningInvalid="answerType.warningInvalid"
+		:contentValid="contentValid"
+		:shiftDragHandle="shiftDragHandle"
 		v-on="commonListeners">
 		<template #actions>
 			<NcActionCheckbox
-				:model-value="extraSettings?.shuffleOptions"
-				@update:model-value="onShuffleOptionsChange">
+				:modelValue="extraSettings?.shuffleOptions"
+				@update:modelValue="onShuffleOptionsChange">
 				{{ t('forms', 'Shuffle options') }}
 			</NcActionCheckbox>
 			<NcActionCheckbox
-				:model-value="allowOtherAnswer"
-				@update:model-value="onAllowOtherAnswerChange">
+				:modelValue="allowOtherAnswer"
+				@update:modelValue="onAllowOtherAnswerChange">
 				{{ t('forms', 'Add "other"') }}
 			</NcActionCheckbox>
 
@@ -27,8 +27,8 @@
 			<template v-if="!isUnique">
 				<!-- Allow setting a minimum of options to be checked -->
 				<NcActionCheckbox
-					:model-value="!!extraSettings?.optionsLimitMin"
-					@update:model-value="
+					:modelValue="!!extraSettings?.optionsLimitMin"
+					@update:modelValue="
 						(checked) => onLimitOptionsMin(checked ? 1 : null)
 					">
 					{{ t('forms', 'Require a minimum of options to be checked') }}
@@ -37,15 +37,15 @@
 					v-if="extraSettings?.optionsLimitMin"
 					type="number"
 					:label="t('forms', 'Minimum options to be checked')"
-					:label-outside="false"
-					:show-trailing-button="false"
-					:model-value="extraSettings.optionsLimitMin"
+					:labelOutside="false"
+					:showTrailingButton="false"
+					:modelValue="extraSettings.optionsLimitMin"
 					@update:value="onLimitOptionsMin" />
 
 				<!-- Allow setting a maximum -->
 				<NcActionCheckbox
-					:model-value="!!extraSettings?.optionsLimitMax"
-					@update:model-value="
+					:modelValue="!!extraSettings?.optionsLimitMax"
+					@update:modelValue="
 						(checked) =>
 							onLimitOptionsMax(checked ? choices.length || 1 : null)
 					">
@@ -55,12 +55,12 @@
 					v-if="extraSettings?.optionsLimitMax"
 					type="number"
 					:label="t('forms', 'Maximum options to be checked')"
-					:label-outside="false"
-					:show-trailing-button="false"
-					:model-value="extraSettings.optionsLimitMax"
+					:labelOutside="false"
+					:showTrailingButton="false"
+					:modelValue="extraSettings.optionsLimitMax"
 					@update:value="onLimitOptionsMax" />
 			</template>
-			<NcActionButton close-after-click @click="isOptionDialogShown = true">
+			<NcActionButton closeAfterClick @click="isOptionDialogShown = true">
 				<template #icon>
 					<IconContentPaste :size="20" />
 				</template>
@@ -77,18 +77,18 @@
 					:key="answer.id"
 					:aria-errormessage="hasError ? errorId : undefined"
 					:aria-invalid="hasError ? 'true' : undefined"
-					:model-value="questionValues"
+					:modelValue="questionValues"
 					:value="answer.id.toString()"
 					:name="`${id}-answer`"
 					:type="isUnique ? 'radio' : 'checkbox'"
 					:required="checkRequired(answer.id)"
-					@update:model-value="onChange"
+					@update:modelValue="onChange"
 					@keydown.enter.exact.prevent="onKeydownEnter">
 					{{ answer.text }}
 				</NcCheckboxRadioSwitch>
 				<div v-if="allowOtherAnswer" class="question__other-answer">
 					<NcCheckboxRadioSwitch
-						:model-value="questionValues"
+						:modelValue="questionValues"
 						:aria-errormessage="hasError ? errorId : undefined"
 						:aria-invalid="hasError ? 'true' : undefined"
 						:value="otherAnswer ?? QUESTION_EXTRASETTINGS_OTHER_PREFIX"
@@ -96,7 +96,7 @@
 						:type="isUnique ? 'radio' : 'checkbox'"
 						:required="checkRequired('other-answer')"
 						class="question__label"
-						@update:model-value="onChangeOther"
+						@update:modelValue="onChangeOther"
 						@keydown.enter.exact.prevent="onKeydownEnter">
 						{{ t('forms', 'Other:') }}
 					</NcCheckboxRadioSwitch>
@@ -104,8 +104,8 @@
 						class="question__input"
 						:label="placeholderOtherAnswer"
 						:required="otherAnswer !== undefined"
-						:model-value="cachedOtherAnswerText"
-						@update:model-value="onOtherAnswerTextChange" />
+						:modelValue="cachedOtherAnswerText"
+						@update:modelValue="onOtherAnswerTextChange" />
 				</div>
 			</fieldset>
 		</template>
@@ -118,40 +118,37 @@
 				v-else
 				v-model="choices"
 				class="question__content"
-				animation="200"
+				:animation="200"
 				direction="vertical"
 				handle=".option__drag-handle"
-				invert-swap
-				tag="ul"
+				invertSwap
+				tag="transition-group"
+				:componentData="{
+					name: isDragging
+						? 'no-external-transition-on-drag'
+						: 'options-list-transition',
+				}"
 				@change="saveOptionsOrder('choice')"
 				@start="isDragging = true"
 				@end="isDragging = false">
-				<TransitionGroup
-					:name="
-						isDragging
-							? 'no-external-transition-on-drag'
-							: 'options-list-transition'
-					">
-					<!-- Answer text input edit -->
+				<template #item="{ element: answer, index }">
 					<AnswerInput
-						v-for="(answer, index) in choices"
-						:key="answer.local ? 'option-local' : answer.id"
 						ref="input"
 						:answer="answer"
-						:form-id="formId"
+						:formId="formId"
 						:index="index"
-						:is-unique="isUnique"
-						:max-index="options.length - 1"
-						:max-option-length="maxStringLengths.optionText"
-						option-type="choice"
-						@create-answer="onCreateAnswer"
+						:isUnique="isUnique"
+						:maxIndex="options.length - 1"
+						:maxOptionLength="maxStringLengths.optionText"
+						optionType="choice"
+						@createAnswer="onCreateAnswer"
 						@update:answer="updateAnswer"
 						@delete="deleteOption"
-						@focus-next="focusNextInput"
-						@move-up="onOptionMoveUp(index, 'choice')"
-						@move-down="onOptionMoveDown(index, 'choice')"
-						@tabbed-out="checkValidOption('choice')" />
-				</TransitionGroup>
+						@focusNext="focusNextInput"
+						@moveUp="onOptionMoveUp(index)"
+						@moveDown="onOptionMoveDown(index)"
+						@tabbedOut="checkValidOption" />
+				</template>
 			</Draggable>
 			<li
 				v-if="allowOtherAnswer"
@@ -171,8 +168,8 @@
 
 		<!-- Add multiple options modal -->
 		<OptionInputDialog
-			:open.sync="isOptionDialogShown"
-			@multiple-answers="handleMultipleOptions" />
+			v-model:open="isOptionDialogShown"
+			@multipleAnswers="handleMultipleOptions" />
 	</Question>
 </template>
 
diff --git a/src/components/Questions/QuestionShort.vue b/src/components/Questions/QuestionShort.vue
index 36844380d..efd539090 100644
--- a/src/components/Questions/QuestionShort.vue
+++ b/src/components/Questions/QuestionShort.vue
@@ -6,8 +6,8 @@
 <template>
 	<Question
 		v-bind="questionProps"
-		:title-placeholder="answerType.titlePlaceholder"
-		:warning-invalid="answerType.warningInvalid"
+		:titlePlaceholder="answerType.titlePlaceholder"
+		:warningInvalid="answerType.warningInvalid"
 		v-on="commonListeners">
 		<div class="question__content">
 			<input
@@ -33,13 +33,13 @@
 			<NcActions
 				v-if="!readOnly"
 				:id="validationTypeMenuId"
+				v-model:open="isValidationTypeMenuOpen"
 				:aria-label="
 					t('forms', 'Input types (currently: {type})', {
 						type: validationObject.label,
 					})
 				"
 				:container="`#${validationTypeMenuId}`"
-				:open.sync="isValidationTypeMenuOpen"
 				class="validation-type-menu__toggle"
 				variant="tertiary-no-background">
 				<template #icon>
@@ -50,17 +50,17 @@
 						validationTypeObject, validationTypeName
 					) in validationTypes"
 					:key="validationTypeName"
-					:model-value="validationType"
+					:modelValue="validationType"
 					:name="`${id}_validationMenu`"
 					:value="validationTypeName"
-					@update:model-value="onChangeValidationType(validationTypeName)">
+					@update:modelValue="onChangeValidationType(validationTypeName)">
 					{{ validationTypeObject.label }}
 				</NcActionRadio>
 				<NcActionInput
 					v-if="validationType === 'regex'"
 					ref="regexInput"
 					:label="t('forms', 'Regular expression for input validation')"
-					:model-value="validationRegex"
+					:modelValue="validationRegex"
 					@input="onInputRegex"
 					@submit="onSubmitRegex">
 					<template #icon>
diff --git a/src/components/Results/Answer.vue b/src/components/Results/Answer.vue
index 965ad0741..964e5c987 100644
--- a/src/components/Results/Answer.vue
+++ b/src/components/Results/Answer.vue
@@ -47,7 +47,7 @@
 						<td v-for="column of gridColumns" :key="column.id">
 							<template v-if="gridCellType === 'radio'">
 								<NcCheckboxRadioSwitch
-									:model-value="gridValue[row.id]"
+									:modelValue="gridValue[row.id]"
 									:name="`${row.id}-answer`"
 									:value="column.id.toString()"
 									disabled
@@ -56,7 +56,7 @@
 
 							<template v-if="gridCellType === 'checkbox'">
 								<NcCheckboxRadioSwitch
-									:model-value="gridValue[row.id] || []"
+									:modelValue="gridValue[row.id] || []"
 									:name="`${row.id}-answer`"
 									:value="column.id.toString()"
 									disabled
diff --git a/src/components/Results/Submission.vue b/src/components/Results/Submission.vue
index 7eb7337c2..ec7c47340 100644
--- a/src/components/Results/Submission.vue
+++ b/src/components/Results/Submission.vue
@@ -9,7 +9,7 @@
 			<h3 dir="auto">
 				{{ submission.userDisplayName }}
 			</h3>
-			<NcActions class="submission-menu" force-menu>
+			<NcActions class="submission-menu" forceMenu>
 				<NcActionRouter
 					v-if="canEditSubmission"
 					:to="{
@@ -37,14 +37,14 @@
 			v-for="question in answeredQuestions"
 			:key="question.id"
 			:highlight="highlight"
-			:answer-text="question.squashedAnswers"
+			:answerText="question.squashedAnswers"
 			:answers="question.answers"
-			:question-text="question.text"
-			:grid-cell-type="question.gridCellType"
-			:grid-columns="question.gridColumns"
-			:grid-rows="question.gridRows"
-			:grid-value="question.gridValue"
-			:question-type="question.type" />
+			:questionText="question.text"
+			:gridCellType="question.gridCellType"
+			:gridColumns="question.gridColumns"
+			:gridRows="question.gridRows"
+			:gridValue="question.gridValue"
+			:questionType="question.type" />
 	</div>
 </template>
 
diff --git a/src/components/SidebarTabs/SettingsSidebarTab.vue b/src/components/SidebarTabs/SettingsSidebarTab.vue
index 15bcea0d6..41db89b6b 100644
--- a/src/components/SidebarTabs/SettingsSidebarTab.vue
+++ b/src/components/SidebarTabs/SettingsSidebarTab.vue
@@ -27,33 +27,33 @@
 			{{ t('forms', 'Unlock form') }}
 		</NcButton>
 		<NcCheckboxRadioSwitch
-			:model-value="form.isAnonymous"
+			:modelValue="form.isAnonymous"
 			:disabled="formArchived || locked"
 			type="switch"
-			@update:model-value="onAnonChange">
+			@update:modelValue="onAnonChange">
 			<!-- TRANSLATORS Checkbox to select whether responses will be stored anonymously or not -->
 			{{ t('forms', 'Store responses anonymously') }}
 		</NcCheckboxRadioSwitch>
 		<NcCheckboxRadioSwitch
 			:title="disableSubmitMultipleExplanation"
-			:model-value="submitMultiple"
+			:modelValue="submitMultiple"
 			:disabled="disableSubmitMultiple || formArchived || locked"
 			type="switch"
-			@update:model-value="onSubmitMultipleChange">
+			@update:modelValue="onSubmitMultipleChange">
 			{{ t('forms', 'Allow multiple responses per person') }}
 		</NcCheckboxRadioSwitch>
 		<NcCheckboxRadioSwitch
-			:model-value="form.allowEditSubmissions"
+			:modelValue="form.allowEditSubmissions"
 			:disabled="formArchived || locked"
 			type="switch"
-			@update:model-value="onAllowEditSubmissionsChange">
+			@update:modelValue="onAllowEditSubmissionsChange">
 			{{ t('forms', 'Allow editing own responses') }}
 		</NcCheckboxRadioSwitch>
 		<NcCheckboxRadioSwitch
-			:model-value="formExpires"
+			:modelValue="formExpires"
 			:disabled="formArchived || locked"
 			type="switch"
-			@update:model-value="onFormExpiresChange">
+			@update:modelValue="onFormExpiresChange">
 			{{ t('forms', 'Set expiration date') }}
 		</NcCheckboxRadioSwitch>
 		<div v-show="formExpires && !formArchived" class="settings-div--indent">
@@ -61,51 +61,51 @@
 				id="expiresDatetimePicker"
 				:clearable="false"
 				:disabled="locked"
-				:disabled-date="notBeforeToday"
-				:disabled-time="notBeforeNow"
+				:disabledDate="notBeforeToday"
+				:disabledTime="notBeforeNow"
 				:editable="false"
 				:format="stringifyDate"
-				:minute-step="5"
-				:show-second="false"
-				:model-value="expirationDate"
+				:minuteStep="5"
+				:showSecond="false"
+				:modelValue="expirationDate"
 				type="datetime"
 				@change="onExpirationDateChange" />
 			<NcCheckboxRadioSwitch
-				:model-value="form.showExpiration"
+				:modelValue="form.showExpiration"
 				:disabled="locked"
 				type="switch"
-				@update:model-value="onShowExpirationChange">
+				@update:modelValue="onShowExpirationChange">
 				{{ t('forms', 'Show expiration date on form') }}
 			</NcCheckboxRadioSwitch>
 		</div>
 		<NcCheckboxRadioSwitch
-			:model-value="formClosed"
+			:modelValue="formClosed"
 			:disabled="formArchived || locked"
 			aria-describedby="forms-settings__close-form"
 			type="switch"
-			@update:model-value="onFormClosedChange">
+			@update:modelValue="onFormClosedChange">
 			{{ t('forms', 'Close form') }}
 		</NcCheckboxRadioSwitch>
 		<p id="forms-settings__close-form" class="settings-hint">
 			{{ t('forms', 'Closed forms do not accept new submissions.') }}
 		</p>
 		<NcCheckboxRadioSwitch
-			:model-value="isFormLockedPermanently"
+			:modelValue="isFormLockedPermanently"
 			:disabled="
 				formArchived
 				|| (locked && form.lockedUntil !== 0)
 				|| !isCurrentUserOwner
 			"
 			type="switch"
-			@update:model-value="onFormLockChange">
+			@update:modelValue="onFormLockChange">
 			{{ t('forms', 'Lock form permanently') }}
 		</NcCheckboxRadioSwitch>
 		<NcCheckboxRadioSwitch
-			:model-value="formArchived"
+			:modelValue="formArchived"
 			aria-describedby="forms-settings__archive-form"
 			:disabled="locked || !isCurrentUserOwner"
 			type="switch"
-			@update:model-value="onFormArchivedChange">
+			@update:modelValue="onFormArchivedChange">
 			{{ t('forms', 'Archive form') }}
 		</NcCheckboxRadioSwitch>
 		<p id="forms-settings__archive-form" class="settings-hint">
@@ -117,10 +117,10 @@
 			}}
 		</p>
 		<NcCheckboxRadioSwitch
-			:model-value="hasCustomSubmissionMessage"
+			:modelValue="hasCustomSubmissionMessage"
 			:disabled="formArchived || locked"
 			type="switch"
-			@update:model-value="onUpdateHasCustomSubmissionMessage">
+			@update:modelValue="onUpdateHasCustomSubmissionMessage">
 			{{ t('forms', 'Custom submission message') }}
 		</NcCheckboxRadioSwitch>
 		<div
@@ -170,7 +170,7 @@
 
 		<TransferOwnership
 			:locked="locked"
-			:is-owner="isCurrentUserOwner"
+			:isOwner="isCurrentUserOwner"
 			:form="form" />
 	</div>
 </template>
diff --git a/src/components/SidebarTabs/SharingSearchDiv.vue b/src/components/SidebarTabs/SharingSearchDiv.vue
index a1b1136d0..ef4b43ad1 100644
--- a/src/components/SidebarTabs/SharingSearchDiv.vue
+++ b/src/components/SidebarTabs/SharingSearchDiv.vue
@@ -6,7 +6,7 @@
 <template>
 	<div>
 		<NcSelectUsers
-			keep-open
+			keepOpen
 			:loading="showLoadingCircle"
 			:disabled="locked"
 			:options="options"
@@ -49,7 +49,7 @@ export default {
 		},
 	},
 
-	emits: ['add-share'],
+	emits: ['addShare'],
 
 	computed: {
 		/**
@@ -106,7 +106,7 @@ export default {
 				displayName: share.displayName,
 				shareType: share.shareType,
 			}
-			this.$emit('add-share', newShare)
+			this.$emit('addShare', newShare)
 		},
 	},
 }
diff --git a/src/components/SidebarTabs/SharingShareDiv.vue b/src/components/SidebarTabs/SharingShareDiv.vue
index 57684661f..e9035e6ec 100644
--- a/src/components/SidebarTabs/SharingShareDiv.vue
+++ b/src/components/SidebarTabs/SharingShareDiv.vue
@@ -7,9 +7,9 @@
 	<li class="share-div">
 		<NcAvatar
 			:user="share.shareWith"
-			disable-menu
-			:display-name="displayName"
-			:is-no-user="isNoUser" />
+			disableMenu
+			:displayName="displayName"
+			:isNoUser="isNoUser" />
 		<div class="share-div__desc">
 			<span>{{ displayName }}</span>
 			<span>{{ displayNameAppendix }}</span>
@@ -17,21 +17,21 @@
 		<NcActions class="share-div__actions">
 			<NcActionCaption :name="t('forms', 'Permissions')" />
 			<NcActionCheckbox
-				:model-value="canEditForm"
+				:modelValue="canEditForm"
 				:disabled="locked"
-				@update:model-value="updatePermissionEdit">
+				@update:modelValue="updatePermissionEdit">
 				{{ t('forms', 'Edit form') }}
 			</NcActionCheckbox>
 			<NcActionCheckbox
-				:model-value="canAccessResults"
+				:modelValue="canAccessResults"
 				:disabled="locked"
-				@update:model-value="updatePermissionResults">
+				@update:modelValue="updatePermissionResults">
 				{{ t('forms', 'View responses') }}
 			</NcActionCheckbox>
 			<NcActionCheckbox
-				:model-value="canDeleteResults"
+				:modelValue="canDeleteResults"
 				:disabled="!canAccessResults || locked"
-				@update:model-value="updatePermissionDeleteResults">
+				@update:modelValue="updatePermissionDeleteResults">
 				{{ t('forms', 'Delete responses') }}
 			</NcActionCheckbox>
 			<NcActionSeparator />
@@ -81,7 +81,7 @@ export default {
 		},
 	},
 
-	emits: ['remove-share', 'update:share'],
+	emits: ['removeShare', 'update:share'],
 
 	computed: {
 		canAccessResults() {
@@ -126,7 +126,7 @@ export default {
 
 	methods: {
 		removeShare() {
-			this.$emit('remove-share', this.share)
+			this.$emit('removeShare', this.share)
 		},
 
 		/**
diff --git a/src/components/SidebarTabs/SharingSidebarTab.vue b/src/components/SidebarTabs/SharingSidebarTab.vue
index baa95382f..2f4fa1fa6 100644
--- a/src/components/SidebarTabs/SharingSidebarTab.vue
+++ b/src/components/SidebarTabs/SharingSidebarTab.vue
@@ -17,10 +17,10 @@
 				})
 			" />
 		<SharingSearchDiv
-			:current-shares="form.shares"
-			:show-loading="isLoading"
+			:currentShares="form.shares"
+			:showLoading="isLoading"
 			:locked="locked"
-			@add-share="addShare" />
+			@addShare="addShare" />
 
 		<!-- Public Link -->
 		<div
@@ -96,7 +96,7 @@
 					</NcActionButton>
 					<NcActionButton
 						v-if="appConfig.allowPublicLink"
-						close-after-click
+						closeAfterClick
 						:disabled="locked"
 						@click="addPublicLink">
 						<template #icon>
@@ -159,10 +159,10 @@
 				</label>
 				<NcCheckboxRadioSwitch
 					id="share-switch__permit-all"
-					:model-value="form.access.permitAllUsers"
+					:modelValue="form.access.permitAllUsers"
 					:disabled="locked"
 					type="switch"
-					@update:model-value="onPermitAllUsersChange" />
+					@update:modelValue="onPermitAllUsersChange" />
 			</div>
 			<div
 				v-if="appConfig.allowShowToAll && form.access.permitAllUsers"
@@ -175,10 +175,10 @@
 				</label>
 				<NcCheckboxRadioSwitch
 					id="share-switch__show-to-all"
-					:model-value="form.access.showToAllUsers"
+					:modelValue="form.access.showToAllUsers"
 					:disabled="locked"
 					type="switch"
-					@update:model-value="onShowToAllUsersChange" />
+					@update:modelValue="onShowToAllUsersChange" />
 			</div>
 		</div>
 
@@ -189,7 +189,7 @@
 				:key="'share-' + share.shareType + '-' + share.shareWith"
 				:share="share"
 				:locked="locked"
-				@remove-share="removeShare"
+				@removeShare="removeShare"
 				@update:share="updateShare" />
 		</TransitionGroup>
 	</div>
@@ -263,7 +263,7 @@ export default {
 		},
 	},
 
-	emits: ['add-share', 'update-share', 'remove-share', 'update:formProp'],
+	emits: ['addShare', 'updateShare', 'removeShare', 'update:formProp'],
 
 	data() {
 		return {
@@ -320,7 +320,7 @@ export default {
 				const share = OcsResponse2Data(response)
 
 				// Add new share
-				this.$emit('add-share', share)
+				this.$emit('addShare', share)
 			} catch (error) {
 				logger.error('Error while adding new share', {
 					error,
@@ -347,7 +347,7 @@ export default {
 				const share = OcsResponse2Data(response)
 
 				// Add new share
-				this.$emit('add-share', share)
+				this.$emit('addShare', share)
 			} catch (error) {
 				logger.error('Error adding public link', { error })
 				showError(t('forms', 'There was an error while adding the link'))
@@ -396,7 +396,7 @@ export default {
 				})
 
 				// Add new share
-				this.$emit('update-share', share)
+				this.$emit('updateShare', share)
 			} catch (error) {
 				logger.error('Error while updating share', {
 					error,
@@ -423,7 +423,7 @@ export default {
 						shareId: share.id,
 					}),
 				)
-				this.$emit('remove-share', share)
+				this.$emit('removeShare', share)
 			} catch (error) {
 				logger.error('Error while removing share', { error, share })
 				showError(t('forms', 'There was an error while removing the share'))
diff --git a/src/components/SidebarTabs/TransferOwnership.vue b/src/components/SidebarTabs/TransferOwnership.vue
index 4d5ce5dab..8a6340eae 100644
--- a/src/components/SidebarTabs/TransferOwnership.vue
+++ b/src/components/SidebarTabs/TransferOwnership.vue
@@ -18,10 +18,10 @@
 		</NcButton>
 
 		<NcDialog
-			:open.sync="showModal"
-			content-classes="modal-content"
+			v-model:open="showModal"
+			contentClasses="modal-content"
 			:name="t('forms', 'Transfer ownership')"
-			out-transition
+			outTransition
 			@close="closeModal">
 			<template #default>
 				<!-- eslint-disable vue/no-v-html -->
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 2e8a04133..5d1dc8cb8 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -98,7 +98,7 @@ export default {
 		},
 	},
 
-	emits: ['share-form'],
+	emits: ['shareForm'],
 
 	setup() {
 		return {
@@ -186,7 +186,7 @@ export default {
 		},
 
 		onShareForm() {
-			this.$emit('share-form')
+			this.$emit('shareForm')
 		},
 	},
 }
diff --git a/src/emptyContent.js b/src/emptyContent.js
index 6179e5dcb..73558934b 100644
--- a/src/emptyContent.js
+++ b/src/emptyContent.js
@@ -3,16 +3,12 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 import { translate, translatePlural } from '@nextcloud/l10n'
-import Vue from 'vue'
+import { createApp } from 'vue'
 import FormsEmptyContent from './FormsEmptyContent.vue'
 
 import 'vite/modulepreload-polyfill'
 
-Vue.prototype.t = translate
-Vue.prototype.n = translatePlural
-
-export default new Vue({
-	el: '#content',
-	name: 'FormsEmptyContent',
-	render: (h) => h(FormsEmptyContent),
-})
+const app = createApp(FormsEmptyContent)
+app.config.globalProperties.t = translate
+app.config.globalProperties.n = translatePlural
+app.mount('#content')
diff --git a/src/main.js b/src/main.js
index d3f99e517..a01a680d9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,19 +4,20 @@
  */
 
 import { translate, translatePlural } from '@nextcloud/l10n'
-import Vue from 'vue'
+import { createApp } from 'vue'
 import Forms from './Forms.vue'
 import router from './router.js'
 
 import 'vite/modulepreload-polyfill'
 import '@nextcloud/dialogs/style.css'
 
-Vue.prototype.t = translate
-Vue.prototype.n = translatePlural
+const app = createApp(Forms)
 
-export default new Vue({
-	el: '#content',
-	name: 'FormsRoot',
-	router,
-	render: (h) => h(Forms),
-})
+app.config.globalProperties.t = translate
+app.config.globalProperties.n = translatePlural
+
+app.use(router)
+
+app.mount('#content')
+
+export default app
diff --git a/src/router.js b/src/router.js
index 415a77992..ec1f04acf 100644
--- a/src/router.js
+++ b/src/router.js
@@ -4,22 +4,15 @@
  */
 
 import { generateUrl } from '@nextcloud/router'
-import Vue from 'vue'
-import Router from 'vue-router'
-import Create from './views/Create.vue'
-import Results from './views/Results.vue'
-import Submit from './views/Submit.vue'
+import { createRouter, createWebHistory } from 'vue-router'
 
-Vue.use(Router)
+const Create = () => import('./views/Create.vue')
+const Results = () => import('./views/Results.vue')
+const Submit = () => import('./views/Submit.vue')
 
-export default new Router({
-	mode: 'history',
-
-	// if index.php is in the url AND we got this far, then it's working:
-	// let's keep using index.php in the url
-	base: generateUrl('/apps/forms', ''),
+const router = createRouter({
+	history: createWebHistory(generateUrl('/apps/forms', '')),
 	linkActiveClass: 'active',
-
 	routes: [
 		{
 			path: '/',
@@ -33,27 +26,23 @@ export default new Router({
 		},
 		{
 			path: '/:hash/edit',
-			components: {
-				default: Create,
-			},
+			components: { default: Create },
 			name: 'edit',
 			props: { default: true },
 		},
 		{
 			path: '/:hash/results',
-			components: {
-				default: Results,
-			},
+			components: { default: Results },
 			name: 'results',
 			props: { default: true },
 		},
 		{
 			path: '/:hash/submit/:submissionId?',
-			components: {
-				default: Submit,
-			},
+			components: { default: Submit },
 			name: 'submit',
 			props: { default: true },
 		},
 	],
 })
+
+export default router
diff --git a/src/settings.js b/src/settings.js
index 23b6a97a8..b45809e5d 100644
--- a/src/settings.js
+++ b/src/settings.js
@@ -4,16 +4,16 @@
  */
 
 import { translate, translatePlural } from '@nextcloud/l10n'
-import Vue from 'vue'
+import { createApp } from 'vue'
 import FormsSettings from './FormsSettings.vue'
 
 import 'vite/modulepreload-polyfill'
 
-Vue.prototype.t = translate
-Vue.prototype.n = translatePlural
+const app = createApp(FormsSettings)
 
-export default new Vue({
-	el: '#forms-settings',
-	name: 'FormsSettings',
-	render: (h) => h(FormsSettings),
-})
+app.config.globalProperties.t = translate
+app.config.globalProperties.n = translatePlural
+
+app.mount('#forms-settings')
+
+export default app
diff --git a/src/submit.js b/src/submit.js
index 008c4c192..7062a6ee3 100644
--- a/src/submit.js
+++ b/src/submit.js
@@ -4,16 +4,16 @@
  */
 
 import { translate, translatePlural } from '@nextcloud/l10n'
-import Vue from 'vue'
+import { createApp } from 'vue'
 import FormsSubmitRoot from './FormsSubmit.vue'
 
 import 'vite/modulepreload-polyfill'
 
-Vue.prototype.t = translate
-Vue.prototype.n = translatePlural
+const app = createApp(FormsSubmitRoot)
 
-export default new Vue({
-	el: '#content',
-	name: 'FormsSubmitRoot',
-	render: (h) => h(FormsSubmitRoot),
-})
+app.config.globalProperties.t = translate
+app.config.globalProperties.n = translatePlural
+
+app.mount('#content')
+
+export default app
diff --git a/src/views/Create.vue b/src/views/Create.vue
index 537b74787..84e9bfc59 100644
--- a/src/views/Create.vue
+++ b/src/views/Create.vue
@@ -5,7 +5,7 @@
 
 <template>
 	<NcAppContent
-		:page-heading="
+		:pageHeading="
 			form.title ? t('forms', 'Edit form') : t('forms', 'Create form')
 		">
 		<!-- Show results & sidebar button -->
@@ -13,9 +13,9 @@
 			:archived="isFormArchived"
 			:locked="isFormLocked"
 			:permissions="form?.permissions"
-			:sidebar-opened="sidebarOpened"
-			:submission-count="form?.submissionCount"
-			@share-form="onShareForm" />
+			:sidebarOpened="sidebarOpened"
+			:submissionCount="form?.submissionCount"
+			@shareForm="onShareForm" />
 
 		<NcEmptyContent
 			v-if="isLoadingForm"
@@ -117,40 +117,38 @@
 				<Draggable
 					v-model="form.questions"
 					:animation="200"
-					tag="ul"
+					tag="transition-group"
+					:componentData="{
+						name: isDragging
+							? 'no-external-transition-on-drag'
+							: 'question-list',
+					}"
 					handle=".question__drag-handle"
 					@change="onQuestionOrderChange"
 					@start="isDragging = true"
 					@end="isDragging = false">
-					<transition-group
-						:name="
-							isDragging
-								? 'no-external-transition-on-drag'
-								: 'question-list'
-						">
+					<template #item="{ element: question, index }">
 						<component
 							:is="answerTypes[question.type].component"
-							v-for="(question, index) in form.questions"
 							ref="questions"
-							:key="question.id"
-							:can-move-down="index < form.questions.length - 1"
-							:can-move-up="index > 0"
-							:answer-type="answerTypes[question.type]"
+							v-model="form.questions[index]"
+							:canMoveDown="index < form.questions.length - 1"
+							:canMoveUp="index > 0"
+							:answerType="answerTypes[question.type]"
 							:index="index + 1"
-							:max-string-lengths="maxStringLengths"
-							v-bind.sync="form.questions[index]"
+							:maxStringLengths="maxStringLengths"
 							@clone="cloneQuestion(question)"
 							@delete="deleteQuestion(question.id)"
-							@move-down="onMoveDown(index)"
-							@move-up="onMoveUp(index)" />
-					</transition-group>
+							@moveDown="onMoveDown(index)"
+							@moveUp="onMoveUp(index)" />
+					</template>
 				</Draggable>
 
 				<!-- Add new questions menu -->
 				<div class="question-menu">
 					<NcActions
-						:open.sync="questionMenuOpened"
-						:menu-name="t('forms', 'Add a question')"
+						v-model:open="questionMenuOpened"
+						:menuName="t('forms', 'Add a question')"
 						:aria-label="t('forms', 'Add a question')"
 						primary>
 						<template #icon>
@@ -162,9 +160,9 @@
 							<NcActionButton
 								v-for="(answer, type) in answerTypesFilter"
 								:key="answer.label"
-								:close-after-click="!hasSubtypes(answer)"
+								:closeAfterClick="!hasSubtypes(answer)"
 								:disabled="isLoadingQuestions"
-								:is-menu="hasSubtypes(answer)"
+								:isMenu="hasSubtypes(answer)"
 								class="question-menu__question"
 								@click="
 									hasSubtypes(answer)
@@ -195,7 +193,7 @@
 									activeQuestionType
 								].subtypes"
 								:key="'subtype-' + answer.label"
-								close-after-click
+								closeAfterClick
 								:disabled="isLoadingQuestions"
 								class="question-menu__question"
 								@click="addQuestion(activeQuestionType, type)">
diff --git a/src/views/Results.vue b/src/views/Results.vue
index 8180c15ec..aed66ea60 100644
--- a/src/views/Results.vue
+++ b/src/views/Results.vue
@@ -4,9 +4,9 @@
 -->
 
 <template>
-	<NcAppContent :page-heading="t('forms', 'Results')">
+	<NcAppContent :pageHeading="t('forms', 'Results')">
 		<NcDialog
-			:open.sync="showLinkedFileNotAvailableDialog"
+			v-model:open="showLinkedFileNotAvailableDialog"
 			:name="t('forms', 'Linked file not available')"
 			:message="
 				t(
@@ -16,15 +16,15 @@
 			"
 			:buttons="linkedFileNotAvailableButtons"
 			size="normal"
-			no-close />
+			noClose />
 
 		<TopBar
 			:archived="isFormArchived"
 			:locked="isFormLocked"
 			:permissions="form?.permissions"
-			:sidebar-opened="sidebarOpened"
-			:submission-count="form?.submissionCount"
-			@share-form="onShareForm" />
+			:sidebarOpened="sidebarOpened"
+			:submissionCount="form?.submissionCount"
+			@shareForm="onShareForm" />
 
 		<!-- Showing submissions -->
 		<header>
@@ -42,9 +42,9 @@
 			<!-- View switcher between Summary and Responses -->
 			<div class="response-actions">
 				<PillMenu
+					v-model:active="activeResponseView"
 					:disabled="noSubmissions"
 					:options="responseViews"
-					:active.sync="activeResponseView"
 					class="response-actions__toggle"
 					@update:active="loadFormResults" />
 
@@ -52,7 +52,7 @@
 				<NcActions
 					v-if="canExportSubmissions"
 					:aria-label="t('forms', 'Options')"
-					force-name
+					forceName
 					:inline="isMobile ? 0 : 1"
 					@blur="isDownloadActionOpened = false"
 					@close="isDownloadActionOpened = false">
@@ -74,14 +74,14 @@
 								</template>
 								{{ t('forms', 'Open spreadsheet') }}
 							</NcActionButton>
-							<NcActionButton close-after-click @click="onReExport">
+							<NcActionButton closeAfterClick @click="onReExport">
 								<template #icon>
 									<IconRefresh :size="20" />
 								</template>
 								{{ t('forms', 'Re-export spreadsheet') }}
 							</NcActionButton>
 							<NcActionButton
-								close-after-click
+								closeAfterClick
 								:disabled="isFormLocked"
 								@click="onUnlinkFile">
 								<template #icon>
@@ -93,7 +93,7 @@
 						</template>
 						<NcActionButton
 							v-if="!noSubmissions"
-							close-after-click
+							closeAfterClick
 							@click="onStoreToFiles">
 							<template #icon>
 								<IconFolder :size="20" />
@@ -102,8 +102,8 @@
 						</NcActionButton>
 						<NcActionButton
 							v-if="!noSubmissions"
-							:close-after-click="false"
-							is-menu
+							:closeAfterClick="false"
+							isMenu
 							@click="isDownloadActionOpened = true">
 							<template #icon>
 								<IconDownload :size="20" />
@@ -112,7 +112,7 @@
 						</NcActionButton>
 						<NcActionButton
 							v-if="canDeleteSubmissions && !noSubmissions"
-							close-after-click
+							closeAfterClick
 							@click="deleteAllSubmissions">
 							<template #icon>
 								<IconDelete :size="20" />
@@ -131,7 +131,7 @@
 						</NcActionButton>
 						<NcActionSeparator />
 						<NcActionButton
-							close-after-click
+							closeAfterClick
 							@click="onDownloadFile('csv')">
 							<template #icon>
 								<IconFileDelimited :size="20" />
@@ -139,7 +139,7 @@
 							CSV
 						</NcActionButton>
 						<NcActionButton
-							close-after-click
+							closeAfterClick
 							@click="onDownloadFile('ods')">
 							<template #icon>
 								<IconTable :size="20" />
@@ -147,7 +147,7 @@
 							ODS
 						</NcActionButton>
 						<NcActionButton
-							close-after-click
+							closeAfterClick
 							@click="onDownloadFile('xlsx')">
 							<template #icon>
 								<IconFileExcelOutline :size="20" />
@@ -168,9 +168,9 @@
 					<NcTextField
 						v-model="submissionSearch"
 						:label="t('forms', 'Search')"
-						trailing-button-icon="close"
-						:show-trailing-button="submissionSearch.length > 0"
-						@trailing-button-click="submissionSearch = ''">
+						trailingButtonIcon="close"
+						:showTrailingButton="submissionSearch.length > 0"
+						@trailingButtonClick="submissionSearch = ''">
 						<template #icon>
 							<IconMagnify :size="20" />
 						</template>
@@ -241,24 +241,24 @@
 			<Submission
 				v-for="submission in submissions"
 				:key="submission.id"
-				:form-hash="form.hash"
+				:formHash="form.hash"
 				:submission="submission"
 				:questions="questions"
 				:highlight="submissionSearch"
-				:can-delete-submission="canDeleteSubmission(submission.userId)"
-				:can-edit-submission="canEditSubmission(submission.userId)"
+				:canDeleteSubmission="canDeleteSubmission(submission.userId)"
+				:canEditSubmission="canEditSubmission(submission.userId)"
 				@delete="deleteSubmission(submission.id)" />
 
 			<PaginationToolbar
+				v-model:limit="limit"
+				v-model:offset="offset"
 				class="bottom-pagination"
-				:total-items-count="filteredSubmissionsCount"
-				:limit.sync="limit"
-				:offset.sync="offset" />
+				:totalItemsCount="filteredSubmissionsCount" />
 		</section>
 
 		<!-- Confirmation dialog for deleting all submissions -->
 		<NcDialog
-			:open.sync="showConfirmDeleteDialog"
+			v-model:open="showConfirmDeleteDialog"
 			:name="t('forms', 'Delete submissions')"
 			:message="
 				t(
diff --git a/src/views/Sidebar.vue b/src/views/Sidebar.vue
index 94dfb0076..a97f052e4 100644
--- a/src/views/Sidebar.vue
+++ b/src/views/Sidebar.vue
@@ -17,11 +17,11 @@
 			<SharingSidebarTab
 				:form="form"
 				:locked="isFormLocked"
-				:locked-until="lockedUntilFormatted"
-				@update:form-prop="onPropertyChange"
-				@add-share="onAddShare"
-				@remove-share="onRemoveShare"
-				@update-share="onUpdateShare" />
+				:lockedUntil="lockedUntilFormatted"
+				@update:formProp="onPropertyChange"
+				@addShare="onAddShare"
+				@removeShare="onRemoveShare"
+				@updateShare="onUpdateShare" />
 		</NcAppSidebarTab>
 
 		<NcAppSidebarTab
@@ -34,8 +34,8 @@
 			<SettingsSidebarTab
 				:form="form"
 				:locked="isFormLocked"
-				:locked-until="lockedUntilFormatted"
-				@update:form-prop="onPropertyChange" />
+				:lockedUntil="lockedUntilFormatted"
+				@update:formProp="onPropertyChange" />
 		</NcAppSidebarTab>
 	</NcAppSidebar>
 </template>
@@ -96,7 +96,7 @@ export default {
 		 * @param {any} newVal The new Property value
 		 */
 		onPropertyChange(property, newVal) {
-			this.$set(this.form, property, newVal)
+			this.form[property] = newVal
 			this.saveFormProperty(property)
 		},
 
diff --git a/src/views/Submit.vue b/src/views/Submit.vue
index 5b52df938..9887a4ef3 100644
--- a/src/views/Submit.vue
+++ b/src/views/Submit.vue
@@ -6,15 +6,15 @@
 <template>
 	<NcAppContent
 		:class="{ 'app-content--public': publicView }"
-		:page-heading="t('forms', 'Submit form')">
+		:pageHeading="t('forms', 'Submit form')">
 		<TopBar
 			v-if="!publicView"
 			:archived="isArchived"
 			:locked="isFormLocked"
 			:permissions="form?.permissions"
-			:sidebar-opened="sidebarOpened"
-			:submission-count="form?.submissionCount"
-			@share-form="onShareForm" />
+			:sidebarOpened="sidebarOpened"
+			:submissionCount="form?.submissionCount"
+			@shareForm="onShareForm" />
 
 		<!-- Form is loading -->
 		<NcEmptyContent
@@ -111,10 +111,10 @@
 						v-for="(question, index) in validQuestions"
 						ref="questions"
 						:key="question.id"
-						read-only
-						:answer-type="answerTypes[question.type]"
+						readOnly
+						:answerType="answerTypes[question.type]"
 						:index="index + 1"
-						:max-string-lengths="maxStringLengths"
+						:maxStringLengths="maxStringLengths"
 						:values="answers[question.id]"
 						v-bind="question"
 						@keydown.enter="onKeydownEnter"
@@ -150,7 +150,7 @@
 
 			<!-- Confirmation dialog if form is empty submitted -->
 			<NcDialog
-				:open.sync="showConfirmEmptyModal"
+				v-model:open="showConfirmEmptyModal"
 				:name="t('forms', 'Confirm submit')"
 				:message="
 					t('forms', 'Are you sure you want to submit an empty form?')
@@ -158,7 +158,7 @@
 				:buttons="confirmEmptyModalButtons" />
 			<!-- Confirmation dialog if form is left unsubmitted -->
 			<NcDialog
-				:open.sync="showConfirmLeaveDialog"
+				v-model:open="showConfirmLeaveDialog"
 				:name="t('forms', 'Leave form')"
 				:message="
 					t(
@@ -167,19 +167,19 @@
 					)
 				"
 				:buttons="confirmLeaveFormButtons"
-				no-close
-				:close-on-click-outside="false" />
+				noClose
+				:closeOnClickOutside="false" />
 			<!-- Confirmation dialog for clear form -->
 			<NcDialog
-				:open.sync="showClearFormDialog"
+				v-model:open="showClearFormDialog"
 				:name="t('forms', 'Clear form')"
 				:message="t('forms', 'Do you want to clear all answers?')"
 				:buttons="confirmClearFormButtons"
-				no-close
-				:close-on-click-outside="false" />
+				noClose
+				:closeOnClickOutside="false" />
 			<!-- Confirmation dialog if form was changed -->
 			<NcDialog
-				:open.sync="showClearFormDueToChangeDialog"
+				v-model:open="showClearFormDueToChangeDialog"
 				:name="t('forms', 'Clear form')"
 				:message="
 					t(
@@ -188,8 +188,8 @@
 					)
 				"
 				:buttons="confirmClearFormButtons"
-				no-close
-				:close-on-click-outside="false" />
+				noClose
+				:closeOnClickOutside="false" />
 		</template>
 	</NcAppContent>
 </template>