diff --git a/package-lock.json b/package-lock.json
index 9e1aba68ac..60f07b668d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,7 +32,7 @@
         "systeminformation": "5.21.15",
         "tree-kill": "1.2.2",
         "uuid": "9.0.0",
-        "vue": "3.2.45",
+        "vue": "3.4.15",
         "vue-router": "4.0.8",
         "vuedraggable": "4.1.0",
         "vuex": "4.0.2",
@@ -71,7 +71,7 @@
         "eslint-config-prettier": "8.5.0",
         "eslint-plugin-import": "2.27.5",
         "eslint-plugin-prettier": "3.4.0",
-        "eslint-plugin-vue": "9.5.1",
+        "eslint-plugin-vue": "9.20.1",
         "happy-dom": "8.4.2",
         "license-checker": "25.0.1",
         "markdownlint": "0.31.1",
@@ -92,7 +92,7 @@
         "vite-plugin-node-polyfills": "0.15.0",
         "vite-tsconfig-paths": "4.2.1",
         "vitest": "0.34.6",
-        "vue-tsc": "1.8.19",
+        "vue-tsc": "1.8.27",
         "yargs": "17.2.1"
       },
       "engines": {
@@ -288,9 +288,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
-      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==",
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz",
+      "integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -915,6 +915,21 @@
         "node": ">=12"
       }
     },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
+      "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
+      "dev": true,
+      "dependencies": {
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz",
@@ -1188,8 +1203,7 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.9",
@@ -2213,153 +2227,88 @@
       }
     },
     "node_modules/@volar/language-core": {
-      "version": "1.10.10",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.10.10.tgz",
-      "integrity": "sha512-nsV1o3AZ5n5jaEAObrS3MWLBWaGwUj/vAsc15FVNIv+DbpizQRISg9wzygsHBr56ELRH8r4K75vkYNMtsSNNWw==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.11.1.tgz",
+      "integrity": "sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==",
       "dev": true,
       "dependencies": {
-        "@volar/source-map": "1.10.10"
+        "@volar/source-map": "1.11.1"
       }
     },
     "node_modules/@volar/source-map": {
-      "version": "1.10.10",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.10.10.tgz",
-      "integrity": "sha512-GVKjLnifV4voJ9F0vhP56p4+F3WGf+gXlRtjFZsv6v3WxBTWU3ZVeaRaEHJmWrcv5LXmoYYpk/SC25BKemPRkg==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.11.1.tgz",
+      "integrity": "sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==",
       "dev": true,
       "dependencies": {
         "muggle-string": "^0.3.1"
       }
     },
     "node_modules/@volar/typescript": {
-      "version": "1.10.10",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.10.10.tgz",
-      "integrity": "sha512-4a2r5bdUub2m+mYVnLu2wt59fuoYWe7nf0uXtGHU8QQ5LDNfzAR0wK7NgDiQ9rcl2WT3fxT2AA9AylAwFtj50A==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.11.1.tgz",
+      "integrity": "sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==",
       "dev": true,
       "dependencies": {
-        "@volar/language-core": "1.10.10",
+        "@volar/language-core": "1.11.1",
         "path-browserify": "^1.0.1"
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.7.tgz",
-      "integrity": "sha512-pACdY6YnTNVLXsB86YD8OF9ihwpolzhhtdLVHhBL6do/ykr6kKXNYABRtNMGrsQXpEXXyAdwvWWkuTbs4MFtPQ==",
-      "dev": true,
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.15.tgz",
+      "integrity": "sha512-XcJQVOaxTKCnth1vCxEChteGuwG6wqnUHxAm1DO3gCz0+uXKaJNx8/digSz4dLALCy8n2lKq24jSUs8segoqIw==",
       "dependencies": {
-        "@babel/parser": "^7.23.0",
-        "@vue/shared": "3.3.7",
+        "@babel/parser": "^7.23.6",
+        "@vue/shared": "3.4.15",
+        "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.0.2"
       }
     },
-    "node_modules/@vue/compiler-dom": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.7.tgz",
-      "integrity": "sha512-0LwkyJjnUPssXv/d1vNJ0PKfBlDoQs7n81CbO6Q0zdL7H1EzqYRrTVXDqdBVqro0aJjo/FOa1qBAPVI4PGSHBw==",
-      "dev": true,
-      "dependencies": {
-        "@vue/compiler-core": "3.3.7",
-        "@vue/shared": "3.3.7"
-      }
-    },
-    "node_modules/@vue/compiler-sfc": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.45.tgz",
-      "integrity": "sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q==",
-      "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.45",
-        "@vue/compiler-dom": "3.2.45",
-        "@vue/compiler-ssr": "3.2.45",
-        "@vue/reactivity-transform": "3.2.45",
-        "@vue/shared": "3.2.45",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7",
-        "postcss": "^8.1.10",
-        "source-map": "^0.6.1"
-      }
-    },
-    "node_modules/@vue/compiler-sfc/node_modules/@vue/compiler-core": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.45.tgz",
-      "integrity": "sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==",
-      "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.45",
-        "estree-walker": "^2.0.2",
-        "source-map": "^0.6.1"
-      }
-    },
-    "node_modules/@vue/compiler-sfc/node_modules/@vue/compiler-dom": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz",
-      "integrity": "sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==",
-      "dependencies": {
-        "@vue/compiler-core": "3.2.45",
-        "@vue/shared": "3.2.45"
-      }
-    },
-    "node_modules/@vue/compiler-sfc/node_modules/@vue/shared": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
-      "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
-    },
-    "node_modules/@vue/compiler-sfc/node_modules/magic-string": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
-      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
-      "dependencies": {
-        "sourcemap-codec": "^1.4.8"
-      }
-    },
-    "node_modules/@vue/compiler-sfc/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==",
+    "node_modules/@vue/compiler-core/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/@vue/compiler-ssr": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.45.tgz",
-      "integrity": "sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ==",
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.15.tgz",
+      "integrity": "sha512-wox0aasVV74zoXyblarOM3AZQz/Z+OunYcIHe1OsGclCHt8RsRm04DObjefaI82u6XDzv+qGWZ24tIsRAIi5MQ==",
       "dependencies": {
-        "@vue/compiler-dom": "3.2.45",
-        "@vue/shared": "3.2.45"
+        "@vue/compiler-core": "3.4.15",
+        "@vue/shared": "3.4.15"
       }
     },
-    "node_modules/@vue/compiler-ssr/node_modules/@vue/compiler-core": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.45.tgz",
-      "integrity": "sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==",
-      "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.45",
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.15.tgz",
+      "integrity": "sha512-LCn5M6QpkpFsh3GQvs2mJUOAlBQcCco8D60Bcqmf3O3w5a+KWS5GvYbrrJBkgvL1BDnTp+e8q0lXCLgHhKguBA==",
+      "dependencies": {
+        "@babel/parser": "^7.23.6",
+        "@vue/compiler-core": "3.4.15",
+        "@vue/compiler-dom": "3.4.15",
+        "@vue/compiler-ssr": "3.4.15",
+        "@vue/shared": "3.4.15",
         "estree-walker": "^2.0.2",
-        "source-map": "^0.6.1"
+        "magic-string": "^0.30.5",
+        "postcss": "^8.4.33",
+        "source-map-js": "^1.0.2"
       }
     },
-    "node_modules/@vue/compiler-ssr/node_modules/@vue/compiler-dom": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz",
-      "integrity": "sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==",
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.15.tgz",
+      "integrity": "sha512-1jdeQyiGznr8gjFDadVmOJqZiLNSsMa5ZgqavkPZ8O2wjHv0tVuAEsw5hTdUoUW4232vpBbL/wJhzVW/JwY1Uw==",
       "dependencies": {
-        "@vue/compiler-core": "3.2.45",
-        "@vue/shared": "3.2.45"
-      }
-    },
-    "node_modules/@vue/compiler-ssr/node_modules/@vue/shared": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
-      "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
-    },
-    "node_modules/@vue/compiler-ssr/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==",
-      "engines": {
-        "node": ">=0.10.0"
+        "@vue/compiler-dom": "3.4.15",
+        "@vue/shared": "3.4.15"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -2427,18 +2376,19 @@
       }
     },
     "node_modules/@vue/language-core": {
-      "version": "1.8.19",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.19.tgz",
-      "integrity": "sha512-nt3dodGs97UM6fnxeQBazO50yYCKBK53waFWB3qMbLmR6eL3aUryZgQtZoBe1pye17Wl8fs9HysV3si6xMgndQ==",
+      "version": "1.8.27",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.27.tgz",
+      "integrity": "sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==",
       "dev": true,
       "dependencies": {
-        "@volar/language-core": "~1.10.4",
-        "@volar/source-map": "~1.10.4",
+        "@volar/language-core": "~1.11.1",
+        "@volar/source-map": "~1.11.1",
         "@vue/compiler-dom": "^3.3.0",
-        "@vue/reactivity": "^3.3.0",
         "@vue/shared": "^3.3.0",
+        "computeds": "^0.0.1",
         "minimatch": "^9.0.3",
         "muggle-string": "^0.3.1",
+        "path-browserify": "^1.0.1",
         "vue-template-compiler": "^2.7.14"
       },
       "peerDependencies": {
@@ -2450,15 +2400,6 @@
         }
       }
     },
-    "node_modules/@vue/language-core/node_modules/@vue/reactivity": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.7.tgz",
-      "integrity": "sha512-cZNVjWiw00708WqT0zRpyAgduG79dScKEPYJXq2xj/aMtk3SKvL3FBt2QKUlh6EHBJ1m8RhBY+ikBUzwc7/khg==",
-      "dev": true,
-      "dependencies": {
-        "@vue/shared": "3.3.7"
-      }
-    },
     "node_modules/@vue/language-core/node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -2484,113 +2425,48 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.45.tgz",
-      "integrity": "sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==",
-      "dependencies": {
-        "@vue/shared": "3.2.45"
-      }
-    },
-    "node_modules/@vue/reactivity-transform": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.45.tgz",
-      "integrity": "sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.15.tgz",
+      "integrity": "sha512-55yJh2bsff20K5O84MxSvXKPHHt17I2EomHznvFiJCAZpJTNW8IuLj1xZWMLELRhBK3kkFV/1ErZGHJfah7i7w==",
       "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.45",
-        "@vue/shared": "3.2.45",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7"
-      }
-    },
-    "node_modules/@vue/reactivity-transform/node_modules/@vue/compiler-core": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.45.tgz",
-      "integrity": "sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==",
-      "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.45",
-        "estree-walker": "^2.0.2",
-        "source-map": "^0.6.1"
-      }
-    },
-    "node_modules/@vue/reactivity-transform/node_modules/@vue/shared": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
-      "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
-    },
-    "node_modules/@vue/reactivity-transform/node_modules/magic-string": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
-      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
-      "dependencies": {
-        "sourcemap-codec": "^1.4.8"
-      }
-    },
-    "node_modules/@vue/reactivity-transform/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==",
-      "engines": {
-        "node": ">=0.10.0"
+        "@vue/shared": "3.4.15"
       }
     },
-    "node_modules/@vue/reactivity/node_modules/@vue/shared": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
-      "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
-    },
     "node_modules/@vue/runtime-core": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.45.tgz",
-      "integrity": "sha512-gzJiTA3f74cgARptqzYswmoQx0fIA+gGYBfokYVhF8YSXjWTUA2SngRzZRku2HbGbjzB6LBYSbKGIaK8IW+s0A==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.15.tgz",
+      "integrity": "sha512-6E3by5m6v1AkW0McCeAyhHTw+3y17YCOKG0U0HDKDscV4Hs0kgNT5G+GCHak16jKgcCDHpI9xe5NKb8sdLCLdw==",
       "dependencies": {
-        "@vue/reactivity": "3.2.45",
-        "@vue/shared": "3.2.45"
+        "@vue/reactivity": "3.4.15",
+        "@vue/shared": "3.4.15"
       }
     },
-    "node_modules/@vue/runtime-core/node_modules/@vue/shared": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
-      "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
-    },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.45.tgz",
-      "integrity": "sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.15.tgz",
+      "integrity": "sha512-EVW8D6vfFVq3V/yDKNPBFkZKGMFSvZrUQmx196o/v2tHKdwWdiZjYUBS+0Ez3+ohRyF8Njwy/6FH5gYJ75liUw==",
       "dependencies": {
-        "@vue/runtime-core": "3.2.45",
-        "@vue/shared": "3.2.45",
-        "csstype": "^2.6.8"
+        "@vue/runtime-core": "3.4.15",
+        "@vue/shared": "3.4.15",
+        "csstype": "^3.1.3"
       }
     },
-    "node_modules/@vue/runtime-dom/node_modules/@vue/shared": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
-      "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
-    },
     "node_modules/@vue/server-renderer": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.45.tgz",
-      "integrity": "sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.15.tgz",
+      "integrity": "sha512-3HYzaidu9cHjrT+qGUuDhFYvF/j643bHC6uUN9BgM11DVy+pM6ATsG6uPBLnkwOgs7BpJABReLmpL3ZPAsUaqw==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.2.45",
-        "@vue/shared": "3.2.45"
+        "@vue/compiler-ssr": "3.4.15",
+        "@vue/shared": "3.4.15"
       },
       "peerDependencies": {
-        "vue": "3.2.45"
+        "vue": "3.4.15"
       }
     },
-    "node_modules/@vue/server-renderer/node_modules/@vue/shared": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
-      "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
-    },
     "node_modules/@vue/shared": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.7.tgz",
-      "integrity": "sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg==",
-      "dev": true
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.15.tgz",
+      "integrity": "sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g=="
     },
     "node_modules/@vue/test-utils": {
       "version": "2.3.0",
@@ -2610,41 +2486,6 @@
         "vue": "^3.0.1"
       }
     },
-    "node_modules/@vue/test-utils/node_modules/@vue/compiler-ssr": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.7.tgz",
-      "integrity": "sha512-TxOfNVVeH3zgBc82kcUv+emNHo+vKnlRrkv8YvQU5+Y5LJGJwSNzcmLUoxD/dNzv0bhQ/F0s+InlgV0NrApJZg==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "@vue/compiler-dom": "3.3.7",
-        "@vue/shared": "3.3.7"
-      }
-    },
-    "node_modules/@vue/test-utils/node_modules/@vue/server-renderer": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.7.tgz",
-      "integrity": "sha512-UlpKDInd1hIZiNuVVVvLgxpfnSouxKQOSE2bOfQpBuGwxRV/JqqTCyyjXUWiwtVMyeRaZhOYYqntxElk8FhBhw==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "@vue/compiler-ssr": "3.3.7",
-        "@vue/shared": "3.3.7"
-      },
-      "peerDependencies": {
-        "vue": "3.3.7"
-      }
-    },
-    "node_modules/@vue/typescript": {
-      "version": "1.8.19",
-      "resolved": "https://registry.npmjs.org/@vue/typescript/-/typescript-1.8.19.tgz",
-      "integrity": "sha512-k/SHeeQROUgqsxyHQ8Cs3Zz5TnX57p7BcBDVYR2E0c61QL2DJ2G8CsaBremmNGuGE6o1R5D50IHIxFmroMz8iw==",
-      "dev": true,
-      "dependencies": {
-        "@volar/typescript": "~1.10.4",
-        "@vue/language-core": "1.8.19"
-      }
-    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
@@ -4965,6 +4806,12 @@
       "integrity": "sha512-FemMreK9xNyL8gQevsdRMrvO4lFCkQP7qbuktn1q8ndcNk1+0mz7lgE7b/sNvbhVgY4w6tMN1FDp6aADjqw2rw==",
       "dev": true
     },
+    "node_modules/computeds": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz",
+      "integrity": "sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==",
+      "dev": true
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -5368,9 +5215,9 @@
       }
     },
     "node_modules/csstype": {
-      "version": "2.6.21",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
-      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/data-uri-to-buffer": {
       "version": "4.0.1",
@@ -6419,17 +6266,17 @@
       }
     },
     "node_modules/eslint-plugin-vue": {
-      "version": "9.5.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.5.1.tgz",
-      "integrity": "sha512-Y0sL2RY7Xc9S8kNih9lbwHIDmewUg9bfas6WSzsOWRgDXhIHKxRBZYNAnVcXBFfE+bMWHUA5GLChl7TcTYUI8w==",
+      "version": "9.20.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.20.1.tgz",
+      "integrity": "sha512-GyCs8K3lkEvoyC1VV97GJhP1SvqsKCiWGHnbn0gVUYiUhaH2+nB+Dv1uekv1THFMPbBfYxukrzQdltw950k+LQ==",
       "dev": true,
       "dependencies": {
-        "eslint-utils": "^3.0.0",
+        "@eslint-community/eslint-utils": "^4.4.0",
         "natural-compare": "^1.4.0",
-        "nth-check": "^2.0.1",
-        "postcss-selector-parser": "^6.0.9",
-        "semver": "^7.3.5",
-        "vue-eslint-parser": "^9.0.1",
+        "nth-check": "^2.1.1",
+        "postcss-selector-parser": "^6.0.13",
+        "semver": "^7.5.4",
+        "vue-eslint-parser": "^9.4.0",
         "xml-name-validator": "^4.0.0"
       },
       "engines": {
@@ -8757,7 +8604,6 @@
       "version": "0.30.5",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
       "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       },
@@ -9189,9 +9035,9 @@
       "dev": true
     },
     "node_modules/nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
       "funding": [
         {
           "type": "github",
@@ -9865,9 +9711,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.31",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "version": "8.4.33",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
+      "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
       "funding": [
         {
           "type": "opencollective",
@@ -9883,7 +9729,7 @@
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
@@ -11041,12 +10887,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/sourcemap-codec": {
-      "version": "1.4.8",
-      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
-      "deprecated": "Please use @jridgewell/sourcemap-codec instead"
-    },
     "node_modules/spawn-command": {
       "version": "0.0.2-1",
       "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz",
@@ -11883,7 +11723,7 @@
       "version": "4.8.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz",
       "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -12447,21 +12287,29 @@
       "dev": true
     },
     "node_modules/vue": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.45.tgz",
-      "integrity": "sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.15.tgz",
+      "integrity": "sha512-jC0GH4KkWLWJOEQjOpkqU1bQsBwf4R1rsFtw5GQJbjHVKWDzO6P0nWWBTmjp1xSemAioDFj1jdaK1qa3DnMQoQ==",
       "dependencies": {
-        "@vue/compiler-dom": "3.2.45",
-        "@vue/compiler-sfc": "3.2.45",
-        "@vue/runtime-dom": "3.2.45",
-        "@vue/server-renderer": "3.2.45",
-        "@vue/shared": "3.2.45"
+        "@vue/compiler-dom": "3.4.15",
+        "@vue/compiler-sfc": "3.4.15",
+        "@vue/runtime-dom": "3.4.15",
+        "@vue/server-renderer": "3.4.15",
+        "@vue/shared": "3.4.15"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
     "node_modules/vue-eslint-parser": {
-      "version": "9.3.2",
-      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.2.tgz",
-      "integrity": "sha512-q7tWyCVaV9f8iQyIA5Mkj/S6AoJ9KBN8IeUSf3XEmBrOtxOZnfTg5s4KClbZBCK3GtnT/+RyCLZyDHuZwTuBjg==",
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.0.tgz",
+      "integrity": "sha512-7KsNBb6gHFA75BtneJsoK/dbZ281whUIwFYdQxA68QrCrGMXYzUMbPDHGcOQ0OocIVKrWSKWXZ4mL7tonCXoUw==",
       "dev": true,
       "dependencies": {
         "debug": "^4.3.4",
@@ -12519,9 +12367,9 @@
       }
     },
     "node_modules/vue-template-compiler": {
-      "version": "2.7.15",
-      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.15.tgz",
-      "integrity": "sha512-yQxjxMptBL7UAog00O8sANud99C6wJF+7kgbcwqkvA38vCGF7HWE66w0ZFnS/kX5gSoJr/PQ4/oS3Ne2pW37Og==",
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
+      "integrity": "sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==",
       "dev": true,
       "dependencies": {
         "de-indent": "^1.0.2",
@@ -12529,13 +12377,13 @@
       }
     },
     "node_modules/vue-tsc": {
-      "version": "1.8.19",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.19.tgz",
-      "integrity": "sha512-tacMQLQ0CXAfbhRycCL5sWIy1qujXaIEtP1hIQpzHWOUuICbtTj9gJyFf91PvzG5KCNIkA5Eg7k2Fmgt28l5DQ==",
+      "version": "1.8.27",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.27.tgz",
+      "integrity": "sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==",
       "dev": true,
       "dependencies": {
-        "@vue/language-core": "1.8.19",
-        "@vue/typescript": "1.8.19",
+        "@volar/typescript": "~1.11.1",
+        "@vue/language-core": "1.8.27",
         "semver": "^7.5.4"
       },
       "bin": {
@@ -12545,39 +12393,6 @@
         "typescript": "*"
       }
     },
-    "node_modules/vue/node_modules/@vue/compiler-core": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.45.tgz",
-      "integrity": "sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==",
-      "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.45",
-        "estree-walker": "^2.0.2",
-        "source-map": "^0.6.1"
-      }
-    },
-    "node_modules/vue/node_modules/@vue/compiler-dom": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz",
-      "integrity": "sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==",
-      "dependencies": {
-        "@vue/compiler-core": "3.2.45",
-        "@vue/shared": "3.2.45"
-      }
-    },
-    "node_modules/vue/node_modules/@vue/shared": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
-      "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
-    },
-    "node_modules/vue/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==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/vuedraggable": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
@@ -13135,9 +12950,9 @@
       }
     },
     "@babel/parser": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz",
-      "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw=="
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz",
+      "integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ=="
     },
     "@babel/runtime": {
       "version": "7.23.2",
@@ -13499,6 +13314,15 @@
       "dev": true,
       "optional": true
     },
+    "@eslint-community/eslint-utils": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
+      "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
+      "dev": true,
+      "requires": {
+        "eslint-visitor-keys": "^3.3.0"
+      }
+    },
     "@eslint/eslintrc": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz",
@@ -13689,8 +13513,7 @@
     "@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "@jridgewell/trace-mapping": {
       "version": "0.3.9",
@@ -14426,151 +14249,84 @@
       }
     },
     "@volar/language-core": {
-      "version": "1.10.10",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.10.10.tgz",
-      "integrity": "sha512-nsV1o3AZ5n5jaEAObrS3MWLBWaGwUj/vAsc15FVNIv+DbpizQRISg9wzygsHBr56ELRH8r4K75vkYNMtsSNNWw==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.11.1.tgz",
+      "integrity": "sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==",
       "dev": true,
       "requires": {
-        "@volar/source-map": "1.10.10"
+        "@volar/source-map": "1.11.1"
       }
     },
     "@volar/source-map": {
-      "version": "1.10.10",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.10.10.tgz",
-      "integrity": "sha512-GVKjLnifV4voJ9F0vhP56p4+F3WGf+gXlRtjFZsv6v3WxBTWU3ZVeaRaEHJmWrcv5LXmoYYpk/SC25BKemPRkg==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.11.1.tgz",
+      "integrity": "sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==",
       "dev": true,
       "requires": {
         "muggle-string": "^0.3.1"
       }
     },
     "@volar/typescript": {
-      "version": "1.10.10",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.10.10.tgz",
-      "integrity": "sha512-4a2r5bdUub2m+mYVnLu2wt59fuoYWe7nf0uXtGHU8QQ5LDNfzAR0wK7NgDiQ9rcl2WT3fxT2AA9AylAwFtj50A==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.11.1.tgz",
+      "integrity": "sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==",
       "dev": true,
       "requires": {
-        "@volar/language-core": "1.10.10",
+        "@volar/language-core": "1.11.1",
         "path-browserify": "^1.0.1"
       }
     },
     "@vue/compiler-core": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.7.tgz",
-      "integrity": "sha512-pACdY6YnTNVLXsB86YD8OF9ihwpolzhhtdLVHhBL6do/ykr6kKXNYABRtNMGrsQXpEXXyAdwvWWkuTbs4MFtPQ==",
-      "dev": true,
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.15.tgz",
+      "integrity": "sha512-XcJQVOaxTKCnth1vCxEChteGuwG6wqnUHxAm1DO3gCz0+uXKaJNx8/digSz4dLALCy8n2lKq24jSUs8segoqIw==",
       "requires": {
-        "@babel/parser": "^7.23.0",
-        "@vue/shared": "3.3.7",
+        "@babel/parser": "^7.23.6",
+        "@vue/shared": "3.4.15",
+        "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.0.2"
+      },
+      "dependencies": {
+        "entities": {
+          "version": "4.5.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+          "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
+        }
       }
     },
     "@vue/compiler-dom": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.7.tgz",
-      "integrity": "sha512-0LwkyJjnUPssXv/d1vNJ0PKfBlDoQs7n81CbO6Q0zdL7H1EzqYRrTVXDqdBVqro0aJjo/FOa1qBAPVI4PGSHBw==",
-      "dev": true,
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.15.tgz",
+      "integrity": "sha512-wox0aasVV74zoXyblarOM3AZQz/Z+OunYcIHe1OsGclCHt8RsRm04DObjefaI82u6XDzv+qGWZ24tIsRAIi5MQ==",
       "requires": {
-        "@vue/compiler-core": "3.3.7",
-        "@vue/shared": "3.3.7"
+        "@vue/compiler-core": "3.4.15",
+        "@vue/shared": "3.4.15"
       }
     },
     "@vue/compiler-sfc": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.45.tgz",
-      "integrity": "sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q==",
-      "requires": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.45",
-        "@vue/compiler-dom": "3.2.45",
-        "@vue/compiler-ssr": "3.2.45",
-        "@vue/reactivity-transform": "3.2.45",
-        "@vue/shared": "3.2.45",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.15.tgz",
+      "integrity": "sha512-LCn5M6QpkpFsh3GQvs2mJUOAlBQcCco8D60Bcqmf3O3w5a+KWS5GvYbrrJBkgvL1BDnTp+e8q0lXCLgHhKguBA==",
+      "requires": {
+        "@babel/parser": "^7.23.6",
+        "@vue/compiler-core": "3.4.15",
+        "@vue/compiler-dom": "3.4.15",
+        "@vue/compiler-ssr": "3.4.15",
+        "@vue/shared": "3.4.15",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7",
-        "postcss": "^8.1.10",
-        "source-map": "^0.6.1"
-      },
-      "dependencies": {
-        "@vue/compiler-core": {
-          "version": "3.2.45",
-          "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.45.tgz",
-          "integrity": "sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==",
-          "requires": {
-            "@babel/parser": "^7.16.4",
-            "@vue/shared": "3.2.45",
-            "estree-walker": "^2.0.2",
-            "source-map": "^0.6.1"
-          }
-        },
-        "@vue/compiler-dom": {
-          "version": "3.2.45",
-          "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz",
-          "integrity": "sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==",
-          "requires": {
-            "@vue/compiler-core": "3.2.45",
-            "@vue/shared": "3.2.45"
-          }
-        },
-        "@vue/shared": {
-          "version": "3.2.45",
-          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
-          "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
-        },
-        "magic-string": {
-          "version": "0.25.9",
-          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
-          "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
-          "requires": {
-            "sourcemap-codec": "^1.4.8"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
+        "magic-string": "^0.30.5",
+        "postcss": "^8.4.33",
+        "source-map-js": "^1.0.2"
       }
     },
     "@vue/compiler-ssr": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.45.tgz",
-      "integrity": "sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.15.tgz",
+      "integrity": "sha512-1jdeQyiGznr8gjFDadVmOJqZiLNSsMa5ZgqavkPZ8O2wjHv0tVuAEsw5hTdUoUW4232vpBbL/wJhzVW/JwY1Uw==",
       "requires": {
-        "@vue/compiler-dom": "3.2.45",
-        "@vue/shared": "3.2.45"
-      },
-      "dependencies": {
-        "@vue/compiler-core": {
-          "version": "3.2.45",
-          "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.45.tgz",
-          "integrity": "sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==",
-          "requires": {
-            "@babel/parser": "^7.16.4",
-            "@vue/shared": "3.2.45",
-            "estree-walker": "^2.0.2",
-            "source-map": "^0.6.1"
-          }
-        },
-        "@vue/compiler-dom": {
-          "version": "3.2.45",
-          "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz",
-          "integrity": "sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==",
-          "requires": {
-            "@vue/compiler-core": "3.2.45",
-            "@vue/shared": "3.2.45"
-          }
-        },
-        "@vue/shared": {
-          "version": "3.2.45",
-          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
-          "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
+        "@vue/compiler-dom": "3.4.15",
+        "@vue/shared": "3.4.15"
       }
     },
     "@vue/devtools-api": {
@@ -14611,30 +14367,22 @@
       }
     },
     "@vue/language-core": {
-      "version": "1.8.19",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.19.tgz",
-      "integrity": "sha512-nt3dodGs97UM6fnxeQBazO50yYCKBK53waFWB3qMbLmR6eL3aUryZgQtZoBe1pye17Wl8fs9HysV3si6xMgndQ==",
+      "version": "1.8.27",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.27.tgz",
+      "integrity": "sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==",
       "dev": true,
       "requires": {
-        "@volar/language-core": "~1.10.4",
-        "@volar/source-map": "~1.10.4",
+        "@volar/language-core": "~1.11.1",
+        "@volar/source-map": "~1.11.1",
         "@vue/compiler-dom": "^3.3.0",
-        "@vue/reactivity": "^3.3.0",
         "@vue/shared": "^3.3.0",
+        "computeds": "^0.0.1",
         "minimatch": "^9.0.3",
         "muggle-string": "^0.3.1",
+        "path-browserify": "^1.0.1",
         "vue-template-compiler": "^2.7.14"
       },
       "dependencies": {
-        "@vue/reactivity": {
-          "version": "3.3.7",
-          "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.7.tgz",
-          "integrity": "sha512-cZNVjWiw00708WqT0zRpyAgduG79dScKEPYJXq2xj/aMtk3SKvL3FBt2QKUlh6EHBJ1m8RhBY+ikBUzwc7/khg==",
-          "dev": true,
-          "requires": {
-            "@vue/shared": "3.3.7"
-          }
-        },
         "brace-expansion": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -14656,117 +14404,45 @@
       }
     },
     "@vue/reactivity": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.45.tgz",
-      "integrity": "sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.15.tgz",
+      "integrity": "sha512-55yJh2bsff20K5O84MxSvXKPHHt17I2EomHznvFiJCAZpJTNW8IuLj1xZWMLELRhBK3kkFV/1ErZGHJfah7i7w==",
       "requires": {
-        "@vue/shared": "3.2.45"
-      },
-      "dependencies": {
-        "@vue/shared": {
-          "version": "3.2.45",
-          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
-          "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
-        }
-      }
-    },
-    "@vue/reactivity-transform": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.45.tgz",
-      "integrity": "sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ==",
-      "requires": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.45",
-        "@vue/shared": "3.2.45",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7"
-      },
-      "dependencies": {
-        "@vue/compiler-core": {
-          "version": "3.2.45",
-          "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.45.tgz",
-          "integrity": "sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==",
-          "requires": {
-            "@babel/parser": "^7.16.4",
-            "@vue/shared": "3.2.45",
-            "estree-walker": "^2.0.2",
-            "source-map": "^0.6.1"
-          }
-        },
-        "@vue/shared": {
-          "version": "3.2.45",
-          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
-          "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
-        },
-        "magic-string": {
-          "version": "0.25.9",
-          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
-          "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
-          "requires": {
-            "sourcemap-codec": "^1.4.8"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
+        "@vue/shared": "3.4.15"
       }
     },
     "@vue/runtime-core": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.45.tgz",
-      "integrity": "sha512-gzJiTA3f74cgARptqzYswmoQx0fIA+gGYBfokYVhF8YSXjWTUA2SngRzZRku2HbGbjzB6LBYSbKGIaK8IW+s0A==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.15.tgz",
+      "integrity": "sha512-6E3by5m6v1AkW0McCeAyhHTw+3y17YCOKG0U0HDKDscV4Hs0kgNT5G+GCHak16jKgcCDHpI9xe5NKb8sdLCLdw==",
       "requires": {
-        "@vue/reactivity": "3.2.45",
-        "@vue/shared": "3.2.45"
-      },
-      "dependencies": {
-        "@vue/shared": {
-          "version": "3.2.45",
-          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
-          "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
-        }
+        "@vue/reactivity": "3.4.15",
+        "@vue/shared": "3.4.15"
       }
     },
     "@vue/runtime-dom": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.45.tgz",
-      "integrity": "sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.15.tgz",
+      "integrity": "sha512-EVW8D6vfFVq3V/yDKNPBFkZKGMFSvZrUQmx196o/v2tHKdwWdiZjYUBS+0Ez3+ohRyF8Njwy/6FH5gYJ75liUw==",
       "requires": {
-        "@vue/runtime-core": "3.2.45",
-        "@vue/shared": "3.2.45",
-        "csstype": "^2.6.8"
-      },
-      "dependencies": {
-        "@vue/shared": {
-          "version": "3.2.45",
-          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
-          "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
-        }
+        "@vue/runtime-core": "3.4.15",
+        "@vue/shared": "3.4.15",
+        "csstype": "^3.1.3"
       }
     },
     "@vue/server-renderer": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.45.tgz",
-      "integrity": "sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.15.tgz",
+      "integrity": "sha512-3HYzaidu9cHjrT+qGUuDhFYvF/j643bHC6uUN9BgM11DVy+pM6ATsG6uPBLnkwOgs7BpJABReLmpL3ZPAsUaqw==",
       "requires": {
-        "@vue/compiler-ssr": "3.2.45",
-        "@vue/shared": "3.2.45"
-      },
-      "dependencies": {
-        "@vue/shared": {
-          "version": "3.2.45",
-          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
-          "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
-        }
+        "@vue/compiler-ssr": "3.4.15",
+        "@vue/shared": "3.4.15"
       }
     },
     "@vue/shared": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.7.tgz",
-      "integrity": "sha512-N/tbkINRUDExgcPTBvxNkvHGu504k8lzlNQRITVnm6YjOjwa4r0nnbd4Jb01sNpur5hAllyRJzSK5PvB9PPwRg==",
-      "dev": true
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.15.tgz",
+      "integrity": "sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g=="
     },
     "@vue/test-utils": {
       "version": "2.3.0",
@@ -14777,40 +14453,6 @@
         "@vue/compiler-dom": "^3.0.1",
         "@vue/server-renderer": "^3.0.1",
         "js-beautify": "1.14.6"
-      },
-      "dependencies": {
-        "@vue/compiler-ssr": {
-          "version": "3.3.7",
-          "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.7.tgz",
-          "integrity": "sha512-TxOfNVVeH3zgBc82kcUv+emNHo+vKnlRrkv8YvQU5+Y5LJGJwSNzcmLUoxD/dNzv0bhQ/F0s+InlgV0NrApJZg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@vue/compiler-dom": "3.3.7",
-            "@vue/shared": "3.3.7"
-          }
-        },
-        "@vue/server-renderer": {
-          "version": "3.3.7",
-          "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.7.tgz",
-          "integrity": "sha512-UlpKDInd1hIZiNuVVVvLgxpfnSouxKQOSE2bOfQpBuGwxRV/JqqTCyyjXUWiwtVMyeRaZhOYYqntxElk8FhBhw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@vue/compiler-ssr": "3.3.7",
-            "@vue/shared": "3.3.7"
-          }
-        }
-      }
-    },
-    "@vue/typescript": {
-      "version": "1.8.19",
-      "resolved": "https://registry.npmjs.org/@vue/typescript/-/typescript-1.8.19.tgz",
-      "integrity": "sha512-k/SHeeQROUgqsxyHQ8Cs3Zz5TnX57p7BcBDVYR2E0c61QL2DJ2G8CsaBremmNGuGE6o1R5D50IHIxFmroMz8iw==",
-      "dev": true,
-      "requires": {
-        "@volar/typescript": "~1.10.4",
-        "@vue/language-core": "1.8.19"
       }
     },
     "@webassemblyjs/ast": {
@@ -16812,6 +16454,12 @@
       "integrity": "sha512-FemMreK9xNyL8gQevsdRMrvO4lFCkQP7qbuktn1q8ndcNk1+0mz7lgE7b/sNvbhVgY4w6tMN1FDp6aADjqw2rw==",
       "dev": true
     },
+    "computeds": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz",
+      "integrity": "sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==",
+      "dev": true
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -17145,9 +16793,9 @@
       "dev": true
     },
     "csstype": {
-      "version": "2.6.21",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
-      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "data-uri-to-buffer": {
       "version": "4.0.1",
@@ -18022,17 +17670,17 @@
       }
     },
     "eslint-plugin-vue": {
-      "version": "9.5.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.5.1.tgz",
-      "integrity": "sha512-Y0sL2RY7Xc9S8kNih9lbwHIDmewUg9bfas6WSzsOWRgDXhIHKxRBZYNAnVcXBFfE+bMWHUA5GLChl7TcTYUI8w==",
+      "version": "9.20.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.20.1.tgz",
+      "integrity": "sha512-GyCs8K3lkEvoyC1VV97GJhP1SvqsKCiWGHnbn0gVUYiUhaH2+nB+Dv1uekv1THFMPbBfYxukrzQdltw950k+LQ==",
       "dev": true,
       "requires": {
-        "eslint-utils": "^3.0.0",
+        "@eslint-community/eslint-utils": "^4.4.0",
         "natural-compare": "^1.4.0",
-        "nth-check": "^2.0.1",
-        "postcss-selector-parser": "^6.0.9",
-        "semver": "^7.3.5",
-        "vue-eslint-parser": "^9.0.1",
+        "nth-check": "^2.1.1",
+        "postcss-selector-parser": "^6.0.13",
+        "semver": "^7.5.4",
+        "vue-eslint-parser": "^9.4.0",
         "xml-name-validator": "^4.0.0"
       }
     },
@@ -19721,7 +19369,6 @@
       "version": "0.30.5",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
       "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
-      "dev": true,
       "requires": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       }
@@ -20053,9 +19700,9 @@
       "dev": true
     },
     "nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA=="
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g=="
     },
     "natural-compare": {
       "version": "1.4.0",
@@ -20546,11 +20193,11 @@
       }
     },
     "postcss": {
-      "version": "8.4.31",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
-      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "version": "8.4.33",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
+      "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
       "requires": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       }
@@ -21410,11 +21057,6 @@
         }
       }
     },
-    "sourcemap-codec": {
-      "version": "1.4.8",
-      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
-    },
     "spawn-command": {
       "version": "0.0.2-1",
       "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz",
@@ -22035,7 +21677,7 @@
       "version": "4.8.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz",
       "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
-      "dev": true
+      "devOptional": true
     },
     "uc.micro": {
       "version": "1.0.6",
@@ -22389,53 +22031,21 @@
       "dev": true
     },
     "vue": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.45.tgz",
-      "integrity": "sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA==",
+      "version": "3.4.15",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.15.tgz",
+      "integrity": "sha512-jC0GH4KkWLWJOEQjOpkqU1bQsBwf4R1rsFtw5GQJbjHVKWDzO6P0nWWBTmjp1xSemAioDFj1jdaK1qa3DnMQoQ==",
       "requires": {
-        "@vue/compiler-dom": "3.2.45",
-        "@vue/compiler-sfc": "3.2.45",
-        "@vue/runtime-dom": "3.2.45",
-        "@vue/server-renderer": "3.2.45",
-        "@vue/shared": "3.2.45"
-      },
-      "dependencies": {
-        "@vue/compiler-core": {
-          "version": "3.2.45",
-          "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.45.tgz",
-          "integrity": "sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==",
-          "requires": {
-            "@babel/parser": "^7.16.4",
-            "@vue/shared": "3.2.45",
-            "estree-walker": "^2.0.2",
-            "source-map": "^0.6.1"
-          }
-        },
-        "@vue/compiler-dom": {
-          "version": "3.2.45",
-          "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz",
-          "integrity": "sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==",
-          "requires": {
-            "@vue/compiler-core": "3.2.45",
-            "@vue/shared": "3.2.45"
-          }
-        },
-        "@vue/shared": {
-          "version": "3.2.45",
-          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
-          "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
+        "@vue/compiler-dom": "3.4.15",
+        "@vue/compiler-sfc": "3.4.15",
+        "@vue/runtime-dom": "3.4.15",
+        "@vue/server-renderer": "3.4.15",
+        "@vue/shared": "3.4.15"
       }
     },
     "vue-eslint-parser": {
-      "version": "9.3.2",
-      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.2.tgz",
-      "integrity": "sha512-q7tWyCVaV9f8iQyIA5Mkj/S6AoJ9KBN8IeUSf3XEmBrOtxOZnfTg5s4KClbZBCK3GtnT/+RyCLZyDHuZwTuBjg==",
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.0.tgz",
+      "integrity": "sha512-7KsNBb6gHFA75BtneJsoK/dbZ281whUIwFYdQxA68QrCrGMXYzUMbPDHGcOQ0OocIVKrWSKWXZ4mL7tonCXoUw==",
       "dev": true,
       "requires": {
         "debug": "^4.3.4",
@@ -22474,9 +22084,9 @@
       }
     },
     "vue-template-compiler": {
-      "version": "2.7.15",
-      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.15.tgz",
-      "integrity": "sha512-yQxjxMptBL7UAog00O8sANud99C6wJF+7kgbcwqkvA38vCGF7HWE66w0ZFnS/kX5gSoJr/PQ4/oS3Ne2pW37Og==",
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",
+      "integrity": "sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==",
       "dev": true,
       "requires": {
         "de-indent": "^1.0.2",
@@ -22484,13 +22094,13 @@
       }
     },
     "vue-tsc": {
-      "version": "1.8.19",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.19.tgz",
-      "integrity": "sha512-tacMQLQ0CXAfbhRycCL5sWIy1qujXaIEtP1hIQpzHWOUuICbtTj9gJyFf91PvzG5KCNIkA5Eg7k2Fmgt28l5DQ==",
+      "version": "1.8.27",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.27.tgz",
+      "integrity": "sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==",
       "dev": true,
       "requires": {
-        "@vue/language-core": "1.8.19",
-        "@vue/typescript": "1.8.19",
+        "@volar/typescript": "~1.11.1",
+        "@vue/language-core": "1.8.27",
         "semver": "^7.5.4"
       }
     },
diff --git a/package.json b/package.json
index 66bbff6279..1bd8c28fd8 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
     "systeminformation": "5.21.15",
     "tree-kill": "1.2.2",
     "uuid": "9.0.0",
-    "vue": "3.2.45",
+    "vue": "3.4.15",
     "vue-router": "4.0.8",
     "vuedraggable": "4.1.0",
     "vuex": "4.0.2",
@@ -101,7 +101,7 @@
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-prettier": "3.4.0",
-    "eslint-plugin-vue": "9.5.1",
+    "eslint-plugin-vue": "9.20.1",
     "happy-dom": "8.4.2",
     "license-checker": "25.0.1",
     "markdownlint": "0.31.1",
@@ -122,7 +122,7 @@
     "vite-plugin-node-polyfills": "0.15.0",
     "vite-tsconfig-paths": "4.2.1",
     "vitest": "0.34.6",
-    "vue-tsc": "1.8.19",
+    "vue-tsc": "1.8.27",
     "yargs": "17.2.1"
   },
   "overrides": {
diff --git a/src/components/AudioCell.vue b/src/components/AudioCell.vue
index c710c002c0..9cc86fad3c 100644
--- a/src/components/AudioCell.vue
+++ b/src/components/AudioCell.vue
@@ -112,7 +112,7 @@
 <script setup lang="ts">
 import { computed, watch, ref, nextTick } from "vue";
 import { QInput } from "quasar";
-import CharacterButton from "./CharacterButton.vue";
+import CharacterButton from "./CharacterButton/Container.vue";
 import { MenuItemButton, MenuItemSeparator } from "./MenuBar.vue";
 import ContextMenu from "./ContextMenu.vue";
 import { useStore } from "@/store";
diff --git a/src/components/AudioInfo.vue b/src/components/AudioInfo.vue
index e893e1655f..6bea69ca29 100644
--- a/src/components/AudioInfo.vue
+++ b/src/components/AudioInfo.vue
@@ -301,8 +301,8 @@
 <script setup lang="ts">
 import { computed, ref, watchEffect } from "vue";
 import { QSelectProps } from "quasar";
-import CharacterButton from "./CharacterButton.vue";
 import PresetManageDialog from "./PresetManageDialog.vue";
+import CharacterButton from "./CharacterButton/Container.vue";
 import { useStore } from "@/store";
 
 import {
diff --git a/src/components/CharacterButton.vue b/src/components/CharacterButton.vue
deleted file mode 100644
index 1a011e0567..0000000000
--- a/src/components/CharacterButton.vue
+++ /dev/null
@@ -1,426 +0,0 @@
-<template>
-  <q-btn
-    ref="buttonRef"
-    flat
-    class="q-pa-none character-button"
-    :disable="uiLocked"
-    :class="{ opaque: loading }"
-    aria-haspopup="menu"
-  >
-    <!-- q-imgだとdisableのタイミングで点滅する -->
-    <div class="icon-container">
-      <img
-        v-if="selectedStyleInfo != undefined"
-        class="q-pa-none q-ma-none"
-        :src="selectedStyleInfo.iconPath"
-        :alt="selectedVoiceInfoText"
-      />
-      <q-avatar v-else-if="!emptiable" rounded size="2rem" color="primary"
-        ><span color="text-display-on-primary">?</span></q-avatar
-      >
-    </div>
-    <div v-if="loading" class="loading">
-      <q-spinner color="primary" size="1.6rem" :thickness="7" />
-    </div>
-    <q-menu
-      class="character-menu"
-      transition-show="none"
-      transition-hide="none"
-      :max-height="maxMenuHeight"
-      @before-show="updateMenuHeight"
-    >
-      <q-list style="min-width: max-content" class="character-item-container">
-        <q-item
-          v-if="selectedStyleInfo == undefined && !emptiable"
-          class="warning-item row no-wrap items-center"
-        >
-          <span class="text-warning vertical-middle"
-            >有効なスタイルが選択されていません</span
-          >
-        </q-item>
-        <q-item
-          v-if="characterInfos.length === 0"
-          class="warning-item row no-wrap items-center"
-        >
-          <span class="text-warning vertical-middle"
-            >選択可能なスタイルがありません</span
-          >
-        </q-item>
-        <q-item v-if="emptiable" class="to-unselect-item q-pa-none">
-          <q-btn
-            v-close-popup
-            flat
-            no-caps
-            class="full-width"
-            :class="selectedCharacter == undefined && 'selected-background'"
-            @click="$emit('update:selectedVoice', undefined)"
-          >
-            <span>選択解除</span>
-          </q-btn>
-        </q-item>
-        <q-item
-          v-for="(characterInfo, characterIndex) in characterInfos"
-          :key="characterIndex"
-          class="q-pa-none"
-          :class="isSelectedItem(characterInfo) && 'selected-character-item'"
-        >
-          <q-btn-group flat class="col full-width">
-            <q-btn
-              v-close-popup
-              flat
-              no-caps
-              class="col-grow"
-              @click="onSelectSpeaker(characterInfo.metas.speakerUuid)"
-              @mouseover="reassignSubMenuOpen(-1)"
-              @mouseleave="reassignSubMenuOpen.cancel()"
-            >
-              <q-avatar rounded size="2rem" class="q-mr-md">
-                <q-img
-                  v-if="characterInfo"
-                  no-spinner
-                  no-transition
-                  :ratio="1"
-                  :src="
-                    getDefaultStyle(characterInfo.metas.speakerUuid).iconPath
-                  "
-                />
-                <q-avatar
-                  v-if="showEngineInfo && characterInfo.metas.styles.length < 2"
-                  class="engine-icon"
-                  rounded
-                >
-                  <img
-                    :src="
-                      engineIcons[
-                        getDefaultStyle(characterInfo.metas.speakerUuid)
-                          .engineId
-                      ]
-                    "
-                  />
-                </q-avatar>
-              </q-avatar>
-              <div>{{ characterInfo.metas.speakerName }}</div>
-            </q-btn>
-            <!-- スタイルが2つ以上あるものだけ、スタイル選択ボタンを表示する-->
-            <template v-if="characterInfo.metas.styles.length >= 2">
-              <q-separator vertical />
-
-              <div
-                class="flex items-center q-px-sm q-py-none cursor-pointer"
-                :class="
-                  subMenuOpenFlags[characterIndex] && 'selected-background'
-                "
-                role="application"
-                :aria-label="`${characterInfo.metas.speakerName}のスタイル、マウスオーバーするか、右矢印キーを押してスタイル選択を表示できます`"
-                tabindex="0"
-                @mouseover="reassignSubMenuOpen(characterIndex)"
-                @mouseleave="reassignSubMenuOpen.cancel()"
-                @keyup.right="reassignSubMenuOpen(characterIndex)"
-              >
-                <q-icon name="keyboard_arrow_right" color="grey-6" size="sm" />
-                <q-menu
-                  v-model="subMenuOpenFlags[characterIndex]"
-                  no-parent-event
-                  anchor="top end"
-                  self="top start"
-                  transition-show="none"
-                  transition-hide="none"
-                  class="character-menu"
-                >
-                  <q-list style="min-width: max-content">
-                    <q-item
-                      v-for="(style, styleIndex) in characterInfo.metas.styles"
-                      :key="styleIndex"
-                      v-close-popup
-                      clickable
-                      active-class="selected-style-item"
-                      :active="
-                        selectedVoice != undefined &&
-                        style.styleId === selectedVoice.styleId
-                      "
-                      :aria-pressed="
-                        selectedVoice != undefined &&
-                        style.styleId === selectedVoice.styleId
-                      "
-                      role="button"
-                      @click="
-                        $emit('update:selectedVoice', {
-                          engineId: style.engineId,
-                          speakerId: characterInfo.metas.speakerUuid,
-                          styleId: style.styleId,
-                        })
-                      "
-                    >
-                      <q-avatar rounded size="2rem" class="q-mr-md">
-                        <q-img
-                          no-spinner
-                          no-transition
-                          :ratio="1"
-                          :src="characterInfo.metas.styles[styleIndex].iconPath"
-                        />
-                        <q-avatar
-                          v-if="showEngineInfo"
-                          rounded
-                          class="engine-icon"
-                        >
-                          <img
-                            :src="
-                              engineIcons[
-                                characterInfo.metas.styles[styleIndex].engineId
-                              ]
-                            "
-                          />
-                        </q-avatar>
-                      </q-avatar>
-                      <q-item-section v-if="style.styleName"
-                        >{{ characterInfo.metas.speakerName }}（{{
-                          style.styleName
-                        }}）</q-item-section
-                      >
-                      <q-item-section v-else>{{
-                        characterInfo.metas.speakerName
-                      }}</q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-menu>
-              </div>
-            </template>
-          </q-btn-group>
-        </q-item>
-      </q-list>
-    </q-menu>
-  </q-btn>
-</template>
-
-<script setup lang="ts">
-import { debounce, QBtn } from "quasar";
-import { computed, Ref, ref } from "vue";
-import { base64ImageToUri } from "@/helpers/imageHelper";
-import { useStore } from "@/store";
-import { CharacterInfo, SpeakerId, Voice } from "@/type/preload";
-import { formatCharacterStyleName } from "@/store/utility";
-
-const props = withDefaults(
-  defineProps<{
-    characterInfos: CharacterInfo[];
-    loading?: boolean;
-    selectedVoice: Voice | undefined;
-    showEngineInfo?: boolean;
-    emptiable?: boolean;
-    uiLocked: boolean;
-  }>(),
-  {
-    loading: false,
-    showEngineInfo: false,
-    emptiable: false,
-  }
-);
-
-const emit = defineEmits({
-  "update:selectedVoice": (selectedVoice: Voice | undefined) => {
-    return (
-      selectedVoice == undefined ||
-      (typeof selectedVoice.engineId === "string" &&
-        typeof selectedVoice.speakerId === "string" &&
-        typeof selectedVoice.styleId === "number")
-    );
-  },
-});
-
-const store = useStore();
-
-const selectedCharacter = computed(() => {
-  const selectedVoice = props.selectedVoice;
-  if (selectedVoice == undefined) return undefined;
-  const character = props.characterInfos.find(
-    (characterInfo) =>
-      characterInfo.metas.speakerUuid === selectedVoice?.speakerId &&
-      characterInfo.metas.styles.some(
-        (style) =>
-          style.engineId === selectedVoice.engineId &&
-          style.styleId === selectedVoice.styleId
-      )
-  );
-  return character;
-});
-
-const selectedVoiceInfoText = computed(() => {
-  if (!selectedCharacter.value) {
-    return "キャラクター未選択";
-  }
-
-  const speakerName = selectedCharacter.value.metas.speakerName;
-  if (!selectedStyleInfo.value) {
-    return speakerName;
-  }
-
-  const styleName = selectedStyleInfo.value.styleName;
-  return formatCharacterStyleName(speakerName, styleName);
-});
-
-const isSelectedItem = (characterInfo: CharacterInfo) =>
-  selectedCharacter.value != undefined &&
-  characterInfo.metas.speakerUuid ===
-    selectedCharacter.value?.metas.speakerUuid;
-
-const selectedStyleInfo = computed(() => {
-  const selectedVoice = props.selectedVoice;
-  const style = selectedCharacter.value?.metas.styles.find(
-    (style) =>
-      style.engineId === selectedVoice?.engineId &&
-      style.styleId === selectedVoice.styleId
-  );
-  return style;
-});
-
-const engineIcons = computed(() =>
-  Object.fromEntries(
-    store.state.engineIds.map((engineId) => [
-      engineId,
-      base64ImageToUri(store.state.engineManifests[engineId].icon),
-    ])
-  )
-);
-
-const getDefaultStyle = (speakerUuid: SpeakerId) => {
-  // FIXME: 同一キャラが複数エンジンにまたがっているとき、順番が先のエンジンが必ず選択される
-  const characterInfo = props.characterInfos.find(
-    (info) => info.metas.speakerUuid === speakerUuid
-  );
-  const defaultStyleId = store.state.defaultStyleIds.find(
-    (x) => x.speakerUuid === speakerUuid
-  )?.defaultStyleId;
-
-  const defaultStyle =
-    characterInfo?.metas.styles.find(
-      (style) => style.styleId === defaultStyleId
-    ) ?? characterInfo?.metas.styles[0]; // デフォルトのスタイルIDが見つからない場合stylesの先頭を選択する
-
-  if (defaultStyle == undefined) throw new Error("defaultStyle == undefined");
-
-  return defaultStyle;
-};
-
-const onSelectSpeaker = (speakerUuid: SpeakerId) => {
-  const style = getDefaultStyle(speakerUuid);
-  emit("update:selectedVoice", {
-    engineId: style.engineId,
-    speakerId: speakerUuid,
-    styleId: style.styleId,
-  });
-};
-
-const subMenuOpenFlags = ref(
-  [...Array(props.characterInfos.length)].map(() => false)
-);
-
-const reassignSubMenuOpen = debounce((idx: number) => {
-  if (subMenuOpenFlags.value[idx]) return;
-  const arr = [...Array(props.characterInfos.length)].map(() => false);
-  arr[idx] = true;
-  subMenuOpenFlags.value = arr;
-}, 100);
-
-// 高さを制限してメニューが下方向に展開されるようにする
-const buttonRef: Ref<InstanceType<typeof QBtn> | undefined> = ref();
-const heightLimit = "65vh"; // QMenuのデフォルト値
-const maxMenuHeight = ref(heightLimit);
-const updateMenuHeight = () => {
-  if (buttonRef.value == undefined)
-    throw new Error("buttonRef.value == undefined");
-  const el = buttonRef.value.$el;
-  if (!(el instanceof Element)) throw new Error("!(el instanceof Element)");
-  const buttonRect = el.getBoundingClientRect();
-  // QMenuは展開する方向のスペースが不足している場合、自動的に展開方向を変更してしまうためmax-heightで制限する。
-  // AudioDetailよりボタンが下に来ることはないのでその最低高185pxに余裕を持たせた170pxを最小の高さにする。
-  // pxで指定するとウインドウサイズ変更に追従できないので ウインドウの高さの96% - ボタンの下端の座標 でメニューの高さを決定する。
-  maxMenuHeight.value = `max(170px, min(${heightLimit}, calc(96vh - ${buttonRect.bottom}px)))`;
-};
-</script>
-
-<style scoped lang="scss">
-@use '@/styles/colors' as colors;
-
-.character-button {
-  border: solid 1px;
-  border-color: colors.$primary;
-  font-size: 0;
-  height: fit-content;
-
-  background: colors.$background;
-
-  .icon-container {
-    height: 2rem;
-    width: 2rem;
-
-    img {
-      max-height: 100%;
-      max-width: 100%;
-      object-fit: scale-down;
-    }
-  }
-
-  .loading {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
-    background-color: rgba(colors.$background-rgb, 0.74);
-    display: grid;
-    justify-content: center;
-    align-content: center;
-
-    svg {
-      filter: drop-shadow(0 0 1px colors.$background);
-    }
-  }
-}
-
-.opaque {
-  opacity: 1 !important;
-}
-
-.character-menu {
-  .character-item-container {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .q-item {
-    color: colors.$display;
-  }
-
-  .q-btn-group {
-    > .q-btn:first-child > :deep(.q-btn__content) {
-      justify-content: flex-start;
-    }
-
-    > div:last-child:hover {
-      background-color: rgba(colors.$primary-rgb, 0.1);
-    }
-  }
-
-  .warning-item {
-    order: -3;
-  }
-  .to-unselect-item {
-    order: -2;
-  }
-
-  .selected-character-item,
-  .selected-style-item,
-  .selected-background {
-    background-color: rgba(colors.$primary-rgb, 0.2);
-  }
-
-  .engine-icon {
-    position: absolute;
-    width: 13px;
-    height: 13px;
-    bottom: -6px;
-    right: -6px;
-  }
-}
-</style>
diff --git a/src/components/CharacterButton/CharacterTree.vue b/src/components/CharacterButton/CharacterTree.vue
new file mode 100644
index 0000000000..987b0e0ef8
--- /dev/null
+++ b/src/components/CharacterButton/CharacterTree.vue
@@ -0,0 +1,140 @@
+<template>
+  <q-menu
+    :model-value="isRoot ? undefined : isOpen"
+    :no-parent-event="!isRoot"
+    :anchor="isRoot ? 'top start' : 'top end'"
+    :self="isRoot ? 'bottom start' : 'top start'"
+    class="character-menu"
+    transition-show="none"
+    transition-hide="none"
+    @before-show="reassignSubMenuOpenBase(-1)"
+  >
+    <q-item
+      v-for="(item, index) in props.items"
+      :key="item.id"
+      class="q-pa-none"
+      :class="item.highlight && 'selected-item'"
+    >
+      <q-btn-group flat class="col full-width">
+        <q-btn
+          v-close-popup
+          flat
+          no-caps
+          class="col-grow"
+          @click="onSelect(item.id)"
+          @mouseover="reassignSubMenuOpen(-1)"
+          @mouseleave="reassignSubMenuOpen.cancel()"
+        >
+          <q-avatar rounded size="2rem" class="q-mr-md">
+            <q-img no-spinner no-transition :ratio="1" :src="item.icon" />
+            <q-avatar v-if="item.subIcon" class="sub-icon" rounded>
+              <img :src="item.subIcon" />
+            </q-avatar>
+          </q-avatar>
+          <div>{{ item.label }}</div>
+        </q-btn>
+        <template v-if="item.items && item.items.length > 0">
+          <q-separator vertical />
+
+          <div
+            class="flex items-center q-px-sm q-py-none cursor-pointer"
+            :class="item.highlight && 'highlight'"
+            role="application"
+            :aria-label="item.treeAlt"
+            tabindex="0"
+            @mouseover="reassignSubMenuOpen(index)"
+            @mouseleave="reassignSubMenuOpen.cancel()"
+            @keyup.right="reassignSubMenuOpen(index)"
+          >
+            <q-icon name="keyboard_arrow_right" color="grey-6" size="sm" />
+            <character-tree
+              v-model="subMenuOpenFlags[index]"
+              :items="item.items"
+              @select="onChildSelect([item.id, ...$event])"
+            />
+          </div>
+        </template>
+      </q-btn-group>
+    </q-item>
+  </q-menu>
+</template>
+
+<script setup lang="ts">
+import { debounce, QBtn } from "quasar";
+import { ref } from "vue";
+
+export type ButtonData = {
+  id: string;
+  icon: string;
+  subIcon?: string | undefined;
+  label: string;
+  treeAlt: string;
+  highlight?: boolean;
+  items?: ButtonData[];
+};
+
+const props =
+  defineProps<{
+    items: ButtonData[];
+    isRoot?: boolean;
+  }>();
+const emit =
+  defineEmits<{
+    (event: "select", id: string[]): void;
+  }>();
+
+const isOpen = defineModel<boolean | undefined>(undefined);
+
+const onSelect = (id: string) => {
+  emit("select", [id]);
+};
+const onChildSelect = (id: string[]) => {
+  emit("select", id);
+};
+
+const subMenuOpenFlags = ref([...Array(props.items.length)].map(() => false));
+
+const reassignSubMenuOpenBase = (idx: number) => {
+  if (subMenuOpenFlags.value[idx]) return;
+  const arr = [...Array(props.items.length)].map(() => false);
+  arr[idx] = true;
+  subMenuOpenFlags.value = arr;
+};
+const reassignSubMenuOpen = debounce(reassignSubMenuOpenBase, 100);
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/colors' as colors;
+.character-menu {
+  .character-item-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .q-item {
+    color: colors.$display;
+  }
+
+  .q-btn-group {
+    > .q-btn:first-child > :deep(.q-btn__content) {
+      justify-content: flex-start;
+    }
+
+    > div:last-child:hover {
+      background-color: rgba(colors.$primary-rgb, 0.1);
+    }
+  }
+
+  .highlight {
+    background-color: rgba(colors.$primary-rgb, 0.2);
+  }
+
+  .sub-icon {
+    position: absolute;
+    width: 13px;
+    height: 13px;
+    bottom: -6px;
+    right: -6px;
+  }
+}
+</style>
diff --git a/src/components/CharacterButton/Container.vue b/src/components/CharacterButton/Container.vue
new file mode 100644
index 0000000000..c564633a5a
--- /dev/null
+++ b/src/components/CharacterButton/Container.vue
@@ -0,0 +1,76 @@
+<template>
+  <presentation
+    :loading
+    :character-infos="props.characterInfos"
+    :selected-voice="props.selectedVoice"
+    :show-engine-info="props.showEngineInfo"
+    :emptiable
+    :ui-locked="props.uiLocked"
+    :engine-icons="engineIcons"
+    :default-style-ids="defaultStyleIds"
+    @select="emit('update:selectedVoice', $event)"
+  />
+</template>
+<script lang="ts">
+export default {
+  name: "CharacterButton",
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import Presentation from "./Presentation.vue";
+import { base64ImageToUri } from "@/helpers/imageHelper";
+import { useStore } from "@/store";
+import { CharacterInfo, Voice } from "@/type/preload";
+
+const props = withDefaults(
+  defineProps<{
+    characterInfos: CharacterInfo[];
+    loading?: boolean;
+    selectedVoice: Voice | undefined;
+    showEngineInfo?: boolean;
+    emptiable?: boolean;
+    uiLocked: boolean;
+  }>(),
+  {
+    loading: false,
+    showEngineInfo: false,
+    emptiable: false,
+  }
+);
+
+const emit = defineEmits({
+  "update:selectedVoice": (selectedVoice: Voice | undefined) => {
+    return (
+      selectedVoice == undefined ||
+      (typeof selectedVoice.engineId === "string" &&
+        typeof selectedVoice.speakerId === "string" &&
+        typeof selectedVoice.styleId === "number")
+    );
+  },
+});
+
+const store = useStore();
+
+const defaultStyleIds = computed(() =>
+  Object.fromEntries(
+    store.state.defaultStyleIds.map((defaultStyleId) => [
+      defaultStyleId.speakerUuid,
+      {
+        engineId: defaultStyleId.engineId,
+        styleId: defaultStyleId.defaultStyleId,
+      },
+    ])
+  )
+);
+
+const engineIcons = computed(() =>
+  Object.fromEntries(
+    store.state.engineIds.map((engineId) => [
+      engineId,
+      base64ImageToUri(store.state.engineManifests[engineId].icon),
+    ])
+  )
+);
+</script>
diff --git a/src/components/CharacterButton/Presentation.vue b/src/components/CharacterButton/Presentation.vue
new file mode 100644
index 0000000000..16834d65dc
--- /dev/null
+++ b/src/components/CharacterButton/Presentation.vue
@@ -0,0 +1,253 @@
+<template>
+  <q-btn
+    ref="buttonRef"
+    flat
+    class="q-pa-none character-button"
+    :disable="uiLocked"
+    :class="{ opaque: loading }"
+    aria-haspopup="menu"
+  >
+    <!-- q-imgだとdisableのタイミングで点滅する -->
+    <div class="icon-container">
+      <img
+        v-if="selectedStyleInfo != undefined"
+        class="q-pa-none q-ma-none"
+        :src="selectedStyleInfo.iconPath"
+        :alt="selectedVoiceInfoText"
+      />
+      <q-avatar v-else-if="!emptiable" rounded size="2rem" color="primary"
+        ><span color="text-display-on-primary">?</span></q-avatar
+      >
+    </div>
+    <div v-if="loading" class="loading">
+      <q-spinner color="primary" size="1.6rem" :thickness="7" />
+    </div>
+    <character-tree
+      :items="characterTreeItems"
+      is-root
+      :max-height="maxMenuHeight"
+      @select="onSelect"
+      @before-show="updateMenuHeight"
+    />
+  </q-btn>
+</template>
+
+<script setup lang="ts">
+import { QBtn } from "quasar";
+import { computed, ref, Ref } from "vue";
+import CharacterTree, { ButtonData } from "./CharacterTree.vue";
+import {
+  CharacterInfo,
+  EngineId,
+  SpeakerId,
+  StyleId,
+  Voice,
+} from "@/type/preload";
+import { formatCharacterStyleName } from "@/store/utility";
+
+const props = withDefaults(
+  defineProps<{
+    characterInfos: CharacterInfo[];
+    loading?: boolean;
+    selectedVoice: Voice | undefined;
+    showEngineInfo?: boolean;
+    emptiable?: boolean;
+    uiLocked: boolean;
+    engineIcons: Record<EngineId, string>;
+    defaultStyleIds: Record<
+      SpeakerId,
+      {
+        engineId: EngineId;
+        styleId: number;
+      }
+    >;
+  }>(),
+  {
+    loading: false,
+    showEngineInfo: false,
+    emptiable: false,
+  }
+);
+
+const emit =
+  defineEmits<{
+    (event: "select", value: Voice): void;
+  }>();
+
+const onSelect = (id: string[]) => {
+  const speakerId = SpeakerId(id[0]);
+  const engineId = EngineId(id[1].split(":")[0]);
+  const styleId = StyleId(parseInt(id[1].split(":")[1]));
+
+  const selectedVoice: Voice = {
+    speakerId,
+    engineId,
+    styleId,
+  };
+
+  emit("select", selectedVoice);
+};
+
+const selectedCharacter = computed(() => {
+  const selectedVoice = props.selectedVoice;
+  if (selectedVoice == undefined) return undefined;
+  const character = props.characterInfos.find(
+    (characterInfo) =>
+      characterInfo.metas.speakerUuid === selectedVoice?.speakerId &&
+      characterInfo.metas.styles.some(
+        (style) =>
+          style.engineId === selectedVoice.engineId &&
+          style.styleId === selectedVoice.styleId
+      )
+  );
+  return character;
+});
+
+const selectedVoiceInfoText = computed(() => {
+  if (!selectedCharacter.value) {
+    return "キャラクター未選択";
+  }
+
+  const speakerName = selectedCharacter.value.metas.speakerName;
+  if (!selectedStyleInfo.value) {
+    return speakerName;
+  }
+
+  const styleName = selectedStyleInfo.value.styleName;
+  return formatCharacterStyleName(speakerName, styleName);
+});
+
+const isSelectedItem = (characterInfo: CharacterInfo) =>
+  selectedCharacter.value != undefined &&
+  characterInfo.metas.speakerUuid ===
+    selectedCharacter.value?.metas.speakerUuid;
+
+const selectedStyleInfo = computed(() => {
+  const selectedVoice = props.selectedVoice;
+  const style = selectedCharacter.value?.metas.styles.find(
+    (style) =>
+      style.engineId === selectedVoice?.engineId &&
+      style.styleId === selectedVoice.styleId
+  );
+  return style;
+});
+
+const getDefaultStyle = (speakerUuid: SpeakerId) => {
+  // FIXME: 同一キャラが複数エンジンにまたがっているとき、順番が先のエンジンが必ず選択される
+  const characterInfo = props.characterInfos.find(
+    (info) => info.metas.speakerUuid === speakerUuid
+  );
+  const defaultStyleId = props.defaultStyleIds[speakerUuid];
+
+  const defaultStyle =
+    characterInfo?.metas.styles.find(
+      (style) =>
+        style.engineId === defaultStyleId.engineId &&
+        style.styleId === defaultStyleId.styleId
+    ) ?? characterInfo?.metas.styles[0]; // デフォルトのスタイルIDが見つからない場合stylesの先頭を選択する
+
+  if (defaultStyle == undefined) throw new Error("defaultStyle == undefined");
+
+  return defaultStyle;
+};
+
+const characterTreeItems = computed<ButtonData[]>(() =>
+  props.characterInfos.map((characterInfo) => {
+    const styles: ButtonData[] = characterInfo.metas.styles.map((style) => ({
+      id: `${style.engineId}:${style.styleId}`,
+      label: formatCharacterStyleName(
+        characterInfo.metas.speakerName,
+        style.styleName
+      ),
+      icon: style.iconPath,
+      subIcon: props.engineIcons[style.engineId],
+      treeAlt: `${characterInfo.metas.speakerName}の${style.styleName}スタイル`,
+      selected:
+        selectedCharacter.value != undefined &&
+        selectedCharacter.value.metas.speakerUuid ===
+          characterInfo.metas.speakerUuid &&
+        selectedStyleInfo.value != undefined &&
+        selectedStyleInfo.value.engineId === style.engineId &&
+        selectedStyleInfo.value.styleId === style.styleId,
+    }));
+
+    return {
+      id: characterInfo.metas.speakerUuid,
+      label: characterInfo.metas.speakerName,
+      icon:
+        characterInfo.metas.styles.find(
+          (style) =>
+            style.styleId ===
+            props.defaultStyleIds[characterInfo.metas.speakerUuid].styleId
+        )?.iconPath || "",
+      subIcon:
+        props.engineIcons[
+          getDefaultStyle(characterInfo.metas.speakerUuid).engineId
+        ],
+      treeAlt: `${characterInfo.metas.speakerName}のスタイル、マウスオーバーするか、右矢印キーを押してスタイル選択を表示できます`,
+      selected: isSelectedItem(characterInfo),
+      items: styles.length > 1 ? styles : [],
+    };
+  })
+);
+// 高さを制限してメニューが下方向に展開されるようにする
+const buttonRef: Ref<InstanceType<typeof QBtn> | undefined> = ref();
+const heightLimit = "65vh"; // QMenuのデフォルト値
+const maxMenuHeight = ref(heightLimit);
+const updateMenuHeight = () => {
+  if (buttonRef.value == undefined)
+    throw new Error("buttonRef.value == undefined");
+  const el = buttonRef.value.$el;
+  if (!(el instanceof Element)) throw new Error("!(el instanceof Element)");
+  const buttonRect = el.getBoundingClientRect();
+  // QMenuは展開する方向のスペースが不足している場合、自動的に展開方向を変更してしまうためmax-heightで制限する。
+  // AudioDetailよりボタンが下に来ることはないのでその最低高185pxに余裕を持たせた170pxを最小の高さにする。
+  // pxで指定するとウインドウサイズ変更に追従できないので ウインドウの高さの96% - ボタンの下端の座標 でメニューの高さを決定する。
+  maxMenuHeight.value = `max(170px, min(${heightLimit}, calc(96vh - ${buttonRect.bottom}px)))`;
+};
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/colors' as colors;
+
+.character-button {
+  border: solid 1px;
+  border-color: colors.$primary;
+  font-size: 0;
+  height: fit-content;
+
+  background: colors.$background;
+
+  .icon-container {
+    height: 2rem;
+    width: 2rem;
+
+    img {
+      max-height: 100%;
+      max-width: 100%;
+      object-fit: scale-down;
+    }
+  }
+
+  .loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    background-color: rgba(colors.$background-rgb, 0.74);
+    display: grid;
+    justify-content: center;
+    align-content: center;
+
+    svg {
+      filter: drop-shadow(0 0 1px colors.$background);
+    }
+  }
+}
+
+.opaque {
+  opacity: 1 !important;
+}
+</style>