diff --git a/CHANGELOG.md b/CHANGELOG.md
index 65e3851f2..d507913d6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,12 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 
 ## [Unreleased]
 
+## [0.10.0] - 2022-09-12
+### Change
+- (internal) Use Composition API in the components
+- Update dependencies
+- Enable streaming-upload as possible by default if available because Chrome Stable 105 can streaming-upload when using separate Chrome profiles
+
 ## [0.9.0] - 2022-08-30
 ### Change
 - Force disable streaming-upload because Chrome Stable 105.0.5195.52 causes an error "Failed to load resource: net::ERR_FAILED", which will be enabled again after Chrome fixed
@@ -394,7 +400,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 ### Added
 - First release
 
-[Unreleased]: https://github.com/nwtgck/piping-ui-web/compare/v0.9.0...HEAD
+[Unreleased]: https://github.com/nwtgck/piping-ui-web/compare/v0.10.0...HEAD
+[0.10.0]: https://github.com/nwtgck/piping-ui-web/compare/v0.9.0...v0.10.0
 [0.9.0]: https://github.com/nwtgck/piping-ui-web/compare/v0.8.0...v0.9.0
 [0.8.0]: https://github.com/nwtgck/piping-ui-web/compare/v0.7.3...v0.8.0
 [0.7.3]: https://github.com/nwtgck/piping-ui-web/compare/v0.7.2...v0.7.3
diff --git a/package-lock.json b/package-lock.json
index 76782a8f8..95ab382d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "piping-ui",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "piping-ui",
-      "version": "0.8.1-SNAPSHOT",
+      "version": "0.10.0",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -16,12 +16,12 @@
         "@mattiasbuelens/web-streams-adapter": "^0.1.0",
         "binconv": "^0.2.0",
         "clipboard-copy": "^4.0.1",
-        "core-js": "^3.25.0",
+        "core-js": "^3.25.1",
         "file-saver": "^2.0.5",
         "file-type": "^16.5.3",
         "filepond": "^4.30.4",
-        "fp-ts": "^2.12.2",
-        "io-ts": "^2.2.17",
+        "fp-ts": "^2.12.3",
+        "io-ts": "^2.2.18",
         "jszip": "^3.10.1",
         "jwk-thumbprint": "^0.1.4",
         "linkifyjs": "^3.0.5",
@@ -30,7 +30,7 @@
         "sanitize-html": "^2.7.1",
         "smoothscroll-polyfill": "^0.4.4",
         "url-join": "^4.0.1",
-        "vue": "^2.7.7",
+        "vue": "^2.7.10",
         "vue-async-computed": "^3.9.0",
         "vue-async-computed-decorator": "0.0.5",
         "vue-class-component": "^7.2.6",
@@ -45,7 +45,7 @@
         "@types/file-saver": "^2.0.5",
         "@types/mocha": "^8.2.3",
         "@types/openpgp": "^4.4.18",
-        "@types/react": "^18.0.17",
+        "@types/react": "^18.0.19",
         "@types/react-dom": "^18.0.6",
         "@types/sanitize-html": "^2.6.2",
         "@types/smoothscroll-polyfill": "^0.3.1",
@@ -61,7 +61,7 @@
         "@vue/test-utils": "^1.3.0",
         "babel-eslint": "^10.1.0",
         "chai": "^4.3.6",
-        "concurrently": "^7.3.0",
+        "concurrently": "^7.4.0",
         "copyfiles": "^2.4.1",
         "cross-var": "^1.1.0",
         "eslint": "^6.8.0",
@@ -72,7 +72,7 @@
         "react-dom": "^18.2.0",
         "sass": "~1.32.0",
         "sass-loader": "^10.3.1",
-        "typescript": "^4.8.2",
+        "typescript": "^4.8.3",
         "vue-cli-plugin-vuetify": "^2.5.5",
         "vuetify-loader": "^1.9.2",
         "watch-build-serve": "git+https://github.com/nwtgck/watch-build-serve-node.git#afc757410b3339e1603916ab98b8e5760569dbaa",
@@ -2340,9 +2340,9 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "18.0.17",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.17.tgz",
-      "integrity": "sha512-38ETy4tL+rn4uQQi7mB81G7V1g0u2ryquNmsVIOKUAEIDK+3CUjZ6rSRpdvS99dNBnkLFL83qfmtLacGOTIhwQ==",
+      "version": "18.0.19",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.19.tgz",
+      "integrity": "sha512-BDc3Q+4Q3zsn7k9xZrKfjWyJsSlEDMs38gD1qp2eDazLCdcPqAT+vq1ND+Z8AGel/UiwzNUk8ptpywgNQcJ1MQ==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
@@ -6763,13 +6763,13 @@
       }
     },
     "node_modules/concurrently": {
-      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-7.3.0.tgz",
-      "integrity": "sha512-IiDwm+8DOcFEInca494A8V402tNTQlJaYq78RF2rijOrKEk/AOHTxhN4U1cp7GYKYX5Q6Ymh1dLTBlzIMN0ikA==",
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-7.4.0.tgz",
+      "integrity": "sha512-M6AfrueDt/GEna/Vg9BqQ+93yuvzkSKmoTixnwEJkH0LlcGrRC2eCmjeG1tLLHIYfpYJABokqSGyMcXjm96AFA==",
       "dev": true,
       "dependencies": {
         "chalk": "^4.1.0",
-        "date-fns": "^2.16.1",
+        "date-fns": "^2.29.1",
         "lodash": "^4.17.21",
         "rxjs": "^7.0.0",
         "shell-quote": "^1.7.3",
@@ -6779,10 +6779,14 @@
         "yargs": "^17.3.1"
       },
       "bin": {
+        "conc": "dist/bin/concurrently.js",
         "concurrently": "dist/bin/concurrently.js"
       },
       "engines": {
         "node": "^12.20.0 || ^14.13.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
       }
     },
     "node_modules/concurrently/node_modules/ansi-styles": {
@@ -7334,9 +7338,9 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.25.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.25.0.tgz",
-      "integrity": "sha512-CVU1xvJEfJGhyCpBrzzzU1kjCfgsGUxhEvwUV2e/cOedYWHdmluamx+knDnmhqALddMG16fZvIqvs9aijsHHaA==",
+      "version": "3.25.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.25.1.tgz",
+      "integrity": "sha512-sr0FY4lnO1hkQ4gLDr24K0DGnweGO1QwSj5BpfQjpSJPdqWalja4cTps29Y/PJVG/P7FYlPDkH3hO+Tr0CvDgQ==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -10605,9 +10609,9 @@
       }
     },
     "node_modules/fp-ts": {
-      "version": "2.12.2",
-      "resolved": "https://registry.npmjs.org/fp-ts/-/fp-ts-2.12.2.tgz",
-      "integrity": "sha512-v8J7ud+nTkP5Zz17GhpCsY19wiRbB9miuj61nBcCJyDpu52zs9Z4O7OLDfYoKFQMJ9EsSZA7W1vRgC1d3jy5qw=="
+      "version": "2.12.3",
+      "resolved": "https://registry.npmjs.org/fp-ts/-/fp-ts-2.12.3.tgz",
+      "integrity": "sha512-8m0XvW8kZbfnJOA4NvSVXu95mLbPf4LQGwQyqVukIYS4KzSNJiyKSmuZUmbVHteUi6MGkAJGPb0goPZqI+Tsqg=="
     },
     "node_modules/fragment-cache": {
       "version": "0.2.1",
@@ -11952,9 +11956,9 @@
       }
     },
     "node_modules/io-ts": {
-      "version": "2.2.17",
-      "resolved": "https://registry.npmjs.org/io-ts/-/io-ts-2.2.17.tgz",
-      "integrity": "sha512-RkQY06h6rRyADVEI46OCAUYTP2p18Vdtz9Movi19Mmj7SJ1NhN/yGyW7CxlcBVxh95WKg2YSbTmcUPqqeLuhXw==",
+      "version": "2.2.18",
+      "resolved": "https://registry.npmjs.org/io-ts/-/io-ts-2.2.18.tgz",
+      "integrity": "sha512-3JxUUzRtPQPs5sOwB7pW0+Xb54nOzqA6M1sRB1hwgsRmkWMeGTjtOrCynGTJhIj+mBLUj2S37DAq2+BrPh9kTQ==",
       "peerDependencies": {
         "fp-ts": "^2.5.0"
       }
@@ -19511,9 +19515,9 @@
       "dev": true
     },
     "node_modules/typescript": {
-      "version": "4.8.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.2.tgz",
-      "integrity": "sha512-C0I1UsrrDHo2fYI5oaCGbSejwX4ch+9Y5jTQELvovfmFkK3HHSZJB8MSJcWLmCUBzQBchCrZ9rMRV6GuNrvGtw==",
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz",
+      "integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -20007,11 +20011,11 @@
       "dev": true
     },
     "node_modules/vue": {
-      "version": "2.7.7",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.7.tgz",
-      "integrity": "sha512-osfkncsGCWqtch+YWYxbqTNQ9hl/UQ6TFRkdmK/VqAjuMpxzr5QotFsYpmJ1AB1ez2LJeIKXDmtMkXUotMOTsA==",
+      "version": "2.7.10",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.10.tgz",
+      "integrity": "sha512-HmFC70qarSHPXcKtW8U8fgIkF6JGvjEmDiVInTkKZP0gIlEPhlVlcJJLkdGIDiNkIeA2zJPQTWJUI4iWe+AVfg==",
       "dependencies": {
-        "@vue/compiler-sfc": "2.7.7",
+        "@vue/compiler-sfc": "2.7.10",
         "csstype": "^3.1.0"
       }
     },
@@ -20250,9 +20254,9 @@
       "dev": true
     },
     "node_modules/vue/node_modules/@vue/compiler-sfc": {
-      "version": "2.7.7",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.7.tgz",
-      "integrity": "sha512-Ah8dIuo6ZVPHTq9+s4rBU/YpJu3vGSNyeOTCrPrVPQnkUfnT5Ig+IKBhePuQWFXguYb2TuEWrEfiiX9DZ3aJlA==",
+      "version": "2.7.10",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.10.tgz",
+      "integrity": "sha512-55Shns6WPxlYsz4WX7q9ZJBL77sKE1ZAYNYStLs6GbhIOMrNtjMvzcob6gu3cGlfpCR4bT7NXgyJ3tly2+Hx8Q==",
       "dependencies": {
         "@babel/parser": "^7.18.4",
         "postcss": "^8.4.14",
@@ -20265,9 +20269,9 @@
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "node_modules/vue/node_modules/postcss": {
-      "version": "8.4.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "version": "8.4.16",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
+      "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -23590,9 +23594,9 @@
       "dev": true
     },
     "@types/react": {
-      "version": "18.0.17",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.17.tgz",
-      "integrity": "sha512-38ETy4tL+rn4uQQi7mB81G7V1g0u2ryquNmsVIOKUAEIDK+3CUjZ6rSRpdvS99dNBnkLFL83qfmtLacGOTIhwQ==",
+      "version": "18.0.19",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.19.tgz",
+      "integrity": "sha512-BDc3Q+4Q3zsn7k9xZrKfjWyJsSlEDMs38gD1qp2eDazLCdcPqAT+vq1ND+Z8AGel/UiwzNUk8ptpywgNQcJ1MQ==",
       "dev": true,
       "requires": {
         "@types/prop-types": "*",
@@ -27335,13 +27339,13 @@
       }
     },
     "concurrently": {
-      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-7.3.0.tgz",
-      "integrity": "sha512-IiDwm+8DOcFEInca494A8V402tNTQlJaYq78RF2rijOrKEk/AOHTxhN4U1cp7GYKYX5Q6Ymh1dLTBlzIMN0ikA==",
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-7.4.0.tgz",
+      "integrity": "sha512-M6AfrueDt/GEna/Vg9BqQ+93yuvzkSKmoTixnwEJkH0LlcGrRC2eCmjeG1tLLHIYfpYJABokqSGyMcXjm96AFA==",
       "dev": true,
       "requires": {
         "chalk": "^4.1.0",
-        "date-fns": "^2.16.1",
+        "date-fns": "^2.29.1",
         "lodash": "^4.17.21",
         "rxjs": "^7.0.0",
         "shell-quote": "^1.7.3",
@@ -27784,9 +27788,9 @@
       }
     },
     "core-js": {
-      "version": "3.25.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.25.0.tgz",
-      "integrity": "sha512-CVU1xvJEfJGhyCpBrzzzU1kjCfgsGUxhEvwUV2e/cOedYWHdmluamx+knDnmhqALddMG16fZvIqvs9aijsHHaA=="
+      "version": "3.25.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.25.1.tgz",
+      "integrity": "sha512-sr0FY4lnO1hkQ4gLDr24K0DGnweGO1QwSj5BpfQjpSJPdqWalja4cTps29Y/PJVG/P7FYlPDkH3hO+Tr0CvDgQ=="
     },
     "core-js-compat": {
       "version": "3.23.4",
@@ -30459,9 +30463,9 @@
       "dev": true
     },
     "fp-ts": {
-      "version": "2.12.2",
-      "resolved": "https://registry.npmjs.org/fp-ts/-/fp-ts-2.12.2.tgz",
-      "integrity": "sha512-v8J7ud+nTkP5Zz17GhpCsY19wiRbB9miuj61nBcCJyDpu52zs9Z4O7OLDfYoKFQMJ9EsSZA7W1vRgC1d3jy5qw=="
+      "version": "2.12.3",
+      "resolved": "https://registry.npmjs.org/fp-ts/-/fp-ts-2.12.3.tgz",
+      "integrity": "sha512-8m0XvW8kZbfnJOA4NvSVXu95mLbPf4LQGwQyqVukIYS4KzSNJiyKSmuZUmbVHteUi6MGkAJGPb0goPZqI+Tsqg=="
     },
     "fragment-cache": {
       "version": "0.2.1",
@@ -31518,9 +31522,9 @@
       }
     },
     "io-ts": {
-      "version": "2.2.17",
-      "resolved": "https://registry.npmjs.org/io-ts/-/io-ts-2.2.17.tgz",
-      "integrity": "sha512-RkQY06h6rRyADVEI46OCAUYTP2p18Vdtz9Movi19Mmj7SJ1NhN/yGyW7CxlcBVxh95WKg2YSbTmcUPqqeLuhXw==",
+      "version": "2.2.18",
+      "resolved": "https://registry.npmjs.org/io-ts/-/io-ts-2.2.18.tgz",
+      "integrity": "sha512-3JxUUzRtPQPs5sOwB7pW0+Xb54nOzqA6M1sRB1hwgsRmkWMeGTjtOrCynGTJhIj+mBLUj2S37DAq2+BrPh9kTQ==",
       "requires": {}
     },
     "ip": {
@@ -37632,9 +37636,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "4.8.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.2.tgz",
-      "integrity": "sha512-C0I1UsrrDHo2fYI5oaCGbSejwX4ch+9Y5jTQELvovfmFkK3HHSZJB8MSJcWLmCUBzQBchCrZ9rMRV6GuNrvGtw==",
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz",
+      "integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==",
       "dev": true
     },
     "uglify-js": {
@@ -38025,18 +38029,18 @@
       "dev": true
     },
     "vue": {
-      "version": "2.7.7",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.7.tgz",
-      "integrity": "sha512-osfkncsGCWqtch+YWYxbqTNQ9hl/UQ6TFRkdmK/VqAjuMpxzr5QotFsYpmJ1AB1ez2LJeIKXDmtMkXUotMOTsA==",
+      "version": "2.7.10",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.10.tgz",
+      "integrity": "sha512-HmFC70qarSHPXcKtW8U8fgIkF6JGvjEmDiVInTkKZP0gIlEPhlVlcJJLkdGIDiNkIeA2zJPQTWJUI4iWe+AVfg==",
       "requires": {
-        "@vue/compiler-sfc": "2.7.7",
+        "@vue/compiler-sfc": "2.7.10",
         "csstype": "^3.1.0"
       },
       "dependencies": {
         "@vue/compiler-sfc": {
-          "version": "2.7.7",
-          "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.7.tgz",
-          "integrity": "sha512-Ah8dIuo6ZVPHTq9+s4rBU/YpJu3vGSNyeOTCrPrVPQnkUfnT5Ig+IKBhePuQWFXguYb2TuEWrEfiiX9DZ3aJlA==",
+          "version": "2.7.10",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.10.tgz",
+          "integrity": "sha512-55Shns6WPxlYsz4WX7q9ZJBL77sKE1ZAYNYStLs6GbhIOMrNtjMvzcob6gu3cGlfpCR4bT7NXgyJ3tly2+Hx8Q==",
           "requires": {
             "@babel/parser": "^7.18.4",
             "postcss": "^8.4.14",
@@ -38049,9 +38053,9 @@
           "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
         },
         "postcss": {
-          "version": "8.4.14",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-          "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+          "version": "8.4.16",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
+          "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
           "requires": {
             "nanoid": "^3.3.4",
             "picocolors": "^1.0.0",
diff --git a/package.json b/package.json
index b17b7989a..2e88037dd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "piping-ui",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "private": true,
   "author": "Ryo Ota <nwtgck@nwtgck.org> (https://github.com/nwtgck)",
   "scripts": {
@@ -25,12 +25,12 @@
     "@mattiasbuelens/web-streams-adapter": "^0.1.0",
     "binconv": "^0.2.0",
     "clipboard-copy": "^4.0.1",
-    "core-js": "^3.25.0",
+    "core-js": "^3.25.1",
     "file-saver": "^2.0.5",
     "file-type": "^16.5.3",
     "filepond": "^4.30.4",
-    "fp-ts": "^2.12.2",
-    "io-ts": "^2.2.17",
+    "fp-ts": "^2.12.3",
+    "io-ts": "^2.2.18",
     "jszip": "^3.10.1",
     "jwk-thumbprint": "^0.1.4",
     "linkifyjs": "^3.0.5",
@@ -39,7 +39,7 @@
     "sanitize-html": "^2.7.1",
     "smoothscroll-polyfill": "^0.4.4",
     "url-join": "^4.0.1",
-    "vue": "^2.7.7",
+    "vue": "^2.7.10",
     "vue-async-computed": "^3.9.0",
     "vue-async-computed-decorator": "0.0.5",
     "vue-class-component": "^7.2.6",
@@ -54,7 +54,7 @@
     "@types/file-saver": "^2.0.5",
     "@types/mocha": "^8.2.3",
     "@types/openpgp": "^4.4.18",
-    "@types/react": "^18.0.17",
+    "@types/react": "^18.0.19",
     "@types/react-dom": "^18.0.6",
     "@types/sanitize-html": "^2.6.2",
     "@types/smoothscroll-polyfill": "^0.3.1",
@@ -70,7 +70,7 @@
     "@vue/test-utils": "^1.3.0",
     "babel-eslint": "^10.1.0",
     "chai": "^4.3.6",
-    "concurrently": "^7.3.0",
+    "concurrently": "^7.4.0",
     "copyfiles": "^2.4.1",
     "cross-var": "^1.1.0",
     "eslint": "^6.8.0",
@@ -81,7 +81,7 @@
     "react-dom": "^18.2.0",
     "sass": "~1.32.0",
     "sass-loader": "^10.3.1",
-    "typescript": "^4.8.2",
+    "typescript": "^4.8.3",
     "vue-cli-plugin-vuetify": "^2.5.5",
     "vuetify-loader": "^1.9.2",
     "watch-build-serve": "git+https://github.com/nwtgck/watch-build-serve-node.git#afc757410b3339e1603916ab98b8e5760569dbaa",
diff --git a/src/components/DarkThemeSwitch.vue b/src/components/DarkThemeSwitch.vue
new file mode 100644
index 000000000..eb7f68fbf
--- /dev/null
+++ b/src/components/DarkThemeSwitch.vue
@@ -0,0 +1,21 @@
+<template>
+  <v-switch v-model="enableDarkTheme"></v-switch>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import {enableDarkTheme} from "@/enable-dark-theme";
+
+@Component
+export default class DarkThemeSwitch extends Vue {
+  get enableDarkTheme() {
+    return enableDarkTheme.value;
+  }
+  set enableDarkTheme(v: boolean) {
+    enableDarkTheme.value = v;
+    // Enable dark theme
+    // NOTE: `this.$vuetify.theme.dark` is not available in Composition API
+    this.$vuetify.theme.dark = v;
+  }
+}
+</script>
diff --git a/src/components/DataDownloader.vue b/src/components/DataDownloader.vue
index 3328d3d5f..a17e47ba0 100644
--- a/src/components/DataDownloader.vue
+++ b/src/components/DataDownloader.vue
@@ -1,15 +1,15 @@
 <template>
-  <v-expansion-panel>
+  <v-expansion-panel ref="rootElement">
     <v-expansion-panel-header :disable-icon-rotate="hasError">
-      <span>{{ strings['download_in_downloader'] }} #{{ props.downloadNo }}</span>
+      <span>{{ strings['download_in_downloader'] }} #{{ composedProps.downloadNo }}</span>
     </v-expansion-panel-header>
     <v-expansion-panel-content>
 
-      <v-alert type="info" v-if="props.protection.type === 'passwordless' && verificationStep.type === 'initial'">
+      <v-alert type="info" v-if="composedProps.protection.type === 'passwordless' && verificationStep.type === 'initial'">
         <span style="">{{ strings['waiting_for_sender'] }}</span>
       </v-alert>
 
-      <span v-if="props.protection.type === 'passwordless' && verificationStep.type === 'verification_code_arrived'">
+      <span v-if="composedProps.protection.type === 'passwordless' && verificationStep.type === 'verification_code_arrived'">
         <VerificationCode :value="verificationStep.verificationCode"/>
       </span>
 
@@ -34,14 +34,25 @@
 </template>
 
 <script lang="ts">
+import {type Protection} from "@/datatypes";
+
+export type DataDownloaderProps = {
+  downloadNo: number,
+  serverUrl: string,
+  secretPath: string,
+  protection: Protection,
+};
+</script>
+
+<script setup lang="ts">
 /* eslint-disable no-console */
 
-import {Component, Prop, Vue} from 'vue-property-decorator';
+import Vue, {ref, computed, onMounted} from "vue";
 import urlJoin from 'url-join';
 import {mdiAlert, mdiChevronDown} from "@mdi/js";
 import {stringsByLang} from "@/strings/strings-by-lang";
 import * as pipingUiUtils from "@/piping-ui-utils";
-import type {Protection, VerificationStep} from "@/datatypes";
+import {type VerificationStep} from "@/datatypes";
 import VerificationCode from "@/components/VerificationCode.vue";
 import {pipingUiAuthAsync} from "@/pipingUiAuthWithWebpackChunkName"
 import {language} from "@/language";
@@ -52,155 +63,133 @@ const binconvAsync = () => import('binconv');
 const swDownloadAsync = () => import("@/sw-download");
 const utilsAsync = () => import("@/utils");
 
-export type DataDownloaderProps = {
-  downloadNo: number,
-  serverUrl: string,
-  secretPath: string,
-  protection: Protection,
-};
-
-// NOTE: Automatically download when mounted
-@Component({
-  components: {
-    VerificationCode,
-  },
-})
-export default class DataDownloader extends Vue {
-  @Prop() private props!: DataDownloaderProps;
-
-  private errorMessage: () => string = () => "";
-  private verificationStep: VerificationStep = {type: 'initial'};
-
-  // for language support
-  private get strings() {
-    return stringsByLang(language.value);
-  }
-
-  private get hasError(): boolean {
-    return this.errorMessage() !== "";
-  }
-
-  private get headerIcon(): string {
-    if (this.hasError) {
-      return mdiAlert;
-    } else {
-      return mdiChevronDown;
-    }
-  }
-
-  private get headerIconColor(): string | undefined {
-    if (this.hasError) {
-      return "error";
-    } else {
-      return undefined
-    }
-  }
-
-  private get isReadyToDownload(): boolean {
-    return this.props.protection.type === 'passwordless' ? this.verificationStep.type === 'verified' && this.verificationStep.verified : true
+// eslint-disable-next-line no-undef
+const props = defineProps<{ composedProps: DataDownloaderProps }>();
+
+const errorMessage = ref<() => string>(() => "");
+const verificationStep = ref<VerificationStep>({type: 'initial'});
+// for language support
+const strings = computed(() => stringsByLang(language.value));
+const hasError = computed<boolean>(() => errorMessage.value() !== "");
+const headerIcon = computed<string>(() => {
+  if (hasError.value) {
+    return mdiAlert;
+  } else {
+    return mdiChevronDown;
   }
-
-  private get downloadPath(): string {
-    return urlJoin(this.props.serverUrl, encodeURI(this.props.secretPath));
+});
+const headerIconColor = computed<string | undefined>(() => {
+  if (hasError.value) {
+    return "error";
+  } else {
+    return undefined
   }
+});
+const isReadyToDownload = computed<boolean>(() => {
+  return props.composedProps.protection.type === 'passwordless' ? verificationStep.value.type === 'verified' && verificationStep.value.verified : true
+});
+const downloadPath = computed<string>(() => {
+  return urlJoin(props.composedProps.serverUrl, encodeURI(props.composedProps.secretPath));
+});
+const rootElement = ref<Vue>();
 
-  async mounted() {
-    // Scroll to this element
-    // NOTE: no need to add `await`
-    pipingUiUtils.scrollTo(this.$el);
-
-    // Key exchange
-    const keyExchangeRes = await (await pipingUiAuthAsync).keyExchangeAndReceiveVerified(
-      this.props.serverUrl,
-      this.props.secretPath,
-      this.props.protection,
+// NOTE: Automatically download when mounted
+onMounted(async () => {
+  // Scroll to this element
+  // NOTE: no need to add `await`
+  pipingUiUtils.scrollTo(rootElement.value!.$el);
+
+  // Key exchange
+  const keyExchangeRes = await (await pipingUiAuthAsync).keyExchangeAndReceiveVerified(
+      props.composedProps.serverUrl,
+      props.composedProps.secretPath,
+      props.composedProps.protection,
       (step: VerificationStep) => {
-        this.verificationStep = step;
+        verificationStep.value = step;
       }
-    );
+  );
 
-    // If error
-    if (keyExchangeRes.type === "error") {
-      this.errorMessage = () => keyExchangeRes.errorMessage(language.value);
+  // If error
+  if (keyExchangeRes.type === "error") {
+    errorMessage.value = () => keyExchangeRes.errorMessage(language.value);
+    return;
+  }
+  const {key} = keyExchangeRes;
+
+  const swDownload = await swDownloadAsync();
+  // If not supporting stream-download via Service Worker
+  if (!swDownload.supportsSwDownload()) {
+    // If password-protection is disabled
+    if (key === undefined) {
+      // NOTE: Should use streaming-download via Service Worker as possible because it can detect MIME type and attach a file extension.
+      console.log("downloading with dynamic <a href> click...");
+      // Download or show on browser sometimes
+      const aTag = document.createElement('a');
+      aTag.href = downloadPath.value;
+      aTag.target = "_blank";
+      aTag.download = props.composedProps.secretPath;
+      aTag.click();
       return;
     }
-    const {key} = keyExchangeRes;
-
-    const swDownload = await swDownloadAsync();
-    // If not supporting stream-download via Service Worker
-    if (!swDownload.supportsSwDownload()) {
-      // If password-protection is disabled
-      if (key === undefined) {
-        // NOTE: Should use streaming-download via Service Worker as possible because it can detect MIME type and attach a file extension.
-        console.log("downloading with dynamic <a href> click...");
-        // Download or show on browser sometimes
-        const aTag = document.createElement('a');
-        aTag.href = this.downloadPath;
-        aTag.target = "_blank";
-        aTag.download = this.props.secretPath;
-        aTag.click();
-        return;
-      }
-      console.log("downloading and decrypting with FileSaver.saveAs()...");
-      const binconv = await binconvAsync();
-      // Get response
-      const res = await fetch(this.downloadPath);
-      const resBody = await binconv.blobToUint8Array(await res.blob());
-      // Decrypt the response body
-      let plain: Uint8Array;
-      try {
-        plain = await (await utilsAsync()).decrypt(resBody, key);
-      } catch (e) {
-        console.log("failed to decrypt", e);
-        this.errorMessage = () => this.strings['password_might_be_wrong'];
-        return;
-      }
-      // Save
-      const FileSaver = await FileSaverAsync();
-      FileSaver.saveAs(binconv.uint8ArrayToBlob(plain), this.props.secretPath);
+    console.log("downloading and decrypting with FileSaver.saveAs()...");
+    const binconv = await binconvAsync();
+    // Get response
+    const res = await fetch(downloadPath.value);
+    const resBody = await binconv.blobToUint8Array(await res.blob());
+    // Decrypt the response body
+    let plain: Uint8Array;
+    try {
+      plain = await (await utilsAsync()).decrypt(resBody, key);
+    } catch (e) {
+      console.log("failed to decrypt", e);
+      errorMessage.value = () => strings.value['password_might_be_wrong'];
       return;
     }
-    console.log("downloading streaming with the Service Worker and decrypting if need...");
-    const utils = await utilsAsync();
-    const res = await fetch(this.downloadPath);
-    const contentLengthStr: string | undefined = key === undefined ? res.headers.get("Content-Length") ?? undefined : undefined;
-    let readableStream: ReadableStream<Uint8Array> = res.body!
-    if (key !== undefined) {
-      try {
-        readableStream = await utils.decryptStream(res.body!, key);
-      } catch (e) {
-        console.log("failed to decrypt", e);
-        this.errorMessage = () => this.strings['password_might_be_wrong'];
-        return;
-      }
-    }
-    const [readableStreamForDownload, readableStreamForFileType] = readableStream.tee();
-    const fileTypeResult = await fileType.fromStream(readableStreamForFileType);
-    let fileName = this.props.secretPath;
-    if (fileTypeResult !== undefined && !fileName.match(/.+\..+/)) {
-      fileName = `${fileName}.${fileTypeResult.ext}`;
+    // Save
+    const FileSaver = await FileSaverAsync();
+    FileSaver.saveAs(binconv.uint8ArrayToBlob(plain), props.composedProps.secretPath);
+    return;
+  }
+  console.log("downloading streaming with the Service Worker and decrypting if need...");
+  const utils = await utilsAsync();
+  const res = await fetch(downloadPath.value);
+  const contentLengthStr: string | undefined = key === undefined ? res.headers.get("Content-Length") ?? undefined : undefined;
+  let readableStream: ReadableStream<Uint8Array> = res.body!
+  if (key !== undefined) {
+    try {
+      readableStream = await utils.decryptStream(res.body!, key);
+    } catch (e) {
+      console.log("failed to decrypt", e);
+      errorMessage.value = () => strings.value['password_might_be_wrong'];
+      return;
     }
-    // (from: https://github.com/jimmywarting/StreamSaver.js/blob/314e64b8984484a3e8d39822c9b86a345eb36454/sw.js#L120-L122)
-    // Make filename RFC5987 compatible
-    const escapedFileName = encodeURIComponent(fileName).replace(/['()]/g, escape).replace(/\*/g, '%2A');
-    // FIXME: Use `[string, string][]` instead. But lint causes an error "0:0  error  Parsing error: Cannot read properties of undefined (reading 'map')"
-    const headers: string[][] = [
-      ... ( contentLengthStr === undefined ? [] : [ [ "Content-Length", contentLengthStr ] ] ),
-      // Without "Content-Type", Safari in iOS 15 adds ".html" to the downloading file
-      ...( fileTypeResult === undefined ? [] : [ [ "Content-Type", fileTypeResult.mime ] ] ),
-      ['Content-Disposition', "attachment; filename*=UTF-8''" + escapedFileName],
-    ];
-    // Enroll download ReadableStream and get sw-download ID
-    const {swDownloadId} = await enrollDownload(headers, readableStreamForDownload);
-    // Download via Service Worker
-    const aTag = document.createElement('a');
-    // NOTE: '/sw-download/v2' can be received by Service Worker in src/sw.js
-    // NOTE: URL fragment is passed to Service Worker but not passed to Web server
-    aTag.href = `/sw-download/v2#?id=${swDownloadId}`;
-    aTag.target = "_blank";
-    aTag.click();
   }
-}
+  const [readableStreamForDownload, readableStreamForFileType] = readableStream.tee();
+  const fileTypeResult = await fileType.fromStream(readableStreamForFileType);
+  let fileName = props.composedProps.secretPath;
+  if (fileTypeResult !== undefined && !fileName.match(/.+\..+/)) {
+    fileName = `${fileName}.${fileTypeResult.ext}`;
+  }
+  // (from: https://github.com/jimmywarting/StreamSaver.js/blob/314e64b8984484a3e8d39822c9b86a345eb36454/sw.js#L120-L122)
+  // Make filename RFC5987 compatible
+  const escapedFileName = encodeURIComponent(fileName).replace(/['()]/g, escape).replace(/\*/g, '%2A');
+  // FIXME: Use `[string, string][]` instead. But lint causes an error "0:0  error  Parsing error: Cannot read properties of undefined (reading 'map')"
+  const headers: string[][] = [
+    ... ( contentLengthStr === undefined ? [] : [ [ "Content-Length", contentLengthStr ] ] ),
+    // Without "Content-Type", Safari in iOS 15 adds ".html" to the downloading file
+    ...( fileTypeResult === undefined ? [] : [ [ "Content-Type", fileTypeResult.mime ] ] ),
+    ['Content-Disposition', "attachment; filename*=UTF-8''" + escapedFileName],
+  ];
+  // Enroll download ReadableStream and get sw-download ID
+  const {swDownloadId} = await enrollDownload(headers, readableStreamForDownload);
+  // Download via Service Worker
+  const aTag = document.createElement('a');
+  // NOTE: '/sw-download/v2' can be received by Service Worker in src/sw.js
+  // NOTE: URL fragment is passed to Service Worker but not passed to Web server
+  aTag.href = `/sw-download/v2#?id=${swDownloadId}`;
+  aTag.target = "_blank";
+  aTag.click();
+});
 
 // (base: https://googlechrome.github.io/samples/service-worker/post-message/)
 // FIXME: Use `[string, string][]` instead. But lint causes an error "0:0  error  Parsing error: Cannot read properties of undefined (reading 'map')"
diff --git a/src/components/DataUploader.vue b/src/components/DataUploader.vue
index bff176d57..53fe4b73a 100644
--- a/src/components/DataUploader.vue
+++ b/src/components/DataUploader.vue
@@ -1,7 +1,7 @@
 <template>
-  <v-expansion-panel active="true">
+  <v-expansion-panel ref="rootElement" active="true">
     <v-expansion-panel-header :disable-icon-rotate="isDoneUpload || hasError">
-      <span>{{ strings['upload'] }} #{{ props.uploadNo }}</span>
+      <span>{{ strings['upload'] }} #{{ composedProps.uploadNo }}</span>
       <!-- Percentage -->
       {{ isReadyToUpload ? progressPercentage && `${progressPercentage.toFixed(2)} %` : '' }}
       <template v-slot:actions>
@@ -12,11 +12,11 @@
     </v-expansion-panel-header>
     <v-expansion-panel-content>
 
-      <v-alert type="info" v-if="props.protection.type === 'passwordless' && verificationStep.type === 'initial'">
+      <v-alert type="info" v-if="composedProps.protection.type === 'passwordless' && verificationStep.type === 'initial'">
         <span style="">{{ strings['waiting_for_receiver'] }}</span>
       </v-alert>
 
-      <span v-if="props.protection.type === 'passwordless' && verificationStep.type === 'verification_code_arrived'">
+      <span v-if="composedProps.protection.type === 'passwordless' && verificationStep.type === 'verification_code_arrived'">
         <VerificationCode :value="verificationStep.verificationCode"/>
 
         <v-layout>
@@ -98,10 +98,22 @@
   </v-expansion-panel>
 
 </template>
-
 <script lang="ts">
+import {type ActualFileObject} from "filepond";
+import {type Protection} from "@/datatypes";
+
+export type DataUploaderProps = {
+  uploadNo: number,
+  data: ActualFileObject[] | string,
+  serverUrl: string,
+  secretPath: string,
+  protection: Protection,
+};
+</script>
+
+<script setup lang="ts">
 /* eslint-disable no-console */
-import {Component, Prop, Vue} from 'vue-property-decorator';
+import Vue, {computed, onMounted, ref, watch} from "vue";
 import urlJoin from 'url-join';
 import {blobToUint8Array} from 'binconv/dist/src/blobToUint8Array';
 import {stringToUint8Array} from 'binconv/dist/src/stringToUint8Array';
@@ -111,313 +123,284 @@ import * as utils from '@/utils';
 import * as pipingUiUtils from "@/piping-ui-utils";
 import {stringsByLang} from "@/strings/strings-by-lang";
 import {mdiAlert, mdiCancel, mdiCheck, mdiChevronDown, mdiCloseCircle} from "@mdi/js";
-import AsyncComputed from 'vue-async-computed-decorator';
-import type {Protection, VerificationStep, VerifiedParcel} from "@/datatypes";
+import type {VerificationStep, VerifiedParcel} from "@/datatypes";
 import VerificationCode from "@/components/VerificationCode.vue";
 import {pipingUiAuthAsync} from "@/pipingUiAuthWithWebpackChunkName"
-import {type ActualFileObject} from "filepond";
 import {language} from "@/language";
 import {globalStore} from "@/vue-global";
 
+// eslint-disable-next-line no-undef
+const props = defineProps<{ composedProps: DataUploaderProps }>();
 
-export type DataUploaderProps = {
-  uploadNo: number,
-  data: ActualFileObject[] | string,
-  serverUrl: string,
-  secretPath: string,
-  protection: Protection,
-};
+// Progress bar setting
+const progressSetting = ref<{loadedBytes: number, totalBytes?: number}>({
+  loadedBytes: 0,
+  totalBytes: undefined,
+});
 
-// NOTE: Automatically upload when mounted
-@Component({
-  components: {
-    VerificationCode,
-  },
-})
-export default class DataUploader extends Vue {
-  @Prop() private props!: DataUploaderProps;
-
-  // Progress bar setting
-  private progressSetting: {loadedBytes: number, totalBytes?: number} = {
-    loadedBytes: 0,
-    totalBytes: undefined,
-  };
+const readableBytesString = utils.readableBytesString;
 
-  private readableBytesString = utils.readableBytesString;
+// NOTE: Function makes dynamic language-switch support possible
+//       Delegation is to reassign this value
+const errorMessageDelegate = ref<() => string | Promise<string>>(() => "");
 
-  // NOTE: Function makes dynamic language-switch support possible
-  //       Delegation is to reassign this value
-  private errorMessageDelegate: () => string | Promise<string> =
-    () => "";
-  @AsyncComputed()
-  async errorMessage(): Promise<string> {
-    return this.errorMessageDelegate();
-  }
-  private xhr: XMLHttpRequest;
-  private canceled: boolean = false;
-  private isCompressing: boolean = false;
-  private isNonStreamingEncrypting: boolean = false;
-  private verificationStep: VerificationStep = {type: 'initial'};
-
-  private icons = {
-    mdiCloseCircle,
-    mdiCheck,
-    mdiCancel,
-  };
+const errorMessage = ref<string>("");
+watch([errorMessageDelegate, language], async () => {
+  errorMessage.value = await errorMessageDelegate.value();
+});
 
-  private get progressPercentage(): number | null {
-    if (this.progressSetting.totalBytes === undefined) {
-      return null;
-    } else if (this.progressSetting.totalBytes === 0) {
-      return 100;
-    } else {
-      return this.progressSetting.loadedBytes / this.progressSetting.totalBytes * 100;
-    }
-  }
+const xhr: XMLHttpRequest = new XMLHttpRequest();
+const canceled = ref(false);
+const isCompressing = ref(false);
+const isNonStreamingEncrypting = ref(false);
+const verificationStep = ref<VerificationStep>({type: 'initial'});
 
-  private get isDoneUpload(): boolean {
-    return this.progressPercentage === 100;
-  }
+const icons = {
+  mdiCloseCircle,
+  mdiCheck,
+  mdiCancel,
+};
 
-  private get uploadPath(): string {
-    return urlJoin(this.props.serverUrl, this.props.secretPath);
+const progressPercentage = computed<number | null>(() => {
+  if (progressSetting.value.totalBytes === undefined) {
+    return null;
+  } else if (progressSetting.value.totalBytes === 0) {
+    return 100;
+  } else {
+    return progressSetting.value.loadedBytes / progressSetting.value.totalBytes * 100;
   }
-
-  @AsyncComputed()
-  private async hasError(): Promise<boolean> {
-    return await this.errorMessageDelegate() !== "";
+});
+
+const isDoneUpload = computed<boolean>(() => {
+  return progressPercentage.value === 100;
+});
+
+const uploadPath = computed<string>(() => urlJoin(props.composedProps.serverUrl, props.composedProps.secretPath));
+
+const hasError = ref<boolean>(false);
+watch(errorMessageDelegate, async () => {
+  hasError.value = await errorMessageDelegate.value() !== "";
+});
+
+const headerIcon = computed<string>(() => {
+  if (hasError.value) {
+    return mdiAlert;
+  } else if (canceled.value) {
+    return mdiCloseCircle;
+  } else if (isDoneUpload.value) {
+    return mdiCheck;
+  } else {
+    return mdiChevronDown;
+  }
+});
+
+const headerIconColor = computed<string | undefined>(() => {
+  if (hasError.value) {
+    return "error";
+  } else if (canceled.value) {
+    return "warning";
+  } else if (isDoneUpload.value) {
+    return "teal";
+  } else {
+    return undefined
   }
+});
+
+const isReadyToUpload = computed<boolean>(() => {
+  const notCompressingAndEncrypting = !isCompressing.value && !isNonStreamingEncrypting.value;
+  if (props.composedProps.protection.type === 'passwordless') {
+    return verificationStep.value.type === 'verified' && verificationStep.value.verified && notCompressingAndEncrypting;
+  } else {
+    return notCompressingAndEncrypting;
+  }
+});
 
-  private get headerIcon(): string {
-    // NOTE: getter `hasError` is created by @AsyncComputed
-    const self = (this as unknown as {hasError: boolean});
-    if (self.hasError) {
-      return mdiAlert;
-    } else if (this.canceled) {
-      return mdiCloseCircle;
-    } else if (this.isDoneUpload) {
-      return mdiCheck;
-    } else {
-      return mdiChevronDown;
+const isCancelable = computed<boolean>(() =>
+  isReadyToUpload && !isDoneUpload.value && !hasError.value && !canceled.value
+);
+
+// for language support
+const strings = computed(() => stringsByLang(language.value));
+
+const rootElement = ref<Vue>();
+
+// NOTE: Automatically upload when mounted
+onMounted(async () => {
+  // Scroll to this element
+  // NOTE: no need to add `await`
+  pipingUiUtils.scrollTo(rootElement.value!.$el);
+
+  switch (props.composedProps.protection.type) {
+    case 'raw':
+      // Send
+      await send(undefined);
+      break;
+    case 'password':
+      // Send
+      await send(props.composedProps.protection.password);
+      break;
+    case 'passwordless': {
+      // Key exchange
+      const keyExchangeRes = await (await pipingUiAuthAsync).keyExchange(props.composedProps.serverUrl, 'sender', props.composedProps.secretPath);
+      if (keyExchangeRes.type === 'error') {
+        verificationStep.value = {type: 'error'};
+        errorMessageDelegate.value = () => strings.value['key_exchange_error'](keyExchangeRes.errorCode);
+        return;
+      }
+      const {key, verificationCode} = keyExchangeRes;
+      verificationStep.value = {type: 'verification_code_arrived', verificationCode, key};
+      break;
     }
   }
+});
 
-  private get headerIconColor(): string | undefined {
-    // NOTE: Getter `hasError` is created by @AsyncComputed
-    const self = (this as unknown as {hasError: boolean});
-    if (self.hasError) {
-      return "error";
-    } else if (this.canceled) {
-      return "warning";
-    } else if (this.isDoneUpload) {
-      return "teal";
-    } else {
-      return undefined
-    }
+async function verify(verified: boolean) {
+  if (verificationStep.value.type !== 'verification_code_arrived') {
+    throw new Error("Unexpected state: this.verificationStep.type should be 'verification_code_arrived'");
   }
+  const {key} = verificationStep.value;
+  verificationStep.value = {type: 'verified', verified};
 
-  private get isCancelable(): boolean {
-    return this.isReadyToUpload && !this.isDoneUpload && !this.hasError && !this.canceled;
+  const verifiedParcel: VerifiedParcel = {
+    verified,
+  };
+  const encryptedVerifiedParcel = await utils.encrypt(
+    stringToUint8Array(JSON.stringify(verifiedParcel)),
+    key,
+  );
+  const path = urlJoin(props.composedProps.serverUrl, await (await pipingUiAuthAsync).verifiedPath(props.composedProps.secretPath));
+  // Send verified or not
+  await fetch(path, {
+    method: 'POST',
+    body: encryptedVerifiedParcel,
+  });
+
+  // If verified, send
+  if (verified) {
+    await send(key);
   }
+}
 
-  private get isReadyToUpload(): boolean {
-    const notCompressingAndEncrypting = !this.isCompressing && !this.isNonStreamingEncrypting;
-    if (this.props.protection.type === 'passwordless') {
-      return this.verificationStep.type === 'verified' && this.verificationStep.verified && notCompressingAndEncrypting;
+async function send(password: string | Uint8Array | undefined) {
+  const data: ActualFileObject[] | string = props.composedProps.data;
+
+  const plainBody: Blob = await (async () => {
+    // Text
+    if (typeof data === "string") {
+      return new Blob([data]);
+      // One file
+    } else if (data.length === 1) {
+      return data[0];
+      // Multiple files
     } else {
-      return notCompressingAndEncrypting;
+      const files: ActualFileObject[] = data;
+      isCompressing.value = true;
+      // Zip files
+      const zipBlob: Blob = await utils.zipFilesAsBlob(files);
+      isCompressing.value = false;
+      return zipBlob;
     }
-  }
-
-  // for language support
-  private get strings() {
-    return stringsByLang(language.value);
-  }
+  })();
 
-  constructor() {
-    super();
-    this.xhr = new XMLHttpRequest();
+  // If password protection is disabled
+  if (password === undefined) {
+    uploadByXhr(plainBody, plainBody.size);
+    return
   }
 
-  async mounted() {
-    // Scroll to this element
-    // NOTE: no need to add `await`
-    pipingUiUtils.scrollTo(this.$el);
-
-    switch (this.props.protection.type) {
-      case 'raw':
-        // Send
-        await this.send(undefined);
-        break;
-      case 'password':
-        // Send
-        await this.send(this.props.protection.password);
-        break;
-      case 'passwordless': {
-        // Key exchange
-        const keyExchangeRes = await (await pipingUiAuthAsync).keyExchange(this.props.serverUrl, 'sender', this.props.secretPath);
-        if (keyExchangeRes.type === 'error') {
-          this.verificationStep = {type: 'error'};
-          this.errorMessageDelegate = () => this.strings['key_exchange_error'](keyExchangeRes.errorCode);
-          return;
-        }
-        const {key, verificationCode} = keyExchangeRes;
-        this.verificationStep = {type: 'verification_code_arrived', verificationCode, key};
-        break;
-      }
-    }
+  // Check whether fetch() upload streaming is supported
+  const supportsUploadStreaming = await utils.supportsFetchUploadStreaming(props.composedProps.serverUrl);
+  console.log("streaming upload support: ", supportsUploadStreaming);
+  console.log("force disable streaming upload: ", globalStore.forceDisableStreamingUpload);
+
+  // fetch() upload streaming is not supported
+  if (globalStore.forceDisableStreamingUpload || !supportsUploadStreaming) {
+    isNonStreamingEncrypting.value = true;
+    // Convert plain body blob to Uint8Array
+    const plainBodyArray: Uint8Array = await blobToUint8Array(plainBody);
+    // Get encrypted
+    const encrypted: Uint8Array = await utils.encrypt(plainBodyArray, password);
+    isNonStreamingEncrypting.value = false;
+    uploadByXhr(encrypted, encrypted.byteLength);
+    return;
   }
 
-  private async verify(verified: boolean) {
-    if (this.verificationStep.type !== 'verification_code_arrived') {
-      throw new Error("Unexpected state: this.verificationStep.type should be 'verification_code_arrived'");
-    }
-    const {key} = this.verificationStep;
-    this.verificationStep = {type: 'verified', verified};
-
-
-    const verifiedParcel: VerifiedParcel = {
-      verified,
-    };
-    const encryptedVerifiedParcel = await utils.encrypt(
-      stringToUint8Array(JSON.stringify(verifiedParcel)),
-      key,
-    );
-    const path = urlJoin(this.props.serverUrl, await (await pipingUiAuthAsync).verifiedPath(this.props.secretPath));
-    // Send verified or not
-    await fetch(path, {
+  // Convert plain body to ReadableStream
+  const plainStream = blobToReadableStream(plainBody);
+  // Attach progress
+  const plainStreamWithProgress = getReadableStreamWithProgress(plainStream, plainBody.size);
+  // Encrypt
+  const encryptedStream = await utils.encrypt(plainStreamWithProgress, password);
+  try {
+    // Upload encrypted stream
+    await fetch(uploadPath.value, {
       method: 'POST',
-      body: encryptedVerifiedParcel,
-    });
-
-    // If verified, send
-    if (verified) {
-      await this.send(key);
-    }
+      body: encryptedStream,
+      duplex: 'half',
+    } as RequestInit);
+  } catch {
+    errorMessageDelegate.value = () => strings.value['data_uploader_xhr_upload_error'];
   }
+}
 
-  private async send(password: string | Uint8Array | undefined) {
-    const data: ActualFileObject[] | string = this.props.data;
-
-    const plainBody: Blob = await (async () => {
-      // Text
-      if (typeof data === "string") {
-        return new Blob([data]);
-        // One file
-      } else if (data.length === 1) {
-        return data[0];
-        // Multiple files
-      } else {
-        const files: ActualFileObject[] = data;
-        this.isCompressing = true;
-        // Zip files
-        const zipBlob: Blob = await utils.zipFilesAsBlob(files);
-        this.isCompressing = false;
-        return zipBlob;
+function uploadByXhr(body: Blob | Uint8Array, bodyLength: number) {
+  // Send
+  xhr.open('POST', uploadPath.value, true);
+  xhr.responseType = 'text';
+  // Update progress bar
+  xhr.upload.onprogress = (ev) => {
+    progressSetting.value.loadedBytes = ev.loaded;
+    progressSetting.value.totalBytes  = ev.total;
+  };
+  xhr.upload.onload = () => {
+    // Send finished
+    if (xhr.status === 200) {
+      if (progressSetting.value.totalBytes !== undefined) {
+        progressSetting.value.loadedBytes = progressSetting.value.totalBytes;
       }
-    })();
-
-    // If password protection is disabled
-    if (password === undefined) {
-      this.uploadByXhr(plainBody, plainBody.size);
-      return
     }
-
-    // Check whether fetch() upload streaming is supported
-    const supportsUploadStreaming = await utils.supportsFetchUploadStreaming(this.props.serverUrl);
-    console.log("streaming upload support: ", supportsUploadStreaming);
-    console.log("force disable streaming upload: ", globalStore.forceDisableStreamingUpload);
-
-    // fetch() upload streaming is not supported
-    if (globalStore.forceDisableStreamingUpload || !supportsUploadStreaming) {
-      this.isNonStreamingEncrypting = true;
-      // Convert plain body blob to Uint8Array
-      const plainBodyArray: Uint8Array = await blobToUint8Array(plainBody);
-      // Get encrypted
-      const encrypted: Uint8Array = await utils.encrypt(plainBodyArray, password);
-      this.isNonStreamingEncrypting = false;
-      this.uploadByXhr(encrypted, encrypted.byteLength);
-      return;
-    }
-
-    // Convert plain body to ReadableStream
-    const plainStream = blobToReadableStream(plainBody);
-    // Attach progress
-    const plainStreamWithProgress = this.getReadableStreamWithProgress(plainStream, plainBody.size);
-    // Encrypt
-    const encryptedStream = await utils.encrypt(plainStreamWithProgress, password);
-    try {
-      // Upload encrypted stream
-      await fetch(this.uploadPath, {
-        method: 'POST',
-        body: encryptedStream,
-        duplex: 'half',
-      } as RequestInit);
-    } catch {
-      this.errorMessageDelegate = () => this.strings['data_uploader_xhr_upload_error'];
+  };
+  xhr.onload = () => {
+    if (xhr.status !== 200) {
+      errorMessageDelegate.value = () => strings.value['xhr_status_error']({
+        status: xhr.status,
+        response: xhr.responseText
+      });
     }
-  }
-
-  private uploadByXhr(body: Blob | Uint8Array, bodyLength: number) {
-    // Send
-    this.xhr.open('POST', this.uploadPath, true);
-    this.xhr.responseType = 'text';
-    // Update progress bar
-    this.xhr.upload.onprogress = (ev) => {
-      this.progressSetting.loadedBytes = ev.loaded;
-      this.progressSetting.totalBytes  = ev.total;
-    };
-    this.xhr.upload.onload = () => {
-      // Send finished
-      if (this.xhr.status === 200) {
-        if (this.progressSetting.totalBytes !== undefined) {
-          this.progressSetting.loadedBytes = this.progressSetting.totalBytes;
-        }
-      }
-    };
-    this.xhr.onload = () => {
-      if (this.xhr.status !== 200) {
-        this.errorMessageDelegate = () => this.strings['xhr_status_error']({
-          status: this.xhr.status,
-          response: this.xhr.responseText
-        });
-      }
-    };
-    this.xhr.onerror = (ev) => {
-      this.errorMessageDelegate = () => this.strings['data_uploader_xhr_onerror']({serverUrl: this.props.serverUrl});
-    };
-    this.xhr.upload.onerror = () => {
-      this.errorMessageDelegate = () => this.strings['data_uploader_xhr_upload_error'];
-    };
-    this.xhr.send(body);
-    // Initialize progress bar
-    this.progressSetting.loadedBytes = 0;
-    this.progressSetting.totalBytes = bodyLength;
-  }
+  };
+  xhr.onerror = (ev) => {
+    errorMessageDelegate.value = () => strings.value['data_uploader_xhr_onerror']({serverUrl: props.composedProps.serverUrl});
+  };
+  xhr.upload.onerror = () => {
+    errorMessageDelegate.value = () => strings.value['data_uploader_xhr_upload_error'];
+  };
+  xhr.send(body);
+  // Initialize progress bar
+  progressSetting.value.loadedBytes = 0;
+  progressSetting.value.totalBytes = bodyLength;
+}
 
-  private getReadableStreamWithProgress(baseStream: ReadableStream<Uint8Array>, baseLength: number): ReadableStream<Uint8Array> {
-    const reader = baseStream.getReader();
-    // Initialize progress bar
-    this.progressSetting.loadedBytes = 0;
-    this.progressSetting.totalBytes = baseLength;
-    const self = this;
-    return new ReadableStream({
-      async pull(ctrl) {
-        const res = await reader.read();
-        if (res.done) {
-          ctrl.close();
-          return;
-        }
-        self.progressSetting.loadedBytes += res.value.byteLength;
-        ctrl.enqueue(res.value);
+function getReadableStreamWithProgress(baseStream: ReadableStream<Uint8Array>, baseLength: number): ReadableStream<Uint8Array> {
+  const reader = baseStream.getReader();
+  // Initialize progress bar
+  progressSetting.value.loadedBytes = 0;
+  progressSetting.value.totalBytes = baseLength;
+  return new ReadableStream({
+    async pull(ctrl) {
+      const res = await reader.read();
+      if (res.done) {
+        ctrl.close();
+        return;
       }
-    });
-  }
+      progressSetting.value.loadedBytes += res.value.byteLength;
+      ctrl.enqueue(res.value);
+    }
+  });
+}
 
-  private cancelUpload(): void {
-    this.xhr.abort();
-    this.canceled = true;
-  }
+function cancelUpload(): void {
+  xhr.abort();
+  canceled.value = true;
 }
 </script>
 
diff --git a/src/components/DataViewer.vue b/src/components/DataViewer.vue
index fe266c71e..9149536aa 100644
--- a/src/components/DataViewer.vue
+++ b/src/components/DataViewer.vue
@@ -1,7 +1,7 @@
 <template>
-  <v-expansion-panel>
+  <v-expansion-panel ref="rootElement">
     <v-expansion-panel-header :disable-icon-rotate="isDoneDownload || hasError">
-      <span>{{ strings['view_in_viewer'] }} #{{ props.viewNo }}</span>
+      <span>{{ strings['view_in_viewer'] }} #{{ composedProps.viewNo }}</span>
       <!-- Percentage -->
       {{ progressPercentage ? `${progressPercentage.toFixed(2)} %` : "" }}
       <template v-slot:actions>
@@ -12,11 +12,11 @@
     </v-expansion-panel-header>
     <v-expansion-panel-content>
 
-      <v-alert type="info" v-if="props.protection.type === 'passwordless' && verificationStep.type === 'initial'">
+      <v-alert type="info" v-if="composedProps.protection.type === 'passwordless' && verificationStep.type === 'initial'">
         <span style="">{{ strings['waiting_for_sender'] }}</span>
       </v-alert>
 
-      <span v-if="props.protection.type === 'passwordless' && verificationStep.type === 'verification_code_arrived'">
+      <span v-if="composedProps.protection.type === 'passwordless' && verificationStep.type === 'verification_code_arrived'">
         <VerificationCode :value="verificationStep.verificationCode"/>
       </span>
 
@@ -55,7 +55,7 @@
       </v-simple-table>
 
       <!-- NOTE: The reason why don't use .protection.type === 'password' is that a user may forget to check "Protect with password" despite the data is encrypted with a password -->
-      <div v-if="props.protection.type !== 'passwordless' && isDoneDownload">
+      <div v-if="composedProps.protection.type !== 'passwordless' && isDoneDownload">
         <v-layout>
           <v-switch v-model="enablePasswordReinput"
                     inset
@@ -64,7 +64,7 @@
                     style="padding-left: 0.5em;"/>
 
           <v-text-field v-if="enablePasswordReinput"
-                        v-model="props.password"
+                        v-model="password"
                         :type="showsPassword ? 'text' : 'password'"
                         :label="strings['password']"
                         :append-icon="showsPassword ? icons.mdiEye : icons.mdiEyeOff"
@@ -76,7 +76,7 @@
         <div v-if="enablePasswordReinput" style="text-align: right">
           <v-btn color="primary"
                  text
-                 @click="decryptIfNeedAndViewBlob(props.protection.password)">
+                 @click="decryptIfNeedAndViewBlob(password)">
             <v-icon >{{ icons.mdiKey }}</v-icon>
             {{ strings['unlock'] }}
           </v-btn>
@@ -104,7 +104,7 @@
 
       <!-- Text viewer -->
       <!-- NOTE: Don't use v-if because the inner uses "ref" and the ref is loaded in mounted()-->
-      <div v-show="linkifiedText !== ''" style="text-align: center">
+      <div v-show="linkifiedText !== undefined" style="text-align: center">
         <div style="text-align: right">
           <v-tooltip v-model="showsCopied" bottom>
             <template v-slot:activator="{}">
@@ -153,9 +153,19 @@
 </template>
 
 <script lang="ts">
-/* eslint-disable no-console */
+import {type Protection} from "@/datatypes";
+
+export type DataViewerProps = {
+  viewNo: number,
+  serverUrl: string,
+  secretPath: string,
+  protection: Protection,
+};
+</script>
 
-import { Component, Prop, Vue } from 'vue-property-decorator';
+<script setup lang="ts">
+/* eslint-disable no-console */
+import Vue, {ref, computed, watch, onMounted} from "vue";
 import urlJoin from 'url-join';
 import linkifyHtml from 'linkifyjs/html';
 const FileSaverAsync = () => import('file-saver');
@@ -169,292 +179,266 @@ import {mdiAlert, mdiCheck, mdiChevronDown, mdiContentSave, mdiCloseCircle, mdiE
 import {stringsByLang} from "@/strings/strings-by-lang";
 import * as utils from '@/utils';
 import * as pipingUiUtils from "@/piping-ui-utils";
-import AsyncComputed from 'vue-async-computed-decorator';
-import type {Protection, VerificationStep} from "@/datatypes";
+import {type VerificationStep} from "@/datatypes";
 import VerificationCode from "@/components/VerificationCode.vue";
 import {BlobUrlManager} from "@/blob-url-manager";
 import {pipingUiAuthAsync} from "@/pipingUiAuthWithWebpackChunkName"
 import {language} from "@/language";
 
-
-export type DataViewerProps = {
-  viewNo: number,
-  serverUrl: string,
-  secretPath: string,
-  protection: Protection,
+// eslint-disable-next-line no-undef
+const props = defineProps<{ composedProps: DataViewerProps }>();
+
+// Progress bar setting
+const progressSetting = ref<{loadedBytes: number, totalBytes?: number}>({
+  loadedBytes: 0,
+  totalBytes: undefined,
+});
+const readableBytesString = utils.readableBytesString;
+const errorMessage = ref<() => string>(() => "");
+const xhr: XMLHttpRequest = new XMLHttpRequest();
+const isDoneDownload = ref(false);
+const canceled = ref(false);
+const imgSrc= ref(new BlobUrlManager());
+const videoSrc= ref(new BlobUrlManager());
+const text = ref('');
+const enablePasswordReinput = ref(false);
+const password = ref(props.composedProps.protection.type === "password" ? props.composedProps.protection.password : undefined);
+const showsPassword = ref(false);
+const verificationStep = ref<VerificationStep>({type: 'initial'});
+let rawBlob = new Blob();
+let blob = new Blob();
+const showsCopied = ref(false);
+const isDecrypting = ref(false);
+
+// for language support
+const strings = computed(() => stringsByLang(language.value));
+
+const icons = {
+  mdiContentSave,
+  mdiCloseCircle,
+  mdiEye,
+  mdiEyeOff,
+  mdiKey,
+  mdiFeatureSearchOutline,
 };
 
-// NOTE: Automatically download when mounted
-@Component({
-  components: {
-    VerificationCode,
-  },
-})
-export default class DataViewer extends Vue {
-  @Prop() private props!: DataViewerProps;
-
-  // Progress bar setting
-  private progressSetting: {loadedBytes: number, totalBytes?: number} = {
-    loadedBytes: 0,
-    totalBytes: undefined,
-  };
-
-  private readableBytesString = utils.readableBytesString;
-
-  private errorMessage: () => string = () => "";
-  private xhr: XMLHttpRequest;
-  private isDoneDownload: boolean = false;
-  private canceled: boolean = false;
-  private imgSrc: BlobUrlManager= new BlobUrlManager();
-  private videoSrc: BlobUrlManager= new BlobUrlManager();
-  private text: string = '';
-  private enablePasswordReinput: boolean = false;
-  private showsPassword: boolean = false;
-  private verificationStep: VerificationStep = {type: 'initial'};
-
-  private rawBlob: Blob = new Blob();
-  private blob: Blob = new Blob();
-
-  private showsCopied: boolean = false;
-  private isDecrypting: boolean = false;
-
-  private icons = {
-    mdiContentSave,
-    mdiCloseCircle,
-    mdiEye,
-    mdiEyeOff,
-    mdiKey,
-    mdiFeatureSearchOutline,
-  };
-
-  // for language support
-  private get strings() {
-    return stringsByLang(language.value);
+const progressPercentage = computed<number | null>(() => {
+  if (isDoneDownload.value) {
+    return 100;
+  } else if (progressSetting.value.totalBytes === undefined) {
+    return null;
+  } else if (progressSetting.value.totalBytes === 0) {
+    return 100;
+  } else {
+    return progressSetting.value.loadedBytes / progressSetting.value.totalBytes * 100;
   }
-
-  private get progressPercentage(): number | null {
-    if (this.isDoneDownload) {
-      return 100;
-    } else if (this.progressSetting.totalBytes === undefined) {
-      return null;
-    } else if (this.progressSetting.totalBytes === 0) {
-      return 100;
-    } else {
-      return this.progressSetting.loadedBytes / this.progressSetting.totalBytes * 100;
-    }
+});
+
+const hasError = computed<boolean>(() => errorMessage.value() !== "");
+
+const headerIcon = computed<string>(() => {
+  if (hasError.value) {
+    return mdiAlert;
+  } else if (canceled.value) {
+    return mdiCloseCircle;
+  } else if (isDoneDownload.value) {
+    return mdiCheck;
+  } else {
+    return mdiChevronDown;
   }
-
-  private get hasError(): boolean {
-    return this.errorMessage() !== "";
+});
+
+const headerIconColor = computed<string | undefined>(() => {
+  if (hasError.value) {
+    return "error";
+  } else if (canceled.value) {
+    return "warning";
+  } else if (isDoneDownload.value) {
+    return "teal";
+  } else {
+    return undefined
   }
+});
+
+const isCancelable = computed<boolean>(() => {
+  return isReadyToDownload.value && !isDoneDownload && !hasError.value && !canceled.value;
+});
+
+const isReadyToDownload = computed<boolean>(() => {
+  return props.composedProps.protection.type === 'passwordless' ? verificationStep.value.type === 'verified' && verificationStep.value.verified : true
+});
+
+const downloadPath = computed<string>(() => {
+  return urlJoin(props.composedProps.serverUrl, props.composedProps.secretPath);
+});
+
+const linkifiedText = ref<string>();
+watch(text, async () => {
+  linkifiedText.value = await utils.sanitizeHtmlAllowingATag(linkifyHtml(text.value, {
+    defaultProtocol: 'https'
+  }));
+});
+
+async function copyToClipboard() {
+  showsCopied.value = true;
+  const clipboardCopy = await clipboardCopyAsync()
+  await clipboardCopy(text.value);
+  await new Promise(resolve => setTimeout(resolve, 2000));
+  showsCopied.value = false;
+}
 
-  private get headerIcon(): string {
-    if (this.hasError) {
-      return mdiAlert;
-    } else if (this.canceled) {
-      return mdiCloseCircle;
-    } else if (this.isDoneDownload) {
-      return mdiCheck;
-    } else {
-      return mdiChevronDown;
-    }
-  }
+const rootElement = ref<Vue>();
 
-  private get headerIconColor(): string | undefined {
-    if (this.hasError) {
-      return "error";
-    } else if (this.canceled) {
-      return "warning";
-    } else if (this.isDoneDownload) {
-      return "teal";
-    } else {
-      return undefined
+// NOTE: Automatically download when mounted
+onMounted(async () => {
+  // Scroll to this element
+  // NOTE: no need to add `await`
+  pipingUiUtils.scrollTo(rootElement.value!.$el);
+
+  // Key exchange
+  const keyExchangeRes = await (await pipingUiAuthAsync).keyExchangeAndReceiveVerified(
+    props.composedProps.serverUrl,
+    props.composedProps.secretPath,
+    props.composedProps.protection,
+    (step: VerificationStep) => {
+      verificationStep.value = step;
     }
-  }
-
-  private get isCancelable(): boolean {
-    return this.isReadyToDownload && !this.isDoneDownload && !this.hasError && !this.canceled;
-  }
+  );
 
-  private get isReadyToDownload(): boolean {
-    return this.props.protection.type === 'passwordless' ? this.verificationStep.type === 'verified' && this.verificationStep.verified : true
+  // If error
+  if (keyExchangeRes.type === "error") {
+    errorMessage.value = () => keyExchangeRes.errorMessage(language.value);
+    return;
   }
+  const {key} = keyExchangeRes;
 
-  private get downloadPath(): string {
-    return urlJoin(this.props.serverUrl, this.props.secretPath);
-  }
-
-  @AsyncComputed()
-  private async linkifiedText(): Promise<string> {
-    return utils.sanitizeHtmlAllowingATag(linkifyHtml(this.text, {
-      defaultProtocol: 'https'
-    }));
-  }
-
-  private async copyToClipboard() {
-    this.showsCopied = true;
-    const clipboardCopy = await clipboardCopyAsync()
-    await clipboardCopy(this.text);
-    await new Promise(resolve => setTimeout(resolve, 2000));
-    this.showsCopied = false;
-  }
-
-  constructor() {
-    super();
-    this.xhr = new XMLHttpRequest();
-  }
-
-  async mounted() {
-    // Scroll to this element
-    // NOTE: no need to add `await`
-    pipingUiUtils.scrollTo(this.$el);
-
-    // Key exchange
-    const keyExchangeRes = await (await pipingUiAuthAsync).keyExchangeAndReceiveVerified(
-      this.props.serverUrl,
-      this.props.secretPath,
-      this.props.protection,
-      (step: VerificationStep) => {
-        this.verificationStep = step;
+  xhr.open('GET', downloadPath.value);
+  xhr.responseType = 'blob';
+  xhr.onprogress = (ev) => {
+    console.log(`Download: ${ev.loaded}`)
+  };
+  xhr.onreadystatechange = (ev) => {
+    if (xhr.readyState === XMLHttpRequest.HEADERS_RECEIVED) {
+      const length: string | null = xhr.getResponseHeader('Content-Length');
+      if (length !== null) {
+        progressSetting.value.totalBytes = parseInt(length, 10);
       }
-    );
-
-    // If error
-    if (keyExchangeRes.type === "error") {
-      this.errorMessage = () => keyExchangeRes.errorMessage(language.value);
-      return;
     }
-    const {key} = keyExchangeRes;
-
-    this.xhr.open('GET', this.downloadPath);
-    this.xhr.responseType = 'blob';
-    this.xhr.onprogress = (ev) => {
-      console.log(`Download: ${ev.loaded}`)
-    };
-    this.xhr.onreadystatechange = (ev) => {
-      if (this.xhr.readyState === XMLHttpRequest.HEADERS_RECEIVED) {
-        const length: string | null = this.xhr.getResponseHeader('Content-Length');
-        if (length !== null) {
-          this.progressSetting.totalBytes = parseInt(length, 10);
-        }
-      }
-    };
-    this.xhr.onprogress = (ev) => {
-      this.progressSetting.loadedBytes = ev.loaded;
-    };
-    this.xhr.onload = async (ev) => {
-      if (this.xhr.status === 200) {
-        this.isDoneDownload = true;
-        // Get raw response body
-        this.rawBlob = this.xhr.response;
-        // Decrypt and view blob if possible
-        this.decryptIfNeedAndViewBlob(key);
-      } else {
-        const responseText = await utils.readBlobAsText(this.xhr.response);
-        this.errorMessage = () => this.strings['xhr_status_error']({
-          status: this.xhr.status,
-          response: responseText,
-        });
-      }
-    };
-    this.xhr.onerror = () => {
-      this.errorMessage = () => this.strings['data_viewer_xhr_onerror'];
-    };
-    this.xhr.send();
-  }
-
-  private async viewBlob() {
-    // Reset viewers
-    this.imgSrc.clearIfNeed();
-    this.videoSrc.clearIfNeed();
-    this.text = '';
-
-    const isText: boolean = await (async () => {
-      // NOTE: 4100 was used in FileType.minimumBytes in file-type until 13.1.2
-      const nBytes = 4100;
-      // Get first bytes from blob
-      const firstChunk: Uint8Array = await blobToUint8Array(this.blob.slice(0, nBytes));
-      return utils.isText(firstChunk);
-    })();
-
-    // If body is text
-    if (isText) {
-      // Set text
-      this.text = await utils.readBlobAsText(this.blob);
+  };
+  xhr.onprogress = (ev) => {
+    progressSetting.value.loadedBytes = ev.loaded;
+  };
+  xhr.onload = async (ev) => {
+    if (xhr.status === 200) {
+      isDoneDownload.value = true;
+      // Get raw response body
+      rawBlob = xhr.response;
+      // Decrypt and view blob if possible
+      decryptIfNeedAndViewBlob(key);
     } else {
-      // Detect type of blob
-      const fileTypeResult = await fileType.fromStream(blobToReadableStream(this.blob));
-      if (fileTypeResult !== undefined) {
-        if (fileTypeResult.mime.startsWith("image/")) {
-          this.imgSrc.set(this.blob);
-        } else if (fileTypeResult.mime.startsWith("video/")) {
-          this.videoSrc.set(this.blob);
-        } else if (fileTypeResult.mime.startsWith("text/")) {
-          // Set text
-          this.text = await utils.readBlobAsText(this.blob);
-        }
+      const responseText = await utils.readBlobAsText(xhr.response);
+      errorMessage.value = () => strings.value['xhr_status_error']({
+        status: xhr.status,
+        response: responseText,
+      });
+    }
+  };
+  xhr.onerror = () => {
+    errorMessage.value = () => strings.value['data_viewer_xhr_onerror'];
+  };
+  xhr.send();
+});
+
+async function viewBlob() {
+  // Reset viewers
+  imgSrc.value.clearIfNeed();
+  videoSrc.value.clearIfNeed();
+  text.value = '';
+
+  const isText: boolean = await (async () => {
+    // NOTE: 4100 was used in FileType.minimumBytes in file-type until 13.1.2
+    const nBytes = 4100;
+    // Get first bytes from blob
+    const firstChunk: Uint8Array = await blobToUint8Array(blob.slice(0, nBytes));
+    return utils.isText(firstChunk);
+  })();
+
+  // If body is text
+  if (isText) {
+    // Set text
+    text.value = await utils.readBlobAsText(blob);
+  } else {
+    // Detect type of blob
+    const fileTypeResult = await fileType.fromStream(blobToReadableStream(blob));
+    if (fileTypeResult !== undefined) {
+      if (fileTypeResult.mime.startsWith("image/")) {
+        imgSrc.value.set(blob);
+      } else if (fileTypeResult.mime.startsWith("video/")) {
+        videoSrc.value.set(blob);
+      } else if (fileTypeResult.mime.startsWith("text/")) {
+        // Set text
+        text.value = await utils.readBlobAsText(blob);
       }
     }
-
   }
+}
 
-  private async decryptIfNeedAndViewBlob(password: string | Uint8Array | undefined) {
-    this.blob = await (async () => {
-      if (password === undefined) {
-        return this.rawBlob;
-      } else {
-        // Get response body
-        const resBody = await blobToUint8Array(this.rawBlob);
-        try {
-          this.isDecrypting = true;
-          // Decrypt the response body
-          const plain = await utils.decrypt(resBody, password);
-          this.enablePasswordReinput = false;
-          this.errorMessage = () => '';
-          return uint8ArrayToBlob(plain);
-        } catch (err) {
-          this.enablePasswordReinput = true;
-          this.errorMessage = () => this.strings['password_might_be_wrong'];
-          console.log('Decrypt error:', err);
-          return new Blob();
-        } finally {
-          this.isDecrypting = false;
-        }
+async function decryptIfNeedAndViewBlob(password: string | Uint8Array | undefined) {
+  blob = await (async () => {
+    if (password === undefined) {
+      return rawBlob;
+    } else {
+      // Get response body
+      const resBody = await blobToUint8Array(rawBlob);
+      try {
+        isDecrypting.value = true;
+        // Decrypt the response body
+        const plain = await utils.decrypt(resBody, password);
+        enablePasswordReinput.value = false;
+        errorMessage.value = () => '';
+        return uint8ArrayToBlob(plain);
+      } catch (err) {
+        enablePasswordReinput.value = true;
+        errorMessage.value = () => strings.value['password_might_be_wrong'];
+        console.log('Decrypt error:', err);
+        return new Blob();
+      } finally {
+        isDecrypting.value = false;
       }
-    })();
+    }
+  })();
 
-    // View blob if possible
-    this.viewBlob();
-  }
+  // View blob if possible
+  viewBlob();
+}
 
-  private viewRaw() {
-    this.blob = this.rawBlob;
-    this.enablePasswordReinput = false;
-    this.errorMessage = () => '';
-    // View blob if possible
-    this.viewBlob();
-  }
+function viewRaw() {
+  blob = rawBlob;
+  enablePasswordReinput.value = false;
+  errorMessage.value = () => '';
+  // View blob if possible
+  viewBlob();
+}
 
-  private cancelDownload(): void {
-    this.xhr.abort();
-    this.canceled = true;
-  }
+function cancelDownload(): void {
+  xhr.abort();
+  canceled.value = true;
+}
 
-  private async save(): Promise<void> {
-    const FileSaver = await FileSaverAsync();
-    const fileName = await (async () => {
-      // If secret path has extension
-      if (this.props.secretPath.match(/.+\..+/)) {
-        return this.props.secretPath;
-      }
-      const fileTypeResult = await fileType.fromStream(blobToReadableStream(this.blob));
-      if (fileTypeResult === undefined) {
-        return this.props.secretPath;
-      }
-      return `${this.props.secretPath}.${fileTypeResult.ext}`;
-    })();
-    FileSaver.saveAs(this.blob, fileName);
-  }
+async function save(): Promise<void> {
+  const FileSaver = await FileSaverAsync();
+  const fileName = await (async () => {
+    // If secret path has extension
+    if (props.composedProps.secretPath.match(/.+\..+/)) {
+      return props.composedProps.secretPath;
+    }
+    const fileTypeResult = await fileType.fromStream(blobToReadableStream(blob));
+    if (fileTypeResult === undefined) {
+      return props.composedProps.secretPath;
+    }
+    return `${props.composedProps.secretPath}.${fileTypeResult.ext}`;
+  })();
+  FileSaver.saveAs(blob, fileName);
 }
 </script>
 
diff --git a/src/components/FilePondWrapper.vue b/src/components/FilePondWrapper.vue
new file mode 100644
index 000000000..ba3f6f1b6
--- /dev/null
+++ b/src/components/FilePondWrapper.vue
@@ -0,0 +1,36 @@
+<template>
+  <file-pond :value="value"
+             @input="input"
+             :label-idle="labelIdle"
+             :allow-multiple="true"
+             :allow-paste="true"
+  />
+</template>
+
+<script lang="ts">
+import {Vue, Component, Emit, Prop,} from "vue-property-decorator";
+import {type FilePondFile} from "filepond";
+import * as filePond from "filepond";
+const FilePond = () => import('vue-filepond').then(vueFilePond => vueFilePond.default());
+
+(async () => require('filepond/dist/filepond.min.css'))();
+
+@Component({
+  components: {
+    FilePond,
+  }
+})
+export default class FilePondWrapper extends Vue {
+  @Prop() public value!: FilePondFile[];
+  @Emit() public input(value: FilePondFile[]) {}
+
+  @Prop() public labelIdle!: string;
+
+  created() {
+    // Disable "Powered by PQINA" link
+    filePond.setOptions({
+      credits: false,
+    });
+  }
+}
+</script>
diff --git a/src/components/Licenses.vue b/src/components/Licenses.vue
index c6ad194b0..d29684300 100644
--- a/src/components/Licenses.vue
+++ b/src/components/Licenses.vue
@@ -30,7 +30,7 @@
     </v-card-text>
     <v-divider></v-divider>
     <v-card-actions class="justify-end">
-      <v-btn color="blue darken-1" text @click="input(false)">
+      <v-btn color="blue darken-1" text @click="$emit('input', false)">
         {{ strings['close'] }}
       </v-btn>
     </v-card-actions>
@@ -38,32 +38,31 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Emit} from 'vue-property-decorator';
+import {defineComponent} from "vue";
 import licenses from '@/licenses.json';
-import {stringsByLang} from "@/strings/strings-by-lang";
-import {language} from "@/language";
+import {strings} from "@/strings/strings";
 
-
-@Component
-export default class Licenses extends Vue {
-  // value is licenseDialog to close
-  @Prop() public value!: boolean;
-  @Emit() public input(value: string) {}
-
-  private licenses = licenses;
-
-  // for language support
-  private get strings() {
-    return stringsByLang(language.value);
-  }
-
-  private removeLibVersion(libName: string): string {
-    const idx = libName.lastIndexOf('@');
-    if (idx === -1) {
-      return libName;
-    } else {
-      return libName.substring(0, idx);
+export default defineComponent({
+  props: {
+    value: { type: Boolean, required: true },
+  },
+  emits: {
+    input: (value: boolean) => {},
+  },
+  setup(props, context) {
+    function removeLibVersion(libName: string): string {
+      const idx = libName.lastIndexOf('@');
+      if (idx === -1) {
+        return libName;
+      } else {
+        return libName.substring(0, idx);
+      }
+    }
+    return {
+      licenses,
+      strings,
+      removeLibVersion,
     }
   }
-}
+});
 </script>
diff --git a/src/components/MenuContent.vue b/src/components/MenuContent.vue
index 6d6845fa0..0b813c85a 100644
--- a/src/components/MenuContent.vue
+++ b/src/components/MenuContent.vue
@@ -34,7 +34,7 @@
       <v-list-item>
         <v-list-item-title>{{ strings['dark_theme'] }}</v-list-item-title>
         <v-list-item-action>
-          <v-switch v-model="enableDarkTheme"></v-switch>
+          <dark-theme-switch />
         </v-list-item-action>
       </v-list-item>
 
@@ -59,7 +59,7 @@
         </v-list-item-action>
       </v-list-item>
 
-      <v-list-item @click="input(true)">
+      <v-list-item @click="$emit('input', true)">
         <v-list-item-title>{{ strings['open_source_licenses'] }}</v-list-item-title>
       </v-list-item>
     </v-list>
@@ -67,78 +67,74 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Emit } from 'vue-property-decorator';
+import {defineComponent, computed, onMounted} from "vue";
 import {globalStore} from "@/vue-global";
 import {keys} from "@/local-storage-keys";
-import {stringsByLang} from "@/strings/strings-by-lang";
-import {enableDarkTheme} from "@/enable-dark-theme";
+import {strings} from "@/strings/strings";
 import {language} from "@/language";
+import DarkThemeSwitch from "@/components/DarkThemeSwitch.vue";
 
 
 // Available languages
 type Language = 'en' | 'ja';
 
-@Component
-export default class MenuContent extends Vue {
+export default defineComponent({
+  components: {
+    DarkThemeSwitch,
+  },
   // v-model is licenseDialog
-  @Prop() public value!: boolean;
-  @Emit() public input(value: boolean) {}
-
-  private globalStore = globalStore;
-
-  get enableDarkTheme() {
-    return enableDarkTheme.value;
-  }
-  set enableDarkTheme(v: boolean) {
-    enableDarkTheme.value = v;
-    // Enable dark theme
-    this.$vuetify.theme.dark = v;
-  }
-
-  private availableLanguages: {lang: Language, str: string}[] = [
-    {lang: 'en', str: 'English'},
-    {lang: 'ja', str: '日本語'},
-  ];
-  // for language support
-  private get strings() {
-    return stringsByLang(language.value);
-  }
-
-  set language(l: string){
-    language.value = l;
-  }
-  get language(): string {
-    return language.value;
-  }
-
-  private get recordsServerUrlHistory(): boolean {
-    return globalStore.recordsServerUrlHistory;
-  }
-  private set recordsServerUrlHistory(b: boolean) {
-    globalStore.recordsServerUrlHistory = b;
-    window.localStorage.setItem(keys.recordsServerUrlHistory, b+"");
-  }
-
-  private get recordsSecretPathHistory(): boolean {
-    return globalStore.recordsSecretPathHistory;
-  }
-  private set recordsSecretPathHistory(b: boolean) {
-    globalStore.recordsSecretPathHistory = b;
-    window.localStorage.setItem(keys.recordsSecretPathHistory, b+"");
-  }
-
-  mounted () {
-    // Load server url recording setting
-    const recordsServerUrlHistory = window.localStorage.getItem((keys.recordsServerUrlHistory));
-    if (recordsServerUrlHistory !== null) {
-      globalStore.recordsServerUrlHistory = recordsServerUrlHistory === "true";
-    }
-
-    // Load secret path recording setting
-    const recordsSecretPathHistory = window.localStorage.getItem((keys.recordsSecretPathHistory));
-    if (recordsSecretPathHistory !== null) {
-      globalStore.recordsSecretPathHistory = recordsSecretPathHistory === "true";
-    }
-  }
-}
+  props: {
+    value: { type: Boolean, required: true },
+  },
+  emits: {
+    input: (value: boolean) => {},
+  },
+  setup(props, context) {
+    const availableLanguages: {lang: Language, str: string}[] = [
+      {lang: 'en', str: 'English'},
+      {lang: 'ja', str: '日本語'},
+    ];
+    const recordsServerUrlHistory = computed<boolean>({
+      get() {
+        return globalStore.recordsServerUrlHistory;
+      },
+      set(b: boolean) {
+        globalStore.recordsServerUrlHistory = b;
+        window.localStorage.setItem(keys.recordsServerUrlHistory, b+"");
+      },
+    });
+    const recordsSecretPathHistory = computed<boolean>({
+      get() {
+        return globalStore.recordsSecretPathHistory;
+      },
+      set(b: boolean) {
+        globalStore.recordsSecretPathHistory = b;
+        window.localStorage.setItem(keys.recordsSecretPathHistory, b+"");
+      },
+    });
+
+    onMounted(() => {
+      // Load server url recording setting
+      const recordsServerUrlHistory = window.localStorage.getItem((keys.recordsServerUrlHistory));
+      if (recordsServerUrlHistory !== null) {
+        globalStore.recordsServerUrlHistory = recordsServerUrlHistory === "true";
+      }
+
+      // Load secret path recording setting
+      const recordsSecretPathHistory = window.localStorage.getItem((keys.recordsSecretPathHistory));
+      if (recordsSecretPathHistory !== null) {
+        globalStore.recordsSecretPathHistory = recordsSecretPathHistory === "true";
+      }
+    });
+
+    return {
+      globalStore,
+      availableLanguages,
+      strings,
+      language,
+      recordsServerUrlHistory,
+      recordsSecretPathHistory,
+    };
+  },
+});
 </script>
diff --git a/src/components/PipingUI.vue b/src/components/PipingUI.vue
index cca7369a9..a2c760767 100644
--- a/src/components/PipingUI.vue
+++ b/src/components/PipingUI.vue
@@ -6,11 +6,11 @@
         <div style="text-align: center">
           <v-btn-toggle v-model="sendOrGet" mandatory>
             <v-btn text value="send">
-              {{ strings['send'] }}
+              {{ strings?.['send'] }}
               <v-icon right dark>{{ icons.mdiUpload }}</v-icon>
             </v-btn>
             <v-btn text value="get">
-              {{ strings['get'] }}
+              {{ strings?.['get'] }}
               <v-icon right dark>{{ icons.mdiDownload }}</v-icon>
             </v-btn>
           </v-btn-toggle>
@@ -23,18 +23,16 @@
                     v-model="isTextMode">
               <template v-slot:label>
                 <v-icon class="icon-and-text-margin">{{ icons.mdiText }}</v-icon>
-                {{ strings['text_mode'] }}
+                {{ strings?.['text_mode'] }}
               </template>
             </v-switch>
           </div>
-          <file-pond v-if="!isTextMode"
-                     v-model="files"
-                     :label-idle="filePondLabelIdle"
-                     :allow-multiple="true"
-                     :allow-paste="true"
+          <file-pond-wrapper v-if="!isTextMode"
+                             v-model="files"
+                             :label-idle="filePondLabelIdle"
           />
           <v-textarea v-if="isTextMode"
-                      :label="strings['text_placeholder']"
+                      :label="strings?.['text_placeholder']"
                       v-model="inputText"
                       clearable
                       :clear-icon="icons.mdiClose"
@@ -42,7 +40,7 @@
           ></v-textarea>
         </div>
 
-        <v-combobox :label="strings['server_url']"
+        <v-combobox :label="strings?.['server_url']"
                     v-model="serverUrl"
                     :items="serverUrlHistory"
                     @change="onUpdateServerUrl()"
@@ -65,10 +63,10 @@
             </v-list-item-action>
           </template>
         </v-combobox>
-        <v-combobox :label="strings['secret_path']"
+        <v-combobox :label="strings?.['secret_path']"
                     v-model="secretPath"
                     :items="secretPathHistory"
-                    :placeholder="strings['secret_path_placeholder']"
+                    :placeholder="strings?.['secret_path_placeholder']"
                     ref="secret_path_ref"
                     class="ma-0 pa-0 readable-font"
                     clearable
@@ -110,7 +108,7 @@
                       class="ma-0 pa-0">
               <template v-slot:label>
                 <v-icon class="icon-and-text-margin" :color="protectionType === 'passwordless' ? 'blue' : ''">{{ icons.mdiShieldHalfFull }}</v-icon>
-                {{ strings['passwordless_protection'] }}
+                {{ strings?.['passwordless_protection'] }}
               </template>
             </v-switch>
           </v-row>
@@ -123,14 +121,14 @@
                       class="ma-0 pa-0" >
               <template v-slot:label>
                 <v-icon class="icon-and-text-margin" :color="protectionType === 'password' ? 'blue' : ''">{{ icons.mdiKey }}</v-icon>
-                {{ protectionType === 'password' ? '' : strings['protect_with_password'] }}
+                {{ protectionType === 'password' ? '' : strings?.['protect_with_password'] }}
               </template>
             </v-switch>
 
             <v-text-field v-if="protectionType === 'password'"
                           v-model="password"
                           :type="showsPassword ? 'text' : 'password'"
-                          :label="strings['password']"
+                          :label="strings?.['password']"
                           :append-icon="showsPassword ? icons.mdiEye : icons.mdiEyeOff"
                           @click:append="showsPassword = !showsPassword"
                           single-line
@@ -144,7 +142,7 @@
                  color="primary"
                  v-on:click="send()"
                  block>
-            {{ strings['send'] }}
+            {{ strings?.['send'] }}
             <v-icon right dark>{{ icons.mdiUpload }}</v-icon>
           </v-btn>
           <v-layout v-if="sendOrGet === 'get'">
@@ -153,7 +151,7 @@
                      dark
                      @click="view()"
                      block>
-                {{ strings['view'] }}
+                {{ strings?.['view'] }}
                 <v-icon right dark>{{ icons.mdiFileFind }}</v-icon>
               </v-btn>
             </v-flex>
@@ -162,7 +160,7 @@
                      @click="get()"
                      dark
                      block>
-                {{ strings['download'] }}
+                {{ strings?.['download'] }}
                 <v-icon right dark>{{ icons.mdiDownload }}</v-icon>
               </v-btn>
             </v-flex>
@@ -175,13 +173,13 @@
         <v-expansion-panels v-model="expandedPanelIds" multiple>
           <template v-for="expandedPanel in expandedPanels">
             <template v-if="expandedPanel.type === 'data_uploader'">
-              <DataUploader :props="expandedPanel.props" :key="`upload-${expandedPanel.props.uploadNo}`"/>
+              <DataUploader :composedProps="expandedPanel.props" :key="`upload-${expandedPanel.props.uploadNo}`"/>
             </template>
             <template v-if="expandedPanel.type === 'data_viewer'">
-              <DataViewer :props="expandedPanel.props" :key="`view-${expandedPanel.props.viewNo}`"/>
+              <DataViewer :composedProps="expandedPanel.props" :key="`view-${expandedPanel.props.viewNo}`"/>
             </template>
             <template v-if="expandedPanel.type === 'data_downloader'">
-              <DataDownloader :props="expandedPanel.props" :key="`download-${expandedPanel.props.downloadNo}`"/>
+              <DataDownloader :composedProps="expandedPanel.props" :key="`download-${expandedPanel.props.downloadNo}`"/>
             </template>
           </template>
         </v-expansion-panels>
@@ -199,31 +197,27 @@
   </v-layout>
 </template>
 
-<script lang="ts">
-import { Component, Vue, Watch } from 'vue-property-decorator';
+<script setup lang="ts">
+import Vue, { ref, watch, computed, onMounted } from 'vue';
 const urlJoinAsync = () => import('url-join').then(p => p.default);
-import {DataUploaderProps} from '@/components/DataUploader.vue';
+import {type DataUploaderProps} from '@/components/DataUploader.vue';
 const DataUploader = () => import('@/components/DataUploader.vue');
-import {DataViewerProps} from "@/components/DataViewer.vue";
+import {type DataViewerProps} from "@/components/DataViewer.vue";
 const DataViewer = () => import("@/components/DataViewer.vue");
 const DataDownloader = () => import('@/components/DataDownloader.vue');
-import {DataDownloaderProps} from "@/components/DataDownloader.vue";
+import {type DataDownloaderProps} from "@/components/DataDownloader.vue";
+// NOTE: Use `const FilePond = () => import('vue-filepond').then(vueFilePond => vueFilePond.default())` and <file-pond> in template causes "[Vue warn]: Failed to mount component: template or render function not defined."
+const FilePondWrapper = () => import("@/components/FilePondWrapper.vue");
 import * as t from 'io-ts';
 import {mdiUpload, mdiDownload, mdiDelete, mdiFileFind, mdiClose, mdiEye, mdiEyeOff, mdiKey, mdiShieldHalfFull, mdiText} from "@mdi/js";
 
 import {keys} from "@/local-storage-keys";
 import {globalStore} from "@/vue-global";
-import {stringsByLang} from "@/strings/strings-by-lang";
-import * as filePond from "filepond";
+import {strings} from "@/strings/strings";
+import {type FilePondFile, type ActualFileObject} from "filepond";
 import {baseAndExt} from "@/utils";
-import type {Protection} from "@/datatypes";
+import {type Protection} from "@/datatypes";
 import buildConstants from "@/build-constants";
-import {language} from "@/language";
-
-(async () => require('filepond/dist/filepond.min.css'))();
-
-// Create component
-const FilePond = () => import('vue-filepond').then(vueFilePond => vueFilePond.default());
 
 const defaultServerUrls: ReadonlyArray<string> = buildConstants.pipingServerUrls;
 
@@ -257,405 +251,386 @@ function getShareTargetText(): string | null {
   return new URL(window.location.toString()).searchParams.get("text");
 }
 
-@Component({
-  components: {
-    DataUploader,
-    DataViewer,
-    DataDownloader,
-    FilePond,
-  },
-})
-export default class PipingUI extends Vue {
-  $refs!: {
-    server_url_ref: Vue,
-    secret_path_ref: Vue
-  }
-
-  private sendOrGet: 'send' | 'get' = 'send';
-
-  private serverUrl: string = defaultServerUrls[0];
-  private secretPath: string = "";
-  private isTextMode: boolean = getShareTargetText() !== null;
-  private inputText: string = (() => {
-    const shareTargetText = getShareTargetText();
-    return shareTargetText === null ? '' :  shareTargetText;
-  })();
-  private files: filePond.FilePondFile[] = [];
-  private serverUrlHistory: string[] = [];
-  private secretPathHistory: string[] = [];
-  private protectionType: Protection["type"] = 'raw';
-  private password: string = '';
-  private showsPassword: boolean = false;
-
-  // Random strings for suggested secret paths
-  private randomStrs: string[] = [
-    // mini
-    '',
-  ];
-
-  // Progress bar setting
-  private progressSetting: {show: boolean, loadedBytes: number, totalBytes?: number} = {
-    show: false,
-    loadedBytes: 0,
-    totalBytes: undefined,
-  };
-
-  private uploadCount = 0;
-  private viewCount = 0;
-  private downloadCount = 0;
-  private expandedPanels: (
+const server_url_ref = ref<Vue>();
+const secret_path_ref = ref<Vue>();
+
+const sendOrGet = ref<'send' | 'get'>('send');
+
+const serverUrl = ref<string>(defaultServerUrls[0]);
+const secretPath = ref<string>("");
+const isTextMode = ref<boolean>(getShareTargetText() !== null);
+const inputText = ref<string>((() => {
+  const shareTargetText = getShareTargetText();
+  return shareTargetText === null ? '' :  shareTargetText;
+})());
+const files = ref<FilePondFile[]>([]);
+const serverUrlHistory = ref<string[]>([]);
+const secretPathHistory = ref<string[]>([]);
+const protectionType = ref<Protection["type"]>('raw');
+const password = ref<string>('');
+const showsPassword = ref<boolean>(false);
+
+// Random strings for suggested secret paths
+const randomStrs = ref<string[]>([
+  // mini
+  '',
+]);
+
+const uploadCount = ref<number>(0);
+const viewCount = ref<number>(0);
+const downloadCount = ref<number>(0);
+const expandedPanels = ref<
+  (
     {type: 'data_uploader', props: DataUploaderProps} |
     {type: 'data_viewer', props: DataViewerProps} |
     {type: 'data_downloader', props: DataDownloaderProps}
-  )[] = [];
-  // Indexes of expanded expansion-panel
-  private expandedPanelIds: number[] = [];
-
-  // Show snackbar
-  private showsSnackbar: boolean = false;
-  // Message of snackbar
-  private snackbarMessage: string = '';
-
-  private icons = {
-    mdiUpload,
-    mdiDownload,
-    mdiDelete,
-    mdiFileFind,
-    mdiClose,
-    mdiEye,
-    mdiEyeOff,
-    mdiKey,
-    mdiShieldHalfFull,
-    mdiText,
-  };
-
-  // for language support
-  private get strings() {
-    return stringsByLang(language.value);
-  }
-
-  // FIXME: Should be removed
-  // This for lazy v-model of Combobox
-  private shouldBeRemoved = {
-    latestServerUrl: this.serverUrl,
-    latestSecretPath: this.secretPath,
-  };
+  )[]
+>([]);
+// Indexes of expanded expansion-panel
+const expandedPanelIds = ref<number[]>([]);
+
+// Show snackbar
+const showsSnackbar = ref<boolean>(false);
+// Message of snackbar
+const snackbarMessage = ref<string>('');
+
+const icons = {
+  mdiUpload,
+  mdiDownload,
+  mdiDelete,
+  mdiFileFind,
+  mdiClose,
+  mdiEye,
+  mdiEyeOff,
+  mdiKey,
+  mdiShieldHalfFull,
+  mdiText,
+};
 
+// FIXME: Should be removed
+// This for lazy v-model of Combobox
+const shouldBeRemoved = ref({
+  latestServerUrl: serverUrl.value,
+  latestSecretPath: secretPath.value,
+});
+
+// FIXME: Should be removed
+// NOTE: This is for update by clicking listed auto-complete
+watch(serverUrl, () => {
+  shouldBeRemoved.value.latestServerUrl = serverUrl.value;
+});
+
+watch(secretPath, () => {
+  // NOTE: <v-combobox> "clearable" makes it null or undefined (maybe)
+  if (secretPath.value === null || secretPath.value === undefined) {
+    secretPath.value = '';
+  }
 
   // FIXME: Should be removed
   // NOTE: This is for update by clicking listed auto-complete
-  @Watch('serverUrl')
-  private onServerUrl() {
-    this.shouldBeRemoved.latestServerUrl = this.serverUrl;
-  }
-
-  @Watch('secretPath')
-  private onSecretPath() {
-    // NOTE: <v-combobox> "clearable" makes it null or undefined (maybe)
-    if ( this.secretPath === null || this.secretPath === undefined) {
-      this.secretPath = '';
-    }
+  shouldBeRemoved.value.latestSecretPath = secretPath.value;
+});
 
-    // FIXME: Should be removed
-    // NOTE: This is for update by clicking listed auto-complete
-    this.shouldBeRemoved.latestSecretPath = this.secretPath;
-  }
+function onUpdateServerUrl() {
+  window.localStorage.setItem(keys.selectedServerUrl, serverUrl.value);
+}
 
-  private onUpdateServerUrl() {
-    window.localStorage.setItem(keys.selectedServerUrl, this.serverUrl);
+const filePondLabelIdle = computed<string | undefined>(() => {
+  if (strings.value === undefined) {
+    return undefined;
   }
-
-  private get filePondLabelIdle(): string {
-    // If files are nothing
-    if (this.files.length === 0) {
-      // Hint with file icon
-      return `<img src='img/file-icon.svg' style='width: 2em'><br>${this.strings['drop_a_file_here_or_browse']}`;
-    } else {
-      return this.strings['drop_a_file_here_or_browse'];
-    }
+  // If files are nothing
+  if (files.value.length === 0) {
+    // Hint with file icon
+    return `<img src='img/file-icon.svg' style='width: 2em'><br>${strings.value['drop_a_file_here_or_browse']}`;
+  } else {
+    return strings.value['drop_a_file_here_or_browse'];
   }
-
-  private get enablePasswordProtection(): boolean {
-    return this.protectionType === 'password';
+});
+
+const enablePasswordProtection = computed<boolean>(() => protectionType.value === 'password');
+
+// eslint-disable-next-line vue/return-in-computed-property
+const protection = computed<Protection>(() => {
+  switch (protectionType.value) {
+    case 'raw':
+    case 'passwordless':
+      return {type: protectionType.value};
+    case 'password':
+      return {type: protectionType.value, password: password.value};
   }
+});
 
-  // eslint-disable-next-line getter-return
-  private get protection(): Protection {
-    switch (this.protectionType) {
-      case 'raw':
-      case 'passwordless':
-        return {type: this.protectionType};
-      case 'password':
-        return {type: this.protectionType, password: this.password};
-    }
-  }
-
-  private updateRandomStrs() {
-    this.randomStrs[0] = randomStr(3, chars.nonConfusing);
-  }
+function updateRandomStrs() {
+  randomStrs.value[0] = randomStr(3, chars.nonConfusing);
+}
 
-  private get suggestedSecretPaths(): string[] {
-    const candidates: string[] = (() => {
-      if ((!this.isTextMode && this.files.length === 0) || (this.isTextMode && this.inputText === '')) {
-        // NOTE: This is for simplicity of UI
-        //       Not show suggested secret path on initial status
+const suggestedSecretPaths = computed<string[]>(() => {
+  const candidates: string[] = (() => {
+    if ((!isTextMode.value && files.value.length === 0) || (isTextMode.value && inputText.value === '')) {
+      // NOTE: This is for simplicity of UI
+      //       Not show suggested secret path on initial status
+      return [];
+    } else if (isTextMode.value) {
+      return [...randomStrs.value.map(s => `${s}.txt`), ...randomStrs.value];
+    } else if (files.value.length === 1) {
+      const fileName = files.value[0].filename;
+      const {ext} = baseAndExt(fileName);
+      return [
+        fileName,
+        ...randomStrs.value.map(s => `${s}${ext}`),
+        ...randomStrs.value,
+      ];
+    } else if(files.value.length > 1) {
+      if(secretPath.value.endsWith('.zip')) {
         return [];
-      } else if (this.isTextMode) {
-        return [...this.randomStrs.map(s => `${s}.txt`), ...this.randomStrs];
-      } else if (this.files.length === 1) {
-        const fileName = this.files[0].filename;
-        const {ext} = baseAndExt(fileName);
+      } else {
         return [
-          fileName,
-          ...this.randomStrs.map(s => `${s}${ext}`),
-          ...this.randomStrs,
+          ...(secretPath.value === '' ? [] : [`${secretPath.value}.zip`]),
+          ...randomStrs.value.map(s => `${s}.zip`),
+          ...randomStrs.value,
         ];
-      } else if(this.files.length > 1) {
-        if(this.secretPath.endsWith('.zip')) {
-          return [];
-        } else {
-          return [
-            ...(this.secretPath === '' ? [] : [`${this.secretPath}.zip`]),
-            ...this.randomStrs.map(s => `${s}.zip`),
-            ...this.randomStrs,
-          ];
-        }
-      } else {
-        return this.randomStrs;
       }
-    })();
-
-    return candidates.filter(c => this.secretPath !== c);
-  }
-
-  private onEnablePasswordProtection(enable: boolean) {
-    this.protectionType = enable ? 'password' : 'raw';
-  }
-
-  private onEnablePasswordlessProtection(enable: boolean) {
-    this.protectionType = enable ? 'passwordless' : 'raw';
-  }
+    } else {
+      return randomStrs.value;
+    }
+  })();
 
-  private mounted() {
-    // Disable "Powered by PQINA" link
-    filePond.setOptions({
-      credits: false,
-    });
+  return candidates.filter(c => secretPath.value !== c);
+});
 
-    // Update random strings
-    this.updateRandomStrs();
+function onEnablePasswordProtection(enable: boolean) {
+  protectionType.value = enable ? 'password' : 'raw';
+}
 
-    // Load from Local Storage
-    const serverUrl = window.localStorage.getItem(keys.selectedServerUrl);
-    if (serverUrl !== null) {
-      this.serverUrl = serverUrl;
-    }
+function onEnablePasswordlessProtection(enable: boolean) {
+  protectionType.value = enable ? 'passwordless' : 'raw';
+}
 
-    // FIXME: Combobox is lazy to update v-model
-    // This is for updating server URL in real-time
-    this.$refs.server_url_ref.$el.querySelector('input')!.addEventListener('keyup', (ev)=>{
-      // NOTE: [Send] button is hidden by auto-complete list if assigning to this.serverUrl
-      this.shouldBeRemoved.latestServerUrl = (ev.target as any).value;
-    });
-    // FIXME: Combobox is lazy to update v-model
-    // This is for updating secret path in real-time
-    this.$refs.secret_path_ref.$el.querySelector('input')!.addEventListener('keyup', (ev)=>{
-      // NOTE: [Send] button is hidden by auto-complete list if assigning to this.secretPath
-      this.shouldBeRemoved.latestSecretPath = (ev.target as any).value;
-    });
-
-    // Load server URL history from local storage
-    const serverUrlHistory: string[] | undefined = loadLocalStorage(t.array(t.string), keys.serverUrlHistory);
-    // If none
-    if (serverUrlHistory === undefined) {
-      // Set default
-      this.serverUrlHistory = defaultServerUrls.slice();
-    } else {
-      // Load from storage
-      this.serverUrlHistory = serverUrlHistory;
-    }
+onMounted(() => {
+  // Update random strings
+  updateRandomStrs();
 
-    // Load server URL history from local storage
-    const secretPathHistory: string[] | undefined = loadLocalStorage(t.array(t.string), keys.secretPathHistory);
-    if (secretPathHistory !== undefined) {
-      this.secretPathHistory = secretPathHistory;
-    }
+  // Load from Local Storage
+  const savedServerUrl = window.localStorage.getItem(keys.selectedServerUrl);
+  if (savedServerUrl !== null) {
+    serverUrl.value = savedServerUrl;
   }
 
-  // FIXME: Should be removed
-  private applyLatestServerUrlAndSecretPath() {
-    // FIXME: should be removed after fix
-    // NOTE: This set the latest secret path because v-model of Combobox is lazy
-    this.serverUrl = this.shouldBeRemoved.latestServerUrl;
-    // FIXME: should be removed after fix
-    // NOTE: This set the latest secret path because v-model of Combobox is lazy
-    this.secretPath = this.shouldBeRemoved.latestSecretPath;
+  // FIXME: Combobox is lazy to update v-model
+  // This is for updating server URL in real-time
+  server_url_ref.value!.$el.querySelector('input')!.addEventListener('keyup', (ev)=>{
+    // NOTE: [Send] button is hidden by auto-complete list if assigning to this.serverUrl
+    shouldBeRemoved.value.latestServerUrl = (ev.target as any).value;
+  });
+  // FIXME: Combobox is lazy to update v-model
+  // This is for updating secret path in real-time
+  secret_path_ref.value!.$el.querySelector('input')!.addEventListener('keyup', (ev)=>{
+    // NOTE: [Send] button is hidden by auto-complete list if assigning to this.secretPath
+    shouldBeRemoved.value.latestSecretPath = (ev.target as any).value;
+  });
+
+  // Load server URL history from local storage
+  const savedServerUrlHistory: string[] | undefined = loadLocalStorage(t.array(t.string), keys.serverUrlHistory);
+  // If none
+  if (savedServerUrlHistory === undefined) {
+    // Set default
+    serverUrlHistory.value = defaultServerUrls.slice();
+  } else {
+    // Load from storage
+    serverUrlHistory.value = savedServerUrlHistory;
   }
 
-  private async send() {
-    this.applyLatestServerUrlAndSecretPath();
-
-    if (!this.isTextMode && this.files.length === 0) {
-      // Show error message
-      this.showSnackbar(this.strings['error_file_not_selected']);
-      return;
-    }
-    // If secret path is empty
-    if (this.secretPath === '') {
-      // Show error message
-      this.showSnackbar(this.strings['error_secret_path_not_specified']);
-      return;
-    }
+  // Load server URL history from local storage
+  const savedSecretPathHistory: string[] | undefined = loadLocalStorage(t.array(t.string), keys.secretPathHistory);
+  if (savedSecretPathHistory !== undefined) {
+    secretPathHistory.value = savedSecretPathHistory;
+  }
+});
+
+// FIXME: Should be removed
+function applyLatestServerUrlAndSecretPath() {
+  // FIXME: should be removed after fix
+  // NOTE: This set the latest secret path because v-model of Combobox is lazy
+  serverUrl.value = shouldBeRemoved.value.latestServerUrl;
+  // FIXME: should be removed after fix
+  // NOTE: This set the latest secret path because v-model of Combobox is lazy
+  secretPath.value = shouldBeRemoved.value.latestSecretPath;
+}
 
-    // If enabling password protection and password is empty
-    if (this.protectionType === 'password' && this.password === '') {
-      // Show error message
-      this.showSnackbar(this.strings['password_is_required']);
-      return;
-    }
+async function send() {
+  if (strings.value === undefined) {
+    alert("error: language is not loaded");
+    return;
+  }
+  applyLatestServerUrlAndSecretPath();
 
-    const body: filePond.ActualFileObject[] | string = this.isTextMode ? this.inputText : this.files.map(f => f.file);
-
-    // Increment upload counter
-    this.uploadCount++;
-    // Delegate data uploading
-    this.expandedPanels.unshift({
-      type: 'data_uploader',
-      props: {
-        uploadNo: this.uploadCount,
-        data: body,
-        serverUrl: this.serverUrl,
-        secretPath: this.secretPath,
-        protection: this.protection,
-      }
-    });
-    // Open by default
-    this.expandedPanelIds.push(this.expandedPanels.length-1);
-
-    // If history is enable and user-input server URL is new
-    if (globalStore.recordsServerUrlHistory && !this.serverUrlHistory.map(normalizeUrl).includes(normalizeUrl(this.serverUrl))) {
-      // Enroll server URLs
-      this.serverUrlHistory.push(this.serverUrl);
-      // Save to local storage
-      window.localStorage.setItem(keys.serverUrlHistory, JSON.stringify(this.serverUrlHistory));
-    }
+  if (!isTextMode.value && files.value.length === 0) {
+    // Show error message
+    showSnackbar(strings.value['error_file_not_selected']);
+    return;
+  }
+  // If secret path is empty
+  if (secretPath.value === '') {
+    // Show error message
+    showSnackbar(strings.value['error_secret_path_not_specified']);
+    return;
+  }
 
-    // If history is enable and user-input secret path is new
-    if (globalStore.recordsSecretPathHistory) {
-      // Add secret path
-      this.addSecretPath();
-      // Save to local storage
-      window.localStorage.setItem(keys.secretPathHistory, JSON.stringify(this.secretPathHistory));
-    }
+  // If enabling password protection and password is empty
+  if (protectionType.value === 'password' && password.value === '') {
+    // Show error message
+    showSnackbar(strings.value['password_is_required']);
+    return;
   }
 
-  // Add secret path: latest-used path is the top
-  private addSecretPath(): void {
-    // Remove element
-    const idx = this.secretPathHistory.indexOf((this.secretPath));
-    if (idx !== -1) {
-      this.secretPathHistory.splice(idx, 1);
+  const body: ActualFileObject[] | string = isTextMode.value ? inputText.value : files.value.map(f => f.file);
+
+  // Increment upload counter
+  uploadCount.value++;
+  // Delegate data uploading
+  expandedPanels.value.unshift({
+    type: 'data_uploader',
+    props: {
+      uploadNo: uploadCount.value,
+      data: body,
+      serverUrl: serverUrl.value,
+      secretPath: secretPath.value,
+      protection: protection.value,
     }
-    // Enrol secret path
-    this.secretPathHistory.unshift(this.secretPath);
+  });
+  // Open by default
+  expandedPanelIds.value.push(expandedPanels.value.length-1);
+
+  // If history is enable and user-input server URL is new
+  if (globalStore.recordsServerUrlHistory && !serverUrlHistory.value.map(normalizeUrl).includes(normalizeUrl(serverUrl.value))) {
+    // Enroll server URLs
+    serverUrlHistory.value.push(serverUrl.value);
+    // Save to local storage
+    window.localStorage.setItem(keys.serverUrlHistory, JSON.stringify(serverUrlHistory.value));
   }
 
-  // NOTE: Some file types are displayed inline
-  private async get() {
-    this.applyLatestServerUrlAndSecretPath();
+  // If history is enable and user-input secret path is new
+  if (globalStore.recordsSecretPathHistory) {
+    // Add secret path
+    addSecretPath();
+    // Save to local storage
+    window.localStorage.setItem(keys.secretPathHistory, JSON.stringify(secretPathHistory.value));
+  }
+}
 
-    // If secret path is empty
-    if (this.secretPath === '') {
-      // Show error message
-      this.showSnackbar(this.strings['error_secret_path_not_specified']);
-      return;
-    }
+// Add secret path: latest-used path is the top
+function addSecretPath(): void {
+  // Remove element
+  const idx = secretPathHistory.value.indexOf(secretPath.value);
+  if (idx !== -1) {
+    secretPathHistory.value.splice(idx, 1);
+  }
+  // Enrol secret path
+  secretPathHistory.value.unshift(secretPath.value);
+}
 
-    const urlJoin = await urlJoinAsync();
-    // If enabling password protection and password is empty
-    if (this.protectionType === 'password' && this.password === '') {
-      // Show error message
-      this.showSnackbar(this.strings['password_is_required']);
-      return;
-    }
+// NOTE: Some file types are displayed inline
+async function get() {
+  if (strings.value === undefined) {
+    alert("error: language is not loaded");
+    return;
+  }
+  applyLatestServerUrlAndSecretPath();
 
-    this.downloadCount++;
-    // Delegate data downloading
-    this.expandedPanels.unshift({
-      type: 'data_downloader',
-      props: {
-        downloadNo: this.downloadCount,
-        serverUrl: this.serverUrl,
-        secretPath: this.secretPath,
-        protection: this.protection,
-      }
-    });
-    this.expandedPanelIds.push(this.expandedPanels.length-1);
+  // If secret path is empty
+  if (secretPath.value === '') {
+    // Show error message
+    showSnackbar(strings.value['error_secret_path_not_specified']);
+    return;
   }
 
-  private async view() {
-    this.applyLatestServerUrlAndSecretPath();
+  const urlJoin = await urlJoinAsync();
+  // If enabling password protection and password is empty
+  if (protectionType.value === 'password' && password.value === '') {
+    // Show error message
+    showSnackbar(strings.value['password_is_required']);
+    return;
+  }
 
-    // If secret path is empty
-    if (this.secretPath === '') {
-      // Show error message
-      this.showSnackbar(this.strings['error_secret_path_not_specified']);
-      return;
+  downloadCount.value++;
+  // Delegate data downloading
+  expandedPanels.value.unshift({
+    type: 'data_downloader',
+    props: {
+      downloadNo: downloadCount.value,
+      serverUrl: serverUrl.value,
+      secretPath: secretPath.value,
+      protection: protection.value,
     }
+  });
+  expandedPanelIds.value.push(expandedPanels.value.length-1);
+}
 
-    // If enabling password protection and password is empty
-    if (this.enablePasswordProtection && this.password === '') {
-      // Show error message
-      this.showSnackbar(this.strings['password_is_required']);
-      return;
-    }
+async function view() {
+  if (strings.value === undefined) {
+    alert("error: language is not loaded");
+    return;
+  }
+  applyLatestServerUrlAndSecretPath();
 
-    this.viewCount++;
-    this.expandedPanels.unshift({
-      type: 'data_viewer',
-      props: {
-        viewNo: this.viewCount,
-        serverUrl: this.serverUrl,
-        secretPath: this.secretPath,
-        protection: this.protection,
-      }
-    });
-    // Open by default
-    this.expandedPanelIds.push(this.expandedPanels.length-1);
+  // If secret path is empty
+  if (secretPath.value === '') {
+    // Show error message
+    showSnackbar(strings.value['error_secret_path_not_specified']);
+    return;
   }
 
-  // Show error message
-  private showSnackbar(message: string): void {
-    this.showsSnackbar = true;
-    this.snackbarMessage = message;
+  // If enabling password protection and password is empty
+  if (enablePasswordProtection.value && password.value === '') {
+    // Show error message
+    showSnackbar(strings.value['password_is_required']);
+    return;
   }
 
-  private attachProtocolToUrl(): void {
-    // FIXME: Don't use setTimeout()
-    // @blur is called before the value changed.
-    setTimeout(() => {
-      if (this.serverUrl.match(/^https?:\/\//) === null) {
-        this.serverUrl = `https://${this.serverUrl}`;
-      }
-    }, 100);
+  viewCount.value++;
+  expandedPanels.value.unshift({
+    type: 'data_viewer',
+    props: {
+      viewNo: viewCount.value,
+      serverUrl: serverUrl.value,
+      secretPath: secretPath.value,
+      protection: protection.value,
+    }
+  });
+  // Open by default
+  expandedPanelIds.value.push(expandedPanels.value.length-1);
+}
 
-  }
+// Show error message
+function showSnackbar(message: string): void {
+  showsSnackbar.value = true;
+  snackbarMessage.value = message;
+}
 
-  private deleteServerUrl(url: string): void {
-    // Remove path
-    this.serverUrlHistory = this.serverUrlHistory.filter(u => u !== url);
-    // Save to local storage
-    window.localStorage.setItem(keys.serverUrlHistory, JSON.stringify(this.serverUrlHistory));
-  }
+function attachProtocolToUrl(): void {
+  // FIXME: Don't use setTimeout()
+  // @blur is called before the value changed.
+  setTimeout(() => {
+    if (serverUrl.value.match(/^https?:\/\//) === null) {
+      serverUrl.value = `https://${serverUrl.value}`;
+    }
+  }, 100);
+}
 
-  private deleteSecretPath(path: string): void {
-    // Remove path
-    this.secretPathHistory = this.secretPathHistory.filter(p => p !== path);
-    // Save to local storage
-    window.localStorage.setItem(keys.secretPathHistory, JSON.stringify(this.secretPathHistory));
-  }
+function deleteServerUrl(url: string): void {
+  // Remove path
+  serverUrlHistory.value = serverUrlHistory.value.filter(u => u !== url);
+  // Save to local storage
+  window.localStorage.setItem(keys.serverUrlHistory, JSON.stringify(serverUrlHistory.value));
 }
 
+function deleteSecretPath(path: string): void {
+  // Remove path
+  secretPathHistory.value = secretPathHistory.value.filter(p => p !== path);
+  // Save to local storage
+  window.localStorage.setItem(keys.secretPathHistory, JSON.stringify(secretPathHistory.value));
+}
 </script>
 
 <style scoped>
diff --git a/src/vue-global.ts b/src/vue-global.ts
index 3bec0ffd5..10b7246c7 100644
--- a/src/vue-global.ts
+++ b/src/vue-global.ts
@@ -7,6 +7,7 @@ export const globalStore = new Vue({
     recordsSecretPathHistory: true,
     // Chrome Stable 105.0.5195.52 causes an error "Failed to load resource: net::ERR_FAILED" in streaming-upload. Stable 104 works well with the feature flag.
     // TODO: remove after Chrome fixed, this option should not be maintained after fixed
-    forceDisableStreamingUpload: true,
+    // Chrome Stable 105 can streaming-upload when using separate Chrome profiles
+    forceDisableStreamingUpload: false,
   }
 });