diff --git a/.eslintrc.cjs b/.eslintrc.cjs
deleted file mode 100644
index 6503a113..00000000
--- a/.eslintrc.cjs
+++ /dev/null
@@ -1,16 +0,0 @@
-module.exports = {
-  env: {
-    node: true,
-    es2022: true
-  },
-  extends: [
-    'eslint:recommended',
-    'plugin:vue/recommended',
-    'plugin:vuetify/base',
-    "prettier"
-  ],
-  rules: {
-    // override/add rules settings here, such as:
-    // 'vue/no-unused-vars': 'error'
-  }
-}
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 00000000..b5432de8
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,40 @@
+import globals from "globals";
+import js from "@eslint/js";
+import eslintPluginVue from "eslint-plugin-vue";
+import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
+
+import ts from "typescript-eslint";
+
+export default ts.config(
+  js.configs.recommended,
+  ...ts.configs.recommended,
+  ...eslintPluginVue.configs["flat/vue2-recommended"],
+  eslintPluginPrettierRecommended,
+  {
+    files: ["*.vue", "**/*.vue"],
+    languageOptions: {
+      globals: {
+        ...globals.node,
+      },
+      parserOptions: {
+        parser: "@typescript-eslint/parser",
+      },
+    },
+
+    rules: {
+      "vue/script-setup-uses-vars": "error",
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          args: "all",
+          argsIgnorePattern: "^_",
+          caughtErrors: "all",
+          caughtErrorsIgnorePattern: "^_",
+          destructuredArrayIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          ignoreRestSiblings: true,
+        },
+      ],
+    },
+  },
+);
diff --git a/package-lock.json b/package-lock.json
index f147ab76..9af65262 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "cgi": "^0.3.1",
         "jquery": "^3.6.0",
         "moment": "^2.29.4",
+        "pinia": "^2.2.6",
         "ua-parser-js": "^1.0.1",
         "url-loader": "^4.1.1",
         "vite": "^5.2.11",
@@ -22,21 +23,26 @@
         "vue-cookies": "^1.7.4",
         "vue-router": "^3.5.2",
         "vue-scrolling-table": "^1.0.4",
-        "vuetify": "^2.7.2",
-        "vuex": "^3.6.0"
+        "vuetify": "^2.7.2"
       },
       "devDependencies": {
+        "@eslint/eslintrc": "^3.1.0",
+        "@eslint/js": "^9.14.0",
         "@mdi/font": "^7.4.47",
+        "@types/eslint__js": "^8.42.3",
+        "@types/jquery": "^3.5.32",
         "@vue/test-utils": "^1.2.2",
         "cypress-file-upload": "^5.0.8",
         "deepmerge": "^4.3.1",
-        "eslint": "^8.57.0",
+        "eslint": "^9.14.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-prettier": "^5.1.3",
-        "eslint-plugin-vue": "^9.26.0",
-        "eslint-plugin-vuetify": "^1.1.0",
+        "eslint-plugin-vue": "^9.31.0",
+        "globals": "^15.12.0",
         "prettier": "3.2.5",
         "sass": "~1.32",
+        "typescript": "^5.6.3",
+        "typescript-eslint": "^8.14.0",
         "vue": "^2.7.0"
       }
     },
@@ -504,24 +510,51 @@
       }
     },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.10.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.0.tgz",
-      "integrity": "sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==",
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
+      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
     },
+    "node_modules/@eslint/config-array": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.18.0.tgz",
+      "integrity": "sha512-fTxvnS1sRMu3+JjXwJG0j/i4RT9u4qJ+lqS/yCGap4lH4zZGzQ7tu+xZqQmcMZq5OBZDL4QRxQzRjkWcGt8IVw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.4",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.7.0.tgz",
+      "integrity": "sha512-xp5Jirz5DyPYlPiKat8jaq0EmYvDXKKpzTbxXMpT9eqlRJkRKIz9AGMdlvYjih+im+QlhWrpvVjl8IPC/lHlUw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
     "node_modules/@eslint/eslintrc": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
-      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.2.0.tgz",
+      "integrity": "sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
-        "espree": "^9.6.0",
-        "globals": "^13.19.0",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
         "js-yaml": "^4.1.0",
@@ -529,7 +562,7 @@
         "strip-json-comments": "^3.1.1"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "url": "https://opencollective.com/eslint"
@@ -541,16 +574,45 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
-    "node_modules/@eslint/eslintrc/node_modules/globals": {
-      "version": "13.24.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+    "node_modules/@eslint/eslintrc/node_modules/eslint-visitor-keys": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
       "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/espree": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
+      "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "type-fest": "^0.20.2"
+        "acorn": "^8.14.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -568,25 +630,37 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
-    "node_modules/@eslint/eslintrc/node_modules/type-fest": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+    "node_modules/@eslint/js": {
+      "version": "9.15.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.15.0.tgz",
+      "integrity": "sha512-tMTqrY+EzbXmKJR5ToI8lxu7jaN5EdmrBFJpQk5JmSlyLsx6o4t27r883K5xsLuCYCpfKBCGswMSWXsM+jB7lg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
-    "node_modules/@eslint/js": {
-      "version": "8.57.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
-      "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.4.tgz",
+      "integrity": "sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==",
       "dev": true,
+      "license": "Apache-2.0",
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.3.tgz",
+      "integrity": "sha512-2b/g5hRmpbb1o4GnTZax9N9m0FXzz9OV42ZzI4rDDMDuHUqigAiQCEWChBWCY4ztAGVRjoWT19v0yMmc5/L5kA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
     "node_modules/@fontsource/roboto": {
@@ -594,18 +668,42 @@
       "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.0.13.tgz",
       "integrity": "sha512-j61DHjsdUCKMXSdNLTOxcG701FWnF0jcqNNQi2iPCDxU8seN/sMxeh62dC++UiagCWq9ghTypX+Pcy7kX+QOeQ=="
     },
-    "node_modules/@humanwhocodes/config-array": {
-      "version": "0.11.14",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
-      "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
       "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.6",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.6.tgz",
+      "integrity": "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==",
+      "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "@humanwhocodes/object-schema": "^2.0.2",
-        "debug": "^4.3.1",
-        "minimatch": "^3.0.5"
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.3.0"
       },
       "engines": {
-        "node": ">=10.10.0"
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node/node_modules/@humanwhocodes/retry": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz",
+      "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
       }
     },
     "node_modules/@humanwhocodes/module-importer": {
@@ -621,11 +719,19 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
-    "node_modules/@humanwhocodes/object-schema": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
-      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
-      "dev": true
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.1.tgz",
+      "integrity": "sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
     },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
@@ -791,6 +897,7 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -804,6 +911,7 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 8"
       }
@@ -813,6 +921,7 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -1062,18 +1171,36 @@
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.10.tgz",
       "integrity": "sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==",
       "dev": true,
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
       }
     },
+    "node_modules/@types/eslint__js": {
+      "version": "8.42.3",
+      "resolved": "https://registry.npmjs.org/@types/eslint__js/-/eslint__js-8.42.3.tgz",
+      "integrity": "sha512-alfG737uhmPdnvkrLdZLcEKJ/B8s9Y4hrZ+YAdzUeoArBlSUERA2E87ROfOaS4jd/C45fzOoZzidLc1IPwLqOw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/eslint": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
     },
+    "node_modules/@types/jquery": {
+      "version": "3.5.32",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.32.tgz",
+      "integrity": "sha512-b9Xbf4CkMqS02YH8zACqN1xzdxc3cO735Qe5AbSUFmyOiaWAbcpqh9Wna+Uk0vgACvoQHpWDg2rGdHkYPLmCiQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/sizzle": "*"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -1099,8 +1226,7 @@
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.8.tgz",
       "integrity": "sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/@types/yauzl": {
       "version": "2.10.3",
@@ -1113,11 +1239,234 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@ungap/structured-clone": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
-      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
-      "dev": true
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.14.0.tgz",
+      "integrity": "sha512-tqp8H7UWFaZj0yNO6bycd5YjMwxa6wIHOLZvWPkidwbgLCsBMetQoGj7DPuAlWa2yGO3H48xmPwjhsSPPCGU5w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "8.14.0",
+        "@typescript-eslint/type-utils": "8.14.0",
+        "@typescript-eslint/utils": "8.14.0",
+        "@typescript-eslint/visitor-keys": "8.14.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.3.1",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0",
+        "eslint": "^8.57.0 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.14.0.tgz",
+      "integrity": "sha512-2p82Yn9juUJq0XynBXtFCyrBDb6/dJombnz6vbo6mgQEtWHfvHbQuEa9kAOVIt1c9YFwi7H6WxtPj1kg+80+RA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.14.0",
+        "@typescript-eslint/types": "8.14.0",
+        "@typescript-eslint/typescript-estree": "8.14.0",
+        "@typescript-eslint/visitor-keys": "8.14.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.14.0.tgz",
+      "integrity": "sha512-aBbBrnW9ARIDn92Zbo7rguLnqQ/pOrUguVpbUwzOhkFg2npFDwTgPGqFqE0H5feXcOoJOfX3SxlJaKEVtq54dw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.14.0",
+        "@typescript-eslint/visitor-keys": "8.14.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.14.0.tgz",
+      "integrity": "sha512-Xcz9qOtZuGusVOH5Uk07NGs39wrKkf3AxlkK79RBK6aJC1l03CobXjJbwBPSidetAOV+5rEVuiT1VSBUOAsanQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/typescript-estree": "8.14.0",
+        "@typescript-eslint/utils": "8.14.0",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.14.0.tgz",
+      "integrity": "sha512-yjeB9fnO/opvLJFAsPNYlKPnEM8+z4og09Pk504dkqonT02AyL5Z9SSqlE0XqezS93v6CXn49VHvB2G7XSsl0g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.14.0.tgz",
+      "integrity": "sha512-OPXPLYKGZi9XS/49rdaCbR5j/S14HazviBlUQFvSKz3npr3NikF+mrgK7CFVur6XEt95DZp/cmke9d5i3vtVnQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@typescript-eslint/types": "8.14.0",
+        "@typescript-eslint/visitor-keys": "8.14.0",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^1.3.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.14.0.tgz",
+      "integrity": "sha512-OGqj6uB8THhrHj0Fk27DcHPojW7zKwKkPmHXHvQ58pLYp4hy8CSUdTKykKeh+5vFqTTVmjz0zCOOPKRovdsgHA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@typescript-eslint/scope-manager": "8.14.0",
+        "@typescript-eslint/types": "8.14.0",
+        "@typescript-eslint/typescript-estree": "8.14.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.14.0.tgz",
+      "integrity": "sha512-vG0XZo8AdTH9OE6VFRwAZldNc7qtJ/6NLGWak+BtENuEUXGZgFpihILPiBvKXvJ2nFu27XNGC6rKiwuaoMbYzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.14.0",
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
     },
     "node_modules/@vitejs/plugin-vue2": {
       "version": "2.3.1",
@@ -1200,6 +1549,12 @@
         "@vue/shared": "3.4.27"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.4.27",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.27.tgz",
@@ -1415,9 +1770,10 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.11.3",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
-      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
+      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
+      "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2149,10 +2505,11 @@
       "peer": true
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.5.tgz",
+      "integrity": "sha512-ZVJrKKYunU38/76t0RMOulHOnUcbU9GbpWKAOZ0mhjr7CX6FVrH+4FrAapSOekrgFQ3f/8gwMEuIft0aKq6Hug==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -2527,18 +2884,6 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/doctrine": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
-      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
-      "dev": true,
-      "dependencies": {
-        "esutils": "^2.0.2"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/dom-event-types": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/dom-event-types/-/dom-event-types-1.1.0.tgz",
@@ -2770,58 +3115,64 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.57.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
-      "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
+      "version": "9.14.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.14.0.tgz",
+      "integrity": "sha512-c2FHsVBr87lnUtjP4Yhvk4yEhKrQavGafRA/Se1ouse8PfbfC/Qh9Mxa00yWsZRlqeUB9raXip0aiiUZkgnr9g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
-        "@eslint-community/regexpp": "^4.6.1",
-        "@eslint/eslintrc": "^2.1.4",
-        "@eslint/js": "8.57.0",
-        "@humanwhocodes/config-array": "^0.11.14",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.18.0",
+        "@eslint/core": "^0.7.0",
+        "@eslint/eslintrc": "^3.1.0",
+        "@eslint/js": "9.14.0",
+        "@eslint/plugin-kit": "^0.2.0",
+        "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
-        "@nodelib/fs.walk": "^1.2.8",
-        "@ungap/structured-clone": "^1.2.0",
+        "@humanwhocodes/retry": "^0.4.0",
+        "@types/estree": "^1.0.6",
+        "@types/json-schema": "^7.0.15",
         "ajv": "^6.12.4",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
         "debug": "^4.3.2",
-        "doctrine": "^3.0.0",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^7.2.2",
-        "eslint-visitor-keys": "^3.4.3",
-        "espree": "^9.6.1",
-        "esquery": "^1.4.2",
+        "eslint-scope": "^8.2.0",
+        "eslint-visitor-keys": "^4.2.0",
+        "espree": "^10.3.0",
+        "esquery": "^1.5.0",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
-        "file-entry-cache": "^6.0.1",
+        "file-entry-cache": "^8.0.0",
         "find-up": "^5.0.0",
         "glob-parent": "^6.0.2",
-        "globals": "^13.19.0",
-        "graphemer": "^1.4.0",
         "ignore": "^5.2.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
-        "is-path-inside": "^3.0.3",
-        "js-yaml": "^4.1.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
-        "levn": "^0.4.1",
         "lodash.merge": "^4.6.2",
         "minimatch": "^3.1.2",
         "natural-compare": "^1.4.0",
         "optionator": "^0.9.3",
-        "strip-ansi": "^6.0.1",
         "text-table": "^0.2.0"
       },
       "bin": {
         "eslint": "bin/eslint.js"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
-        "url": "https://opencollective.com/eslint"
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
       }
     },
     "node_modules/eslint-config-prettier": {
@@ -2867,18 +3218,19 @@
       }
     },
     "node_modules/eslint-plugin-vue": {
-      "version": "9.26.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.26.0.tgz",
-      "integrity": "sha512-eTvlxXgd4ijE1cdur850G6KalZqk65k1JKoOI2d1kT3hr8sPD07j1q98FRFdNnpxBELGPWxZmInxeHGF/GxtqQ==",
+      "version": "9.31.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.31.0.tgz",
+      "integrity": "sha512-aYMUCgivhz1o4tLkRHj5oq9YgYPM4/EJc0M7TAKRLCUA5OYxRLAhYEVD2nLtTwLyixEFI+/QXSvKU9ESZFgqjQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
         "globals": "^13.24.0",
         "natural-compare": "^1.4.0",
         "nth-check": "^2.1.1",
         "postcss-selector-parser": "^6.0.15",
-        "semver": "^7.6.0",
-        "vue-eslint-parser": "^9.4.2",
+        "semver": "^7.6.3",
+        "vue-eslint-parser": "^9.4.3",
         "xml-name-validator": "^4.0.0"
       },
       "engines": {
@@ -2904,10 +3256,11 @@
       }
     },
     "node_modules/eslint-plugin-vue/node_modules/semver": {
-      "version": "7.6.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
-      "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
       "dev": true,
+      "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -2924,120 +3277,7 @@
         "node": ">=10"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint-plugin-vuetify": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vuetify/-/eslint-plugin-vuetify-1.1.0.tgz",
-      "integrity": "sha512-I1YRUCGkDqe8F7O0tdf63UZVKtk4734+8fzbZ24YIZKTTyQp/FIR0nSZYG8mPFhTWerzPta7oXNzliBOwP2XeQ==",
-      "dev": true,
-      "dependencies": {
-        "eslint-plugin-vue": "^7.0.0",
-        "requireindex": "^1.2.0"
-      },
-      "peerDependencies": {
-        "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0",
-        "vuetify": "^2.0.0"
-      }
-    },
-    "node_modules/eslint-plugin-vuetify/node_modules/acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "dev": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/eslint-plugin-vuetify/node_modules/eslint-plugin-vue": {
-      "version": "7.20.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.20.0.tgz",
-      "integrity": "sha512-oVNDqzBC9h3GO+NTgWeLMhhGigy6/bQaQbHS+0z7C4YEu/qK/yxHvca/2PTZtGNPsCrHwOTgKMrwu02A9iPBmw==",
-      "dev": true,
-      "dependencies": {
-        "eslint-utils": "^2.1.0",
-        "natural-compare": "^1.4.0",
-        "semver": "^6.3.0",
-        "vue-eslint-parser": "^7.10.0"
-      },
-      "engines": {
-        "node": ">=8.10"
-      },
-      "peerDependencies": {
-        "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0"
-      }
-    },
-    "node_modules/eslint-plugin-vuetify/node_modules/eslint-scope": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-      "dev": true,
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^4.1.1"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/eslint-plugin-vuetify/node_modules/eslint-visitor-keys": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/eslint-plugin-vuetify/node_modules/espree": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
-      "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
-      "dev": true,
-      "dependencies": {
-        "acorn": "^7.1.1",
-        "acorn-jsx": "^5.2.0",
-        "eslint-visitor-keys": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/eslint-plugin-vuetify/node_modules/estraverse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "dev": true,
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/eslint-plugin-vuetify/node_modules/vue-eslint-parser": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
-      "integrity": "sha512-qh3VhDLeh773wjgNTl7ss0VejY9bMMa0GoDG2fQVyDzRFdiU3L7fw74tWZDHNQXdZqxO3EveQroa9ct39D2nqg==",
-      "dev": true,
-      "dependencies": {
-        "debug": "^4.1.1",
-        "eslint-scope": "^5.1.1",
-        "eslint-visitor-keys": "^1.1.0",
-        "espree": "^6.2.1",
-        "esquery": "^1.4.0",
-        "lodash": "^4.17.21",
-        "semver": "^6.3.0"
-      },
-      "engines": {
-        "node": ">=8.10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/mysticatea"
-      },
-      "peerDependencies": {
-        "eslint": ">=5.0.0"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/eslint-scope": {
@@ -3045,6 +3285,7 @@
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
       "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^5.2.0"
@@ -3056,30 +3297,6 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/eslint-utils": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
-      "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
-      "dev": true,
-      "dependencies": {
-        "eslint-visitor-keys": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/mysticatea"
-      }
-    },
-    "node_modules/eslint-utils/node_modules/eslint-visitor-keys": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/eslint-visitor-keys": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
@@ -3092,6 +3309,23 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint/node_modules/@eslint/js": {
+      "version": "9.14.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.14.0.tgz",
+      "integrity": "sha512-pFoEtFWCPyDOl+C6Ift+wC7Ro89otjigCf5vcuWqWgqNSQbRrpjSvdeE6ofLz4dHmyxD5f7gIdGT4+p36L6Twg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/eslint/node_modules/@types/estree": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/eslint/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -3107,12 +3341,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/eslint/node_modules/argparse": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
-    },
     "node_modules/eslint/node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -3159,32 +3387,65 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/eslint/node_modules/find-up": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+    "node_modules/eslint/node_modules/eslint-scope": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.2.0.tgz",
+      "integrity": "sha512-PHlWUfG6lvPc3yvP5A4PNyBL1W8fkDUccmI21JUu/+GKZBoH/W5u6usENXUrWFRsyoW5ACUjFGgAFQp5gUlb/A==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "locate-path": "^6.0.0",
-        "path-exists": "^4.0.0"
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/eslint/node_modules/globals": {
-      "version": "13.24.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+    "node_modules/eslint/node_modules/eslint-visitor-keys": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/espree": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
+      "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "type-fest": "^0.20.2"
+        "acorn": "^8.14.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -3199,18 +3460,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/eslint/node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
     "node_modules/eslint/node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -3268,23 +3517,12 @@
         "node": ">=8"
       }
     },
-    "node_modules/eslint/node_modules/type-fest": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/espree": {
       "version": "9.6.1",
       "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
       "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
         "acorn": "^8.9.0",
         "acorn-jsx": "^5.3.2",
@@ -3338,6 +3576,7 @@
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
       "dev": true,
+      "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3446,6 +3685,36 @@
       "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
       "dev": true
     },
+    "node_modules/fast-glob": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -3462,6 +3731,7 @@
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
       "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -3493,15 +3763,16 @@
       }
     },
     "node_modules/file-entry-cache": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
-      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "flat-cache": "^3.0.4"
+        "flat-cache": "^4.0.0"
       },
       "engines": {
-        "node": "^10.12.0 || >=12.0.0"
+        "node": ">=16.0.0"
       }
     },
     "node_modules/file-loader": {
@@ -3573,24 +3844,25 @@
       }
     },
     "node_modules/flat-cache": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
-      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "flatted": "^3.2.9",
-        "keyv": "^4.5.3",
-        "rimraf": "^3.0.2"
+        "keyv": "^4.5.4"
       },
       "engines": {
-        "node": "^10.12.0 || >=12.0.0"
+        "node": ">=16"
       }
     },
     "node_modules/flatted": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
       "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
-      "dev": true
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/follow-redirects": {
       "version": "1.15.6",
@@ -3684,7 +3956,8 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "devOptional": true
+      "optional": true,
+      "peer": true
     },
     "node_modules/fsevents": {
       "version": "2.3.3",
@@ -3753,7 +4026,8 @@
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "devOptional": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -3803,6 +4077,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/globals": {
+      "version": "15.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.12.0.tgz",
+      "integrity": "sha512-1+gLErljJFhbOVyaetcwJiJ4+eLe45S2E7P5UiZ9xGfeq3ATQf5DOv9G7MH3gGbKQLkzmNh2DxfZwLdw+j6oTQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -3826,7 +4113,8 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/has-property-descriptors": {
       "version": "1.0.2",
@@ -4006,7 +4294,8 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "devOptional": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -4016,7 +4305,8 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "devOptional": true
+      "optional": true,
+      "peer": true
     },
     "node_modules/ini": {
       "version": "2.0.0",
@@ -4130,6 +4420,7 @@
       "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
       "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -4338,7 +4629,8 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
@@ -4416,6 +4708,7 @@
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
       "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "json-buffer": "3.0.1"
       }
@@ -4717,6 +5010,30 @@
       "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
       "peer": true
     },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -4868,6 +5185,7 @@
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
       "devOptional": true,
+      "peer": true,
       "dependencies": {
         "wrappy": "1"
       }
@@ -4953,7 +5271,8 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "devOptional": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5043,6 +5362,58 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.2.6.tgz",
+      "integrity": "sha512-vIsR8JkDN5Ga2vAxqOE2cJj4VtsHnzpR1Fz30kClxlh0yCHfec6uoMeM3e/ddqmwFUejK3NlrcQa/shnpyT4hA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.47",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
@@ -5237,7 +5608,8 @@
           "type": "consulting",
           "url": "https://feross.org/support"
         }
-      ]
+      ],
+      "license": "MIT"
     },
     "node_modules/randombytes": {
       "version": "2.1.0",
@@ -5270,15 +5642,6 @@
         "throttleit": "^1.0.0"
       }
     },
-    "node_modules/requireindex": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz",
-      "integrity": "sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.5"
-      }
-    },
     "node_modules/requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -5305,6 +5668,7 @@
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -5317,21 +5681,6 @@
       "dev": true,
       "peer": true
     },
-    "node_modules/rimraf": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "dev": true,
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/rollup": {
       "version": "4.22.4",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.22.4.tgz",
@@ -5386,6 +5735,7 @@
           "url": "https://feross.org/support"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "queue-microtask": "^1.2.2"
       }
@@ -5453,7 +5803,8 @@
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
       "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "devOptional": true,
+      "optional": true,
+      "peer": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -5901,7 +6252,8 @@
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/throttleit": {
       "version": "1.0.1",
@@ -5969,6 +6321,19 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/ts-api-utils": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.0.tgz",
+      "integrity": "sha512-032cPxaEKwM+GT3vA5JXNzIaizx388rhsSW79vGRNGXfRRAdEAn2mvk36PvK5HnOchyWZ7afLEXqYCvPCrzuzQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.2.0"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
@@ -6021,11 +6386,11 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.4.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
-      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
-      "optional": true,
-      "peer": true,
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
+      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
+      "devOptional": true,
+      "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -6034,6 +6399,30 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/typescript-eslint": {
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.14.0.tgz",
+      "integrity": "sha512-K8fBJHxVL3kxMmwByvz8hNdBJ8a0YqKzKDX6jRlrjMuNXyd5T2V02HIq37+OiWXvUUOXgOOGiSSOh26Mh8pC3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "8.14.0",
+        "@typescript-eslint/parser": "8.14.0",
+        "@typescript-eslint/utils": "8.14.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/ua-parser-js": {
       "version": "1.0.37",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.37.tgz",
@@ -6313,10 +6702,11 @@
       "integrity": "sha512-9zjvACKE4W0kEb8OQtXzpizKhf6zfFOG/Z1TEUjSJn4Z4rintuAHo8y/FpCUhTWHMmPe8E+Fko+/tiXVM+5jOw=="
     },
     "node_modules/vue-eslint-parser": {
-      "version": "9.4.2",
-      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.2.tgz",
-      "integrity": "sha512-Ry9oiGmCAK91HrKMtCrKFWmSFWvYkpGglCeFAIqDdr9zdXmMMpJOmUJS7WWsW7fX81h6mwHmUZCQQ1E0PkSwYQ==",
+      "version": "9.4.3",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz",
+      "integrity": "sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "debug": "^4.3.4",
         "eslint-scope": "^7.1.1",
@@ -6337,10 +6727,11 @@
       }
     },
     "node_modules/vue-eslint-parser/node_modules/semver": {
-      "version": "7.6.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
-      "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
       "dev": true,
+      "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -6432,14 +6823,6 @@
         "vue": "^2.6.4"
       }
     },
-    "node_modules/vuex": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
-      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
-      "peerDependencies": {
-        "vue": "^2.0.0"
-      }
-    },
     "node_modules/watchpack": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz",
@@ -6682,7 +7065,8 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "devOptional": true
+      "devOptional": true,
+      "peer": true
     },
     "node_modules/xml-name-validator": {
       "version": "4.0.0",
diff --git a/package.json b/package.json
index f82d0bc1..a938e40e 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "cgi": "^0.3.1",
     "jquery": "^3.6.0",
     "moment": "^2.29.4",
+    "pinia": "^2.2.6",
     "ua-parser-js": "^1.0.1",
     "url-loader": "^4.1.1",
     "vite": "^5.2.11",
@@ -32,21 +33,26 @@
     "vue-cookies": "^1.7.4",
     "vue-router": "^3.5.2",
     "vue-scrolling-table": "^1.0.4",
-    "vuetify": "^2.7.2",
-    "vuex": "^3.6.0"
+    "vuetify": "^2.7.2"
   },
   "devDependencies": {
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.14.0",
     "@mdi/font": "^7.4.47",
+    "@types/eslint__js": "^8.42.3",
+    "@types/jquery": "^3.5.32",
     "@vue/test-utils": "^1.2.2",
     "cypress-file-upload": "^5.0.8",
     "deepmerge": "^4.3.1",
-    "eslint": "^8.57.0",
+    "eslint": "^9.14.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.26.0",
-    "eslint-plugin-vuetify": "^1.1.0",
+    "eslint-plugin-vue": "^9.31.0",
+    "globals": "^15.12.0",
     "prettier": "3.2.5",
     "sass": "~1.32",
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.14.0",
     "vue": "^2.7.0"
   },
   "bugs": {
diff --git a/src/app.js b/src/app.js
index 4fe74cbb..8ab33c1f 100644
--- a/src/app.js
+++ b/src/app.js
@@ -5,13 +5,16 @@ import vuetify from "./plugins/vuetify";
 import VueRouter from "vue-router";
 import VueCookies from "vue-cookies";
 import "./css/app.css";
+import { createPinia, PiniaVuePlugin } from "pinia";
 
-import store from "./stores/courseData";
 import BrowserSupportPlugin from "./plugins/browserSupport";
 
 Vue.use(VueCookies);
 Vue.use(VueRouter);
 Vue.use(BrowserSupportPlugin);
+Vue.use(PiniaVuePlugin);
+
+const pinia = createPinia();
 
 /** @type import("vue-router").RouteConfig[] */
 const routes = [
@@ -33,7 +36,7 @@ const app = new Vue({
   el: "#app",
   router,
   render: (h) => h(App),
-  store,
+  pinia,
 });
 
 if (window.Cypress) {
diff --git a/src/components/About.vue b/src/components/About.vue
index 1b3594ef..2697b66d 100644
--- a/src/components/About.vue
+++ b/src/components/About.vue
@@ -174,7 +174,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "vue";
+
+export default defineComponent({
   name: "AboutContent",
-};
+});
 </script>
diff --git a/src/components/Audit.vue b/src/components/Audit.vue
index 62e1a5f7..1fb0dfce 100644
--- a/src/components/Audit.vue
+++ b/src/components/Audit.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- useful for adding dropdown: https://vuejs.org/v2/guide/forms.html -->
 
-  <v-flex style="padding: 0px 18px 0px 18px; overflow: auto" data-cy="auditBox">
+  <v-col style="padding: 0px 18px 0px 18px; overflow: auto" data-cy="auditBox">
     <div style="display: flex; align-content: space-between; margin: 12px 0px">
       <v-autocomplete
         v-model="changeReqs"
@@ -34,18 +34,20 @@
       :activatable="false"
     >
       <template slot="label" slot-scope="{ item, leaf }">
-        <v-hover :disabled="!leaf || !canDrag(item)">
+        <v-hover :disabled="!leaf || !canDrag(store, item)">
           <div
             slot-scope="{ hover }"
             class="req-container"
             :class="{
               'elevation-3': hover,
-              'yellow lighten-3': isPetitioned(item) && !$vuetify.theme.dark,
-              'yellow darken-3': isPetitioned(item) && $vuetify.theme.dark,
-              'grey lighten-2': isIgnored(item) && !$vuetify.theme.dark,
-              'grey darken-2': isIgnored(item) && $vuetify.theme.dark,
+              'yellow lighten-3': isPetitioned(item) && !vuetify.theme.dark,
+              'yellow darken-3': isPetitioned(item) && vuetify.theme.dark,
+              'grey lighten-2': isIgnored(item) && !vuetify.theme.dark,
+              'grey darken-2': isIgnored(item) && vuetify.theme.dark,
             }"
-            :style="leaf && canDrag(item) ? 'cursor: grab' : 'cursor: pointer'"
+            :style="
+              leaf && canDrag(store, item) ? 'cursor: grab' : 'cursor: pointer'
+            "
             :data-cy="'auditItem' + item['list-id']"
           >
             <v-icon
@@ -66,7 +68,7 @@
                     : "mdi-minus"
               }}
             </v-icon>
-            <requirement
+            <Requirement
               :req="item"
               :is-leaf="leaf"
               @click.native="clickRequirement(item)"
@@ -109,23 +111,23 @@
             {{ capitalize(progressReq.threshold.criterion) }} Completed:
             {{ newManualProgress }}/{{ progressReq.threshold.cutoff }}
           </h3>
-          <v-layout justify-start style="width: 70%; margin: auto">
-            <v-flex shrink style="width: 3em; margin-right: 1em">
+          <v-row justify="start" style="width: 70%; margin: auto">
+            <v-col class="shrink" style="width: 3em; margin-right: 1em">
               <v-text-field
                 v-model="newManualProgress"
                 type="number"
                 @keyup.enter="updateManualProgress"
               />
-            </v-flex>
-            <v-flex>
+            </v-col>
+            <v-col>
               <v-slider
                 v-model="newManualProgress"
                 :max="progressReq.threshold.cutoff"
                 :min="0"
                 :step="1"
               />
-            </v-flex>
-          </v-layout>
+            </v-col>
+          </v-row>
         </v-card-text>
         <v-card-actions>
           <v-spacer />
@@ -260,286 +262,290 @@
         </div>
       </v-card>
     </v-dialog>
-  </v-flex>
+  </v-col>
 </template>
 
 <script>
-import Requirement from "./Requirement.vue";
-import classInfoMixin from "../mixins/classInfo.js";
-import courseLinksMixin from "./../mixins/courseLinks.js";
 import { defineComponent } from "vue";
 
 export default defineComponent({
   name: "AuditComponent",
-  components: {
-    requirement: Requirement,
+});
+</script>
+
+<script setup>
+import Requirement from "./Requirement.vue";
+import { canDrag } from "../mixins/classInfo.js";
+import { getCourseLinks } from "./../mixins/courseLinks.js";
+import { ref, computed } from "vue";
+import { useStore, useVuetify } from "../plugins/composition.js";
+
+const store = useStore();
+const vuetify = useVuetify();
+
+const props = defineProps({
+  selectedSubjects: {
+    type: Array,
+    required: true,
   },
-  mixins: [classInfoMixin, courseLinksMixin],
-  props: {
-    selectedSubjects: {
-      type: Array,
-      required: true,
-    },
-    selectedReqs: {
-      type: Array,
-      required: true,
-    },
-    reqTrees: {
-      type: Object,
-      required: true,
-    },
-    reqList: {
-      type: Array,
-      required: true,
-    },
-    progressOverrides: {
-      type: Object,
-      required: true,
-    },
+  selectedReqs: {
+    type: Array,
+    required: true,
   },
-  data: function () {
-    return {
-      tree: [],
-      viewDialog: false,
-      dialogReq: undefined,
-      progressDialog: false,
-      progressReq: undefined,
-      petitionDialog: false,
-      petitionReq: undefined,
-      petitionSelectCourses: [],
-      newManualProgress: 0,
-    };
+  reqTrees: {
+    type: Object,
+    required: true,
   },
-  computed: {
-    changeReqs: {
-      get: function () {
-        return this.selectedReqs;
-      },
-      set: function (newReqs) {
-        const currentReqs = this.selectedReqs;
-        if (currentReqs.length > newReqs.length) {
-          const diff = currentReqs.find((x) => !newReqs.includes(x));
-          this.$store.commit("removeReq", diff);
-        } else {
-          const newReq = newReqs[newReqs.length - 1];
-          this.$store.commit("addReq", newReq);
-        }
-      },
-    },
-    getCourses: function () {
-      const courses = this.reqList.slice(0);
-      const sortKey = "medium-title";
-      // NOTE: brute force way sorting the courses given the fields we have
-      courses.sort(function (c1, c2) {
-        const a = c1[sortKey].toLowerCase();
-        const b = c2[sortKey].toLowerCase();
-        if (
-          (a.includes("major") && b.includes("major")) ||
-          (a.includes("minor") && b.includes("minor"))
-        ) {
-          let n1 = a.split(" ")[0].split("-")[0];
-          let n2 = b.split(" ")[0].split("-")[0];
-          n1 = isNaN(n1) && !isNaN(n1.slice(0, -1)) ? n1.slice(0, -1) : n1;
-          n2 = isNaN(n2) && !isNaN(n2.slice(0, -1)) ? n2.slice(0, -1) : n2;
-          if (n1 === n2) return a.localeCompare(b);
-          return (!isNaN(n1) && !isNaN(n2)) || (isNaN(n1) && isNaN(n2))
-            ? n1 - n2
-            : !isNaN(n1)
-              ? -1
-              : 1;
-        } else if (a.includes("major") && b.includes("minor")) return -1;
-        else if (b.includes("major") && a.includes("minor")) return 1;
-        else if (a.includes("major") || a.includes("minor")) return -1;
-        else if (b.includes("major") || b.includes("minor")) return 1;
-        else return a.localeCompare(b);
-      });
-      return courses;
-    },
-    selectedTrees: function () {
-      return this.selectedReqs.map(function (req, index) {
-        if (req in this.reqTrees) {
-          return this.assignListIDs(
-            Object.assign({}, this.reqTrees[req]),
-            index,
-          );
-        } else {
-          return {
-            title: "loading...",
-            reqs: [],
-            uniqueKey: index,
-          };
-        }
-      }, this);
-    },
-    reqPASubstitution: {
-      get: function () {
-        const petitionReqPA =
-          this.$store.state.roads[this.$store.state.activeRoad].contents
-            .progressAssertions[this.petitionReq["list-id"]];
-        // Checks if unique key in progressAssert, if it is, searches for substitution key
-        if (petitionReqPA !== undefined) {
-          return petitionReqPA.substitutions;
-        } else {
-          return undefined;
-        }
-      },
-    },
-    reqPAIgnore: {
-      get: function () {
-        const petitionReqPA =
-          this.$store.state.roads[this.$store.state.activeRoad].contents
-            .progressAssertions[this.petitionReq["list-id"]];
-        if (petitionReqPA !== undefined) {
-          return petitionReqPA.ignore;
-        } else {
-          return false; // So checkbox properly updates when resetPetition is used
-        }
-      },
-      set: function (ignoreVal) {
-        this.$store.commit("setPAIgnore", {
-          uniqueKey: this.petitionReq["list-id"],
-          isIgnored: ignoreVal,
-        });
-      },
-    },
+  reqList: {
+    type: Array,
+    required: true,
   },
-  methods: {
-    fulfilledIcon: function (req) {
-      return req.fulfilled &&
-        (req.req !== undefined || req.sat_courses.length > 0)
-        ? "color: #00b300;"
-        : "";
-    },
-    reqInfo: function (event, req) {
-      event.preventDefault();
-      event.stopPropagation();
-      this.viewDialog = true;
-      this.dialogReq = req;
-    },
-    reqPetition: function (event, req) {
-      event.preventDefault();
-      event.stopPropagation();
-      this.petitionDialog = true;
-      this.petitionReq = req;
-    },
-    clickRequirement: function (item) {
-      if (item.req !== undefined) {
-        if (!item["plain-string"]) {
-          let usedReq = item.req;
-          if (usedReq.indexOf("GIR:") === 0) {
-            usedReq = usedReq.substring(4);
-          }
-          this.$store.commit("pushClassStack", usedReq);
-        } else {
-          this.startProgressDialog(item);
-        }
-      }
-    },
-    // gives each list and sublist an id
-    // progress overrides are a dictionary where the keys are these list ids and the values are the manual progress
-    // for example, the 3rd requirement of the 1st requirement of GIRs (CAL1) would have id gir.0.2
-    assignListIDs: function (req, index) {
-      if ("reqs" in req && "list-id" in req) {
-        let currentListID = req["list-id"];
-        if (currentListID.indexOf(".reql") >= 0) {
-          // if the requirement is top level, it will have .reql at the end and this needs to be removed
-          req["list-id"] = req["list-id"].substring(
-            0,
-            req["list-id"].indexOf(".reql"),
-          );
-          currentListID = req["list-id"];
-        }
-        req.uniqueKey = index + "-" + req["list-id"];
-        for (let r = 0; r < req.reqs.length; r++) {
-          // give each sub-requirement a list id of [parent list id].[index]
-          Object.assign(req.reqs[r], { "list-id": currentListID + "." + r });
-          // assign list ids to each of the children
-          req.reqs[r] = this.assignListIDs(req.reqs[r], index);
-        }
-      }
-      return req;
-    },
-    startProgressDialog: function (req) {
-      this.progressReq = Object.assign(
-        { threshold: { criterion: "subject", cutoff: 1, type: "GTE" } },
-        req,
-      );
-      this.progressDialog = true;
-      if (this.progressReq["list-id"] in this.progressOverrides) {
-        this.newManualProgress =
-          this.progressOverrides[this.progressReq["list-id"]];
-      }
-    },
-    capitalize: function (word) {
-      return word[0].toUpperCase() + word.substring(1);
-    },
-    updateManualProgress: function () {
-      if (this.progressReq["list-id"] !== undefined) {
-        this.$store.commit("updateProgress", {
-          listID: this.progressReq["list-id"],
-          progress: this.newManualProgress,
-        });
-      }
-      this.progressReq = undefined;
-      this.progressDialog = false;
-      this.newManualProgress = 0;
-    },
-    percentage: function (req) {
-      return req.fulfilled
-        ? "#00b300"
-        : req.percent_fulfilled > 15
-          ? "#efce15"
-          : "#ef8214";
-    },
-    deleteReq: function (req) {
-      const reqName = req["list-id"];
-      this.$store.commit("removeReq", reqName);
-    },
-    submitPetition: function () {
-      this.$store.commit("setPASubstitutions", {
-        uniqueKey: this.petitionReq["list-id"],
-        newReqs: this.petitionSelectCourses,
-      });
-      this.petitionSelectCourses = [];
-    },
-    clearPetition: function () {
-      this.$store.commit(
-        "removeProgressAssertion",
-        this.petitionReq["list-id"],
-      );
-    },
-    isPetitioned: function (req) {
-      if (
-        req["list-id"] in
-        this.$store.state.roads[this.$store.state.activeRoad].contents
-          .progressAssertions
-      ) {
-        return !(
-          "ignore" in
-          this.$store.state.roads[this.$store.state.activeRoad].contents
-            .progressAssertions[req["list-id"]]
-        );
-      } else {
-        return false;
-      }
-    },
-    isIgnored: function (req) {
-      if (
-        req["list-id"] in
-        this.$store.state.roads[this.$store.state.activeRoad].contents
-          .progressAssertions
-      ) {
-        return (
-          "ignore" in
-          this.$store.state.roads[this.$store.state.activeRoad].contents
-            .progressAssertions[req["list-id"]]
-        );
-      } else {
-        return false;
-      }
-    },
+  progressOverrides: {
+    type: Object,
+    required: true,
+  },
+});
+
+const tree = ref([]);
+const viewDialog = ref(false);
+const dialogReq = ref(undefined);
+const progressDialog = ref(false);
+const progressReq = ref(undefined);
+const petitionDialog = ref(false);
+const petitionReq = ref(undefined);
+const petitionSelectCourses = ref([]);
+const newManualProgress = ref(0);
+
+const changeReqs = computed({
+  get: () => props.selectedReqs,
+  set: (newReqs) => {
+    const currentReqs = props.selectedReqs;
+    if (currentReqs.length > newReqs.length) {
+      const diff = currentReqs.find((x) => !newReqs.includes(x));
+      store.removeReq(diff);
+    } else {
+      const newReq = newReqs[newReqs.length - 1];
+      store.addReq(newReq);
+    }
   },
 });
+
+const getCourses = computed(() => {
+  const courses = props.reqList.slice(0);
+  const sortKey = "medium-title";
+  // NOTE: brute force way sorting the courses given the fields we have
+  courses.sort(function (c1, c2) {
+    const a = c1[sortKey].toLowerCase();
+    const b = c2[sortKey].toLowerCase();
+    if (
+      (a.includes("major") && b.includes("major")) ||
+      (a.includes("minor") && b.includes("minor"))
+    ) {
+      let n1 = a.split(" ")[0].split("-")[0];
+      let n2 = b.split(" ")[0].split("-")[0];
+      n1 = isNaN(n1) && !isNaN(n1.slice(0, -1)) ? n1.slice(0, -1) : n1;
+      n2 = isNaN(n2) && !isNaN(n2.slice(0, -1)) ? n2.slice(0, -1) : n2;
+      if (n1 === n2) return a.localeCompare(b);
+      return (!isNaN(n1) && !isNaN(n2)) || (isNaN(n1) && isNaN(n2))
+        ? n1 - n2
+        : !isNaN(n1)
+          ? -1
+          : 1;
+    } else if (a.includes("major") && b.includes("minor")) return -1;
+    else if (b.includes("major") && a.includes("minor")) return 1;
+    else if (a.includes("major") || a.includes("minor")) return -1;
+    else if (b.includes("major") || b.includes("minor")) return 1;
+    else return a.localeCompare(b);
+  });
+  return courses;
+});
+
+const selectedTrees = computed(() => {
+  return props.selectedReqs.map((req, index) => {
+    if (req in props.reqTrees) {
+      return assignListIDs(Object.assign({}, props.reqTrees[req]), index);
+    } else {
+      return {
+        title: "loading...",
+        reqs: [],
+        uniqueKey: index,
+      };
+    }
+  });
+});
+
+const reqPASubstitution = computed({
+  get: () => {
+    const petitionReqPA =
+      store.roads[store.activeRoad].contents.progressAssertions[
+        petitionReq.value["list-id"]
+      ];
+    // Checks if unique key in progressAssert, if it is, searches for substitution key
+    if (petitionReqPA !== undefined) {
+      return petitionReqPA.substitutions;
+    } else {
+      return undefined;
+    }
+  },
+});
+
+const reqPAIgnore = computed({
+  get: () => {
+    const petitionReqPA =
+      store.roads[store.activeRoad].contents.progressAssertions[
+        petitionReq.value["list-id"]
+      ];
+    if (petitionReqPA !== undefined) {
+      return petitionReqPA.ignore;
+    } else {
+      return false; // So checkbox properly updates when resetPetition is used
+    }
+  },
+  set: (ignoreVal) => {
+    store.setPAIgnore({
+      uniqueKey: petitionReq.value["list-id"],
+      isIgnored: ignoreVal,
+    });
+  },
+});
+
+const fulfilledIcon = (req) => {
+  return req.fulfilled && (req.req !== undefined || req.sat_courses.length > 0)
+    ? "color: #00b300;"
+    : "";
+};
+
+const reqInfo = (event, req) => {
+  event.preventDefault();
+  event.stopPropagation();
+  viewDialog.value = true;
+  dialogReq.value = req;
+};
+
+const reqPetition = (event, req) => {
+  event.preventDefault();
+  event.stopPropagation();
+  petitionDialog.value = true;
+  petitionReq.value = req;
+};
+
+const clickRequirement = (item) => {
+  if (item.req !== undefined) {
+    if (!item["plain-string"]) {
+      let usedReq = item.req;
+      if (usedReq.indexOf("GIR:") === 0) {
+        usedReq = usedReq.substring(4);
+      }
+      store.pushClassStack(usedReq);
+    } else {
+      startProgressDialog(item);
+    }
+  }
+};
+
+// gives each list and sublist an id
+// progress overrides are a dictionary where the keys are these list ids and the values are the manual progress
+// for example, the 3rd requirement of the 1st requirement of GIRs (CAL1) would have id gir.0.2
+const assignListIDs = (req, index) => {
+  if ("reqs" in req && "list-id" in req) {
+    let currentListID = req["list-id"];
+    if (currentListID.indexOf(".reql") >= 0) {
+      // if the requirement is top level, it will have .reql at the end and this needs to be removed
+      req["list-id"] = req["list-id"].substring(
+        0,
+        req["list-id"].indexOf(".reql"),
+      );
+      currentListID = req["list-id"];
+    }
+    req.uniqueKey = index + "-" + req["list-id"];
+    for (let r = 0; r < req.reqs.length; r++) {
+      // give each sub-requirement a list id of [parent list id].[index]
+      Object.assign(req.reqs[r], { "list-id": currentListID + "." + r });
+      // assign list ids to each of the children
+      req.reqs[r] = assignListIDs(req.reqs[r], index);
+    }
+  }
+  return req;
+};
+
+const startProgressDialog = (req) => {
+  progressReq.value = Object.assign(
+    { threshold: { criterion: "subject", cutoff: 1, type: "GTE" } },
+    req,
+  );
+  progressDialog.value = true;
+  if (progressReq.value["list-id"] in props.progressOverrides) {
+    newManualProgress.value =
+      props.progressOverrides[progressReq.value["list-id"]];
+  }
+};
+
+const capitalize = (word) => {
+  return word[0].toUpperCase() + word.substring(1);
+};
+
+const updateManualProgress = () => {
+  if (progressReq.value["list-id"] !== undefined) {
+    store.updateProgress({
+      listID: progressReq.value["list-id"],
+      progress: newManualProgress.value,
+    });
+  }
+  progressReq.value = undefined;
+  progressDialog.value = false;
+  newManualProgress.value = 0;
+};
+
+const percentage = (req) => {
+  return req.fulfilled
+    ? "#00b300"
+    : req.percent_fulfilled > 15
+      ? "#efce15"
+      : "#ef8214";
+};
+
+const deleteReq = (req) => {
+  const reqName = req["list-id"];
+  store.removeReq(reqName);
+};
+
+const submitPetition = () => {
+  store.setPASubstitutions({
+    uniqueKey: petitionReq.value["list-id"],
+    newReqs: petitionSelectCourses.value,
+  });
+  petitionSelectCourses.value = [];
+};
+
+const clearPetition = () => {
+  store.removeProgressAssertion(petitionReq.value["list-id"]);
+};
+
+const isPetitioned = (req) => {
+  if (
+    req["list-id"] in store.roads[store.activeRoad].contents.progressAssertions
+  ) {
+    return !(
+      "ignore" in
+      store.roads[store.activeRoad].contents.progressAssertions[req["list-id"]]
+    );
+  } else {
+    return false;
+  }
+};
+
+const isIgnored = (req) => {
+  if (
+    req["list-id"] in store.roads[store.activeRoad].contents.progressAssertions
+  ) {
+    return (
+      "ignore" in
+      store.roads[store.activeRoad].contents.progressAssertions[req["list-id"]]
+    );
+  } else {
+    return false;
+  }
+};
 </script>
 
 <style scoped>
diff --git a/src/components/Auth.vue b/src/components/Auth.vue
index c1a299d1..ad1d5a92 100644
--- a/src/components/Auth.vue
+++ b/src/components/Auth.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-layout align-center grow>
+  <v-row class="grow" align="center" no-gutters>
     <v-tooltip v-if="!loggedIn" bottom>
       <template #activator="{ on }">
         <v-btn
@@ -60,19 +60,34 @@
     <div v-if="currentlySaving || gettingUserData">
       <v-progress-circular :size="18" indeterminate />
     </div>
-  </v-layout>
+  </v-row>
 </template>
 
 <script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "AuthComponent",
+});
+</script>
+
+<script setup>
 import axios from "axios";
 import moment from "moment";
 import UAParser from "ua-parser-js";
-import simpleSSMixin from "./../mixins/sanitizeSubjects.js";
-import { defineComponent } from "vue";
+import { getSimpleSelectedSubjects } from "./../mixins/sanitizeSubjects.js";
+import { ref, computed, watch, onMounted } from "vue";
+import { flatten } from "../plugins/browserSupport.js";
+import {
+  useStore,
+  useCookies,
+  useRoute,
+  useRouter,
+} from "./../plugins/composition.js";
 
 const DATE_FORMAT = "YYYY-MM-DDTHH:mm:ss.SSS000Z";
 
-function getQueryObject() {
+const getQueryObject = () => {
   const query = window.location.search.substring(1);
   const vars = query.split("&");
   const queryObject = {};
@@ -81,744 +96,716 @@ function getQueryObject() {
     queryObject[keyValuePair[0]] = keyValuePair[1];
   }
   return queryObject;
-}
+};
 
-export default defineComponent({
-  name: "AuthComponent",
-  components: {},
-  mixins: [simpleSSMixin],
-  props: {
-    justLoaded: {
-      type: Boolean,
-      required: true,
-    },
-    conflictInfo: {
-      type: Object,
-      default: function () {
-        return {};
-      },
-    },
+const props = defineProps({
+  justLoaded: {
+    type: Boolean,
+    required: true,
   },
-  data: function () {
-    return {
-      accessInfo: undefined,
-      loggedIn: false,
-      newRoads: [],
-      saveWarnings: [],
-      gettingUserData: false,
-      currentlySaving: false,
-      tabID: Math.floor(Math.random() * 16 ** 10).toString(16),
-    };
+  conflictInfo: {
+    type: Object,
+    default: () => ({}),
   },
-  computed: {
-    activeRoad() {
-      return this.$store.state.activeRoad;
-    },
-    cookiesAllowed() {
-      return this.$store.state.cookiesAllowed;
-    },
-    roads() {
-      return this.$store.state.roads;
-    },
-    saveColor: function () {
-      if (!this.cookiesAllowed && !this.loggedIn) {
-        return "gray";
-      }
-      return this.saveWarnings.length ? "warning" : "primary";
-    },
-    saveIcon: function () {
-      return this.saveWarnings.length ? "mdi-alert" : "mdi-content-save";
-    },
-  },
-  watch: {
-    cookiesAllowed(newCA) {
-      if (newCA) {
-        this.$cookies.set("newRoads", this.getNewRoadData());
-        if (this.loggedIn) {
-          this.$cookies.set("accessInfo", this.accessInfo, "3d");
-        }
-        this.setTabID();
-      }
-    },
-    loggedIn(newLoggedIn) {
-      this.$store.commit("setLoggedIn", newLoggedIn);
-      if (newLoggedIn && this.$cookies.get("has_set_year") !== "true") {
-        const email = this.accessInfo.academic_id;
-        const endPoint = email.indexOf("@");
-        const kerb = email.slice(0, endPoint);
-        axios
-          .get(`${import.meta.env.VITE_URL}/cgi-bin/people.py?kerb=${kerb}`)
-          .then((response) => {
-            if (response.status !== 200) {
-              console.log("Failed to find user year");
-            } else {
-              const year = response.data.current_semester
-                ? Math.floor(response.data.current_semester / 2) + 1
-                : undefined;
-              if (year === undefined) {
-                console.log("Failed to find user year");
-              } else {
-                this.changeSemester(year);
-                console.log("setting year to " + year);
-              }
-            }
-          });
-      }
-    },
-  },
-  mounted() {
-    window.setLocationHref = function (url) {
-      window.location.href = url;
-    };
+});
+const emit = defineEmits(["conflict", "resolve-conflict"]);
 
-    if (this.$cookies.isKey("newRoads")) {
-      const newRoads = this.$cookies.get("newRoads");
-      if (Object.keys(newRoads).length) {
-        for (const roadID in newRoads) {
-          if (!Array.isArray(newRoads[roadID].contents.selectedSubjects[0])) {
-            newRoads[roadID].contents.selectedSubjects =
-              this.getSimpleSelectedSubjects(
-                newRoads[roadID].contents.selectedSubjects,
-              );
-          }
-          if (newRoads[roadID].contents.progressAssertions === undefined) {
-            newRoads[roadID].contents.progressAssertions = {};
-          }
-        }
-        if (this.justLoaded) {
-          if (!(this.activeRoad in newRoads)) {
-            this.$store.commit("setActiveRoad", Object.keys(newRoads)[0]);
-          }
-          this.$store.commit("setRoads", newRoads);
-        } else {
-          this.$store.commit("setRoads", Object.assign(newRoads, this.roads));
-        }
-        this.newRoads = Object.keys(newRoads);
-      }
-      this.$store.commit("allowCookies");
+const store = useStore();
+const cookies = useCookies();
+const route = useRoute();
+const router = useRouter();
+
+const accessInfo = ref(undefined);
+const loggedIn = ref(false);
+const newRoadsRef = ref([]);
+const saveWarnings = ref([]);
+const gettingUserData = ref(false);
+const currentlySaving = ref(false);
+const tabID = ref(Math.floor(Math.random() * 16 ** 10).toString(16));
+
+const activeRoad = computed(() => store.activeRoad);
+const cookiesAllowed = computed(() => store.cookiesAllowed);
+const roads = computed(() => store.roads);
+const saveColor = computed(() => {
+  if (!cookiesAllowed.value && !loggedIn.value) {
+    return "gray";
+  }
+  return saveWarnings.value.length ? "warning" : "primary";
+});
+const saveIcon = computed(() =>
+  saveWarnings.value.length ? "mdi-alert" : "mdi-content-save",
+);
+
+watch(cookiesAllowed, (newCA) => {
+  if (newCA) {
+    cookies.set("newRoads", getNewRoadData());
+    if (loggedIn.value) {
+      cookies.set("accessInfo", accessInfo.value, "3d");
     }
+    setTabID();
+  }
+});
 
-    if (this.$cookies.isKey("accessInfo")) {
-      this.accessInfo = this.$cookies.get("accessInfo");
-      this.loggedIn = true;
-      this.$store.commit("allowCookies");
-      this.verify().then(() => {
-        this.getUserData();
+watch(loggedIn, (newLoggedIn) => {
+  store.setLoggedIn(newLoggedIn);
+  if (newLoggedIn && cookies.get("has_set_year") !== "true") {
+    const email = accessInfo.value.academic_id;
+    const endPoint = email.indexOf("@");
+    const kerb = email.slice(0, endPoint);
+    axios
+      .get(`${import.meta.env.VITE_URL}/cgi-bin/people.py?kerb=${kerb}`)
+      .then((response) => {
+        if (response.status !== 200) {
+          console.log("Failed to find user year");
+        } else {
+          const year = response.data.current_semester
+            ? Math.floor(response.data.current_semester / 2) + 1
+            : undefined;
+          if (year === undefined) {
+            console.log("Failed to find user year");
+          } else {
+            changeSemester(year);
+            console.log("setting year to " + year);
+          }
+        }
       });
-    }
+  }
+});
 
-    this.setTabID();
+onMounted(() => {
+  window.setLocationHref = function (url) {
+    window.location.href = url;
+  };
 
-    window.onbeforeunload = function () {
-      if (this.cookiesAllowed) {
-        const tabID = sessionStorage.tabID;
-        let tabs = [];
-        if (this.$cookies.isKey("tabs")) {
-          tabs = this.$cookies.get("tabs").ids;
+  if (cookies.isKey("newRoads")) {
+    const newRoads = cookies.get("newRoads");
+    if (Object.keys(newRoads).length) {
+      for (const roadID in newRoads) {
+        if (!Array.isArray(newRoads[roadID].contents.selectedSubjects[0])) {
+          newRoads[roadID].contents.selectedSubjects =
+            this.getSimpleSelectedSubjects(
+              newRoads[roadID].contents.selectedSubjects,
+            );
         }
-        const tabIndex = tabs.indexOf(tabID);
-        tabs.splice(tabIndex, 1);
-        if (tabs.length) {
-          this.$cookies.set("tabs", { ids: tabs });
-        } else {
-          this.$cookies.remove("tabs");
+        if (newRoads[roadID].contents.progressAssertions === undefined) {
+          newRoads[roadID].contents.progressAssertions = {};
         }
       }
-      if (this.currentlySaving) {
-        return "Are you sure you want to leave?  Your roads are not saved.";
+      if (props.justLoaded) {
+        if (!(activeRoad.value in newRoads)) {
+          store.setActiveRoad(Object.keys(newRoads)[0]);
+        }
+        store.setRoads(newRoads);
+      } else {
+        store.setRoads(Object.assign(newRoads, roads.value));
       }
-    }.bind(this);
+      newRoadsRef.value = Object.keys(newRoads);
+    }
+    store.allowCookies();
+  }
 
-    this.attemptLogin();
-    // window.cookies=this.$cookies;
-  },
-  methods: {
-    loginUser: function () {
-      window.setLocationHref(
-        `${import.meta.env.VITE_FIREROAD_URL}/login/?redirect=${import.meta.env.VITE_URL}`,
-      );
-      if (this.cookiesAllowed) {
-        this.$cookies.set("hasLoggedIn", true);
+  if (cookies.isKey("accessInfo")) {
+    accessInfo.value = cookies.get("accessInfo");
+    loggedIn.value = true;
+    store.allowCookies();
+    verify().then(() => {
+      getUserData();
+    });
+  }
+
+  setTabID();
+
+  window.onbeforeunload = () => {
+    if (cookiesAllowed.value) {
+      const tabID = sessionStorage.tabID;
+      let tabs = [];
+      if (cookies.isKey("tabs")) {
+        tabs = cookies.get("tabs").ids;
       }
-    },
-    logoutUser: function () {
-      this.$cookies.remove("accessInfo");
-      if (this.cookiesAllowed) {
-        this.$cookies.set("hasLoggedIn", false);
+      const tabIndex = tabs.indexOf(tabID);
+      tabs.splice(tabIndex, 1);
+      if (tabs.length) {
+        cookies.set("tabs", { ids: tabs });
+      } else {
+        cookies.remove("tabs");
       }
-      localStorage.clear();
-      this.loggedIn = false;
-      this.accessInfo = undefined;
-      window.location.reload();
-    },
-    verify: function () {
-      const headerList = {
-        headers: {
-          Authorization: "Bearer " + this.accessInfo.access_token,
-        },
-      };
-      const currentMonth = new Date().getMonth();
-      return axios
-        .get(import.meta.env.VITE_FIREROAD_URL + "/verify/", headerList)
-        .then(
-          function (verifyResponse) {
-            if (verifyResponse.data.success) {
-              this.$store.commit(
-                "setCurrentSemester",
-                verifyResponse.data.current_semester -
-                  (currentMonth === 4 ? 1 : 0),
-              );
-              return verifyResponse.data;
-            } else {
-              this.logoutUser();
-              return Promise.reject(new Error("Token not valid"));
-            }
-          }.bind(this),
-        )
-        .catch(function (err) {
-          this.logoutUser();
-          return Promise.reject(err);
-        });
-    },
-    doSecure: function (axiosFunc, link, params) {
-      if (this.loggedIn && this.accessInfo !== undefined) {
-        const headerList = {
-          headers: {
-            Authorization: "Bearer " + this.accessInfo.access_token,
-          },
-        };
-        return params
-          ? axiosFunc(
-              import.meta.env.VITE_FIREROAD_URL + link,
-              params,
-              headerList,
-            )
-          : axiosFunc(import.meta.env.VITE_FIREROAD_URL + link, headerList);
+    }
+    if (currentlySaving.value) {
+      return "Are you sure you want to leave?  Your roads are not saved.";
+    }
+  };
+
+  attemptLogin();
+  // window.cookies=this.$cookies;
+});
+
+const loginUser = () => {
+  window.setLocationHref(
+    `${import.meta.env.VITE_FIREROAD_URL}/login/?redirect=${import.meta.env.VITE_URL}`,
+  );
+  if (cookiesAllowed.value) {
+    cookies.set("hasLoggedIn", true);
+  }
+};
+
+const logoutUser = () => {
+  cookies.remove("accessInfo");
+  if (cookiesAllowed.value) {
+    cookies.set("hasLoggedIn", false);
+  }
+  localStorage.clear();
+  loggedIn.value = false;
+  accessInfo.value = undefined;
+  window.location.reload();
+};
+
+const verify = () => {
+  const headerList = {
+    headers: {
+      Authorization: "Bearer " + accessInfo.value.access_token,
+    },
+  };
+  const currentMonth = new Date().getMonth();
+  return axios
+    .get(import.meta.env.VITE_FIREROAD_URL + "/verify/", headerList)
+    .then((verifyResponse) => {
+      if (verifyResponse.data.success) {
+        store.setCurrentSemester(
+          verifyResponse.data.current_semester - (currentMonth === 4 ? 1 : 0),
+        );
+        return verifyResponse.data;
       } else {
-        return Promise.reject(new Error("No auth information"));
+        logoutUser();
+        return Promise.reject(new Error("Token not valid"));
       }
-    },
-    getSecure: function (link) {
-      return this.doSecure(axios.get, link, false);
-    },
-    postSecure: function (link, params) {
-      return this.doSecure(axios.post, link, params);
-    },
-    retrieveRoad: function (roadID) {
-      const _this = this;
-      this.gettingUserData = true;
-      return this.getSecure("/sync/roads/?id=" + roadID).then(
-        function (roadData) {
-          if (roadData.status === 200 && roadData.data.success) {
-            roadData.data.file.downloaded = moment().format(DATE_FORMAT);
-            roadData.data.file.changed = moment().format(DATE_FORMAT);
-          }
+    })
+    .catch((err) => {
+      logoutUser();
+      return Promise.reject(err);
+    });
+};
 
-          _this.sanitizeRoad(roadData.data.file);
+const doSecure = (axiosFunc, link, params) => {
+  if (loggedIn.value && accessInfo.value !== undefined) {
+    const headerList = {
+      headers: {
+        Authorization: "Bearer " + accessInfo.value.access_token,
+      },
+    };
+    return params
+      ? axiosFunc(import.meta.env.VITE_FIREROAD_URL + link, params, headerList)
+      : axiosFunc(import.meta.env.VITE_FIREROAD_URL + link, headerList);
+  } else {
+    return Promise.reject(new Error("No auth information"));
+  }
+};
 
-          _this.$store.commit("setRoad", {
-            id: roadID,
-            road: roadData.data.file,
-            ignoreSet: true,
-          });
+const getSecure = (link) => {
+  return doSecure(axios.get, link, false);
+};
 
-          _this.$store.commit("setRetrieved", roadID);
+const postSecure = (link, params) => {
+  return doSecure(axios.post, link, params);
+};
 
-          _this.$store.dispatch("waitAndMigrateOldSubjects", roadID);
+const retrieveRoad = (roadID) => {
+  gettingUserData.value = true;
+  return getSecure("/sync/roads/?id=" + roadID).then((roadData) => {
+    if (roadData.status === 200 && roadData.data.success) {
+      roadData.data.file.downloaded = moment().format(DATE_FORMAT);
+      roadData.data.file.changed = moment().format(DATE_FORMAT);
+    }
 
-          _this.gettingUserData = false;
-          return roadData;
-        },
-      );
-    },
-    sanitizeRoad: function (road) {
-      // sanitize subject_id
-      const newss = road.contents.selectedSubjects.map((s) => {
-        if ("id" in s) {
-          s.subject_id = s.id;
-          delete s.id;
-        }
-        return s;
-      });
+    sanitizeRoad(roadData.data.file);
 
-      road.contents.selectedSubjects = newss;
+    store.setRoad({
+      id: roadID,
+      road: roadData.data.file,
+      ignoreSet: true,
+    });
 
-      // convert selected subjects to more convenient format
-      road.contents.selectedSubjects = this.getSimpleSelectedSubjects(
-        road.contents.selectedSubjects,
-      );
-      // sanitize progressOverrides
-      if (road.contents.progressOverrides === undefined) {
-        road.contents.progressOverrides = {};
-      }
-      // sanitize progressAssertions
-      if (road.contents.progressAssertions === undefined) {
-        road.contents.progressAssertions = {};
-      }
-    },
-    getUserData: function () {
-      this.gettingUserData = true;
-      this.getSecure("/sync/roads/")
-        .then(function (response) {
-          if (response.status === 200 && response.data.success) {
-            return response.data.files;
-          } else {
-            return Promise.reject(
-              new Error("sync request not successfull in getUserData"),
-            );
-          }
-        })
-        .then(
-          function (files) {
-            this.renumberRoads(files);
-            for (let i = 0; i < this.newRoads.length; i++) {
-              this.saveRemote(this.newRoads[i]);
-            }
-            const fileKeys = Object.keys(files);
-            for (let i = 0; i < fileKeys.length; i++) {
-              const blankRoad = {
-                downloaded: moment().format(DATE_FORMAT),
-                changed: files[fileKeys[i]].changed,
-                name: files[fileKeys[i]].name,
-                agent: files[fileKeys[i]].agent,
-                contents: {
-                  coursesOfStudy: ["girs"],
-                  selectedSubjects: Array.from(Array(16), () => []),
-                  progressOverrides: {},
-                  progressAssertions: {},
-                },
-              };
-              this.$store.commit("setRoad", {
-                id: fileKeys[i],
-                road: blankRoad,
-                ignoreSet: true,
-              });
-            }
-            if (this.justLoaded && fileKeys.length > 0) {
-              this.$store.commit("deleteRoad", "$defaultroad$");
-            }
-            if (fileKeys.includes(this.$route.params.road)) {
-              this.$store.commit("setActiveRoad", this.$route.params.road);
-            } else {
-              // Redirect to first road if road cannot be found
-              this.$store.commit("setActiveRoad", Object.keys(this.roads)[0]);
-              this.$router.push({
-                path: `/road/${Object.keys(this.roads)[0]}`,
-              });
-            }
-            // Set list of unretrieved roads to all but first road ID
-            this.$store.commit("setUnretrieved", fileKeys);
-            if (fileKeys.length) {
-              // Retrieves based on url and defaults to first road if unable to find it
-              if (fileKeys.includes(this.$route.params.road)) {
-                return this.retrieveRoad(this.$route.params.road);
-              } else {
-                return this.retrieveRoad(fileKeys[0]);
-              }
-            }
-          }.bind(this),
-        )
-        .then(
-          function () {
-            this.gettingUserData = false;
-          }.bind(this),
-        )
-        .catch(
-          function (err) {
-            alert(err);
-            this.gettingUserData = false;
-            if (err === "Token not valid") {
-              alert("Your token has expired.  Please log in again.");
-            }
-            this.logoutUser();
-          }.bind(this),
-        );
-    },
+    store.setRetrieved(roadID);
 
-    renumber: function (name, otherNames) {
-      let newName;
-      let copyIndex = 2;
-      while (newName === undefined) {
-        const copyName = name + " (" + copyIndex + ")";
-        if (otherNames.indexOf(copyName) === -1) {
-          newName = copyName;
-        }
-        copyIndex++;
-      }
-      return newName;
-    },
-    renumberRoads: function (cloudFiles) {
-      const cloudRoads = Object.keys(cloudFiles).map((id) => cloudFiles[id]);
-      const cloudNames = cloudRoads.map(function (cr) {
-        try {
-          return cr.name;
-        } catch (err) {
-          return undefined;
-        }
-      });
-      for (const roadID in this.roads) {
-        const localName = this.roads[roadID].name;
-        if (cloudNames.indexOf(localName) >= 0) {
-          const renumberedName = this.renumber(localName, cloudNames);
-          this.$store.commit("setRoadName", {
-            id: roadID,
-            name: renumberedName,
-          });
-        }
-      }
-    },
+    store.waitAndMigrateOldSubjects(roadID);
 
-    getAuthorizationToken: function (code) {
-      axios
-        .get(import.meta.env.VITE_FIREROAD_URL + "/fetch_token/?code=" + code)
-        .then(
-          function (response) {
-            if (response.data.success) {
-              if (this.data.cookiesAllowed) {
-                this.data.$cookies.set(
-                  "accessInfo",
-                  response.data.access_info,
-                  "3d",
-                );
-              }
-              this.data.accessInfo = response.data.access_info;
-              this.data.verify();
-              this.data.loggedIn = true;
-              this.data.getUserData();
-            }
-          }.bind({ data: this }),
-        );
-    },
+    gettingUserData.value = false;
+    return roadData;
+  });
+};
 
-    attemptLogin: function () {
-      const queryObject = getQueryObject();
-      if ("code" in queryObject) {
-        const code = queryObject.code;
-        window.history.pushState(
-          "CourseRoad Home",
-          "CourseRoad Home",
-          "./#" + this.activeRoad,
-        );
-        this.getAuthorizationToken(code);
-      } else if (
-        this.$cookies.get("hasLoggedIn") === "true" &&
-        !this.loggedIn
-      ) {
-        this.loginUser();
-      }
-    },
-    save: function (roadID) {
-      if (this.loggedIn) {
-        this.saveRemote(roadID);
-      } else {
-        this.saveLocal();
-      }
-    },
-    saveRemote: function (roadID, override) {
-      if (override === undefined) {
-        override = false;
-      }
-      this.currentlySaving = true;
-      this.saveWarnings = [];
-      const assignKeys = { override, agent: this.getAgent() };
-      if (!roadID.includes("$")) {
-        assignKeys.id = roadID;
-      }
-      const roadSubjects = this.flatten(
-        this.roads[roadID].contents.selectedSubjects,
-      );
-      const formattedRoadContents = Object.assign(
-        {
-          coursesOfStudy: ["girs"],
-          progressOverrides: [],
-          progressAssertions: {},
-        },
-        this.roads[roadID].contents,
-        { selectedSubjects: roadSubjects },
-      );
-      const roadToSend = {};
-      Object.assign(
-        roadToSend,
-        this.roads[roadID],
-        { contents: formattedRoadContents },
-        assignKeys,
-      );
-      const savePromise = this.postSecure("/sync/sync_road/", roadToSend).then(
-        function (response) {
-          if (response.status !== 200) {
-            return Promise.reject(
-              new Error("Unable to save road " + this.oldid),
-            );
-          } else {
-            const newid =
-              response.data.id !== undefined ? response.data.id : this.oldid;
-            if (response.data.success === false) {
-              this.data.saveWarnings.push({
-                id: newid,
-                error: response.data.error_msg,
-                name: this.data.roads[this.oldid].name,
-              });
-            }
-            if (response.data.result === "conflict") {
-              const conflictInfo = {
-                id: this.oldid,
-                other_name: response.data.other_name,
-                other_agent: response.data.other_agent,
-                other_date: response.data.other_date,
-                other_contents: response.data.other_contents,
-                this_agent: response.data.this_agent,
-                this_date: response.data.this_date,
-              };
-              this.data.$store.commit("setRoadProp", {
-                id: this.oldid,
-                prop: "agent",
-                value: this.data.getAgent(),
-                ignoreSet: true,
-              });
-              this.data.$emit("conflict", conflictInfo);
-
-              return Promise.resolve({ oldid: this.oldid, state: "same" });
-            } else if (response.data.result === "update_local") {
-              alert(
-                "Server has more recent edits.  Overriding local road.  If this is unexpected, check that your computer clock is accurate.",
-              );
-
-              const updatedRoad = {
-                downloaded: moment().format(DATE_FORMAT),
-                changed: response.data.changed,
-                name: response.data.name,
-                agent: this.data.getAgent(),
-                contents: response.data.contents,
-              };
-
-              this.data.sanitizeRoad(updatedRoad);
-
-              this.data.$store.commit("setRoad", {
-                id: this.oldid,
-                road: updatedRoad,
-                ignoreSet: false,
-              });
+const sanitizeRoad = (road) => {
+  // sanitize subject_id
+  const newss = road.contents.selectedSubjects.map((s) => {
+    if ("id" in s) {
+      s.subject_id = s.id;
+      delete s.id;
+    }
+    return s;
+  });
 
-              return Promise.resolve({
-                oldid: this.oldid,
-                newid: response.data.id,
-                state: "same",
-              });
-            } else {
-              this.data.$store.commit("setRoadProp", {
-                id: this.oldid,
-                prop: "downloaded",
-                value: moment().format(DATE_FORMAT),
-                ignoreSet: true,
-              });
+  road.contents.selectedSubjects = newss;
 
-              if (response.data.id !== undefined) {
-                // note: code moved to app.vue for reset id
-                // this is to fix a problem where the activeroad gets reset to the first one
-                // i suspect this is because the three events required were not happening
-                // in the correct order or something
-                if (this.oldid !== response.data.id.toString()) {
-                  this.data.$store.commit("resetID", {
-                    oldid: this.oldid,
-                    newid: response.data.id,
-                  });
-                }
-                return Promise.resolve({
-                  oldid: this.oldid,
-                  newid: response.data.id,
-                  state: "changed",
-                });
-              } else {
-                return Promise.resolve({
-                  oldid: this.oldid,
-                  newid: this.oldid,
-                  state: "same",
-                });
-              }
-            }
-          }
-        }.bind({ oldid: roadID, data: this }),
-      );
-      savePromise
-        .then(
-          function (saveResult) {
-            if (saveResult.state === "changed") {
-              const oldIdIndex = this.newRoads.indexOf(saveResult.oldid);
-              if (oldIdIndex >= 0) {
-                this.newRoads.splice(oldIdIndex, 1);
-              }
-            }
-            if (this.$cookies.isKey("newRoads")) {
-              this.$cookies.set("newRoads", this.getNewRoadData());
-            }
-            this.currentlySaving = false;
-          }.bind(this),
-        )
-        .catch(
-          function (err) {
-            console.log(err);
-            this.currentlySaving = false;
-          }.bind(this),
+  // convert selected subjects to more convenient format
+  road.contents.selectedSubjects = getSimpleSelectedSubjects(
+    road.contents.selectedSubjects,
+  );
+  // sanitize progressOverrides
+  if (road.contents.progressOverrides === undefined) {
+    road.contents.progressOverrides = {};
+  }
+  // sanitize progressAssertions
+  if (road.contents.progressAssertions === undefined) {
+    road.contents.progressAssertions = {};
+  }
+};
+
+const getUserData = () => {
+  gettingUserData.value = true;
+  getSecure("/sync/roads/")
+    .then((response) => {
+      if (response.status === 200 && response.data.success) {
+        return response.data.files;
+      } else {
+        return Promise.reject(
+          new Error("sync request not successfull in getUserData"),
         );
-    },
-    saveLocal: function () {
-      this.currentlySaving = true;
-      if (this.cookiesAllowed) {
-        this.$cookies.set("newRoads", this.getNewRoadData());
       }
-      for (const roadID in this.roads) {
-        this.$store.commit("setRoadProp", {
-          id: roadID,
-          prop: "downloaded",
-          value: moment().format(DATE_FORMAT),
+    })
+    .then((files) => {
+      renumberRoads(files);
+      for (let i = 0; i < newRoadsRef.value.length; i++) {
+        saveRemote(newRoadsRef.value[i]);
+      }
+      const fileKeys = Object.keys(files);
+      for (let i = 0; i < fileKeys.length; i++) {
+        const blankRoad = {
+          downloaded: moment().format(DATE_FORMAT),
+          changed: files[fileKeys[i]].changed,
+          name: files[fileKeys[i]].name,
+          agent: files[fileKeys[i]].agent,
+          contents: {
+            coursesOfStudy: ["girs"],
+            selectedSubjects: Array.from(Array(16), () => []),
+            progressOverrides: {},
+            progressAssertions: {},
+          },
+        };
+        store.setRoad({
+          id: fileKeys[i],
+          road: blankRoad,
           ignoreSet: true,
         });
       }
-      this.currentlySaving = false;
-    },
-    getNewRoadData: function () {
-      const newRoadData = {};
-      if (
-        this.newRoads.indexOf("$defaultroad$") === -1 &&
-        "$defaultroad$" in this.roads
-      ) {
-        if (
-          this.flatten(this.roads.$defaultroad$.contents.selectedSubjects)
-            .length > 0 ||
-          JSON.stringify(
-            Array.from(this.roads.$defaultroad$.contents.coursesOfStudy),
-          ) !== '["girs"]'
-        ) {
-          this.newRoads.push("$defaultroad$");
-        }
+      if (props.justLoaded && fileKeys.length > 0) {
+        store.deleteRoad("$defaultroad$");
+      }
+      if (fileKeys.includes(route.params.road)) {
+        store.setActiveRoad(route.params.road);
+      } else {
+        // Redirect to first road if road cannot be found
+        store.setActiveRoad(Object.keys(roads.value)[0]);
+        router.push({
+          path: `/road/${Object.keys(roads.value)[0]}`,
+        });
       }
-      for (let r = 0; r < this.newRoads.length; r++) {
-        const roadID = this.newRoads[r];
-        if (roadID in this.roads) {
-          newRoadData[roadID] = this.roads[roadID];
+      // Set list of unretrieved roads to all but first road ID
+      store.setUnretrieved(fileKeys);
+      if (fileKeys.length) {
+        // Retrieves based on url and defaults to first road if unable to find it
+        if (fileKeys.includes(route.params.road)) {
+          return retrieveRoad(route.params.road);
+        } else {
+          return retrieveRoad(fileKeys[0]);
         }
       }
-      return newRoadData;
-    },
-    updateRemote: function (roadID) {
-      this.saveRemote(roadID, true);
-      this.$emit("resolve-conflict");
-    },
+    })
+    .then(() => {
+      gettingUserData.value = false;
+    })
+    .catch((err) => {
+      alert(err);
+      gettingUserData.value = false;
+      if (err === "Token not valid") {
+        alert("Your token has expired.  Please log in again.");
+      }
+      logoutUser();
+    });
+};
 
-    updateLocal: function (roadID) {
-      const remoteRoad = {
-        name: this.conflictInfo.other_name,
-        agent: this.conflictInfo.other_agent,
-        changed: this.conflictInfo.other_date,
-        contents: this.conflictInfo.other_contents,
-        downloaded: moment().format(DATE_FORMAT),
-      };
-      this.sanitizeRoad(remoteRoad);
-      this.$store.commit("setRoad", {
+const renumber = (name, otherNames) => {
+  let newName;
+  let copyIndex = 2;
+  while (newName === undefined) {
+    const copyName = name + " (" + copyIndex + ")";
+    if (otherNames.indexOf(copyName) === -1) {
+      newName = copyName;
+    }
+    copyIndex++;
+  }
+  return newName;
+};
+
+const renumberRoads = (cloudFiles) => {
+  const cloudRoads = Object.keys(cloudFiles).map((id) => cloudFiles[id]);
+  const cloudNames = cloudRoads.map(function (cr) {
+    try {
+      return cr.name;
+    } catch (err) {
+      return undefined;
+    }
+  });
+  for (const roadID in roads.value) {
+    const localName = roads.value[roadID].name;
+    if (cloudNames.indexOf(localName) >= 0) {
+      const renumberedName = renumber(localName, cloudNames);
+      store.setRoadName({
         id: roadID,
-        road: remoteRoad,
-        ignoreSet: false,
+        name: renumberedName,
       });
-      this.$emit("resolve-conflict");
-    },
+    }
+  }
+};
 
-    deleteRoad: function (roadID) {
-      if (this.activeRoad === roadID) {
-        const roadIndex = Object.keys(this.roads).indexOf(roadID);
-        const withoutRoad = Object.keys(this.roads)
-          .slice(0, roadIndex)
-          .concat(Object.keys(this.roads).slice(roadIndex + 1));
-        if (withoutRoad.length) {
-          if (withoutRoad.length > roadIndex) {
-            this.$store.commit("setActiveRoad", withoutRoad[roadIndex]);
-          } else {
-            this.$store.commit("setActiveRoad", withoutRoad[roadIndex - 1]);
-          }
-        } else {
-          this.$store.commit("setActiveRoad", "");
+const getAuthorizationToken = (code) => {
+  axios
+    .get(import.meta.env.VITE_FIREROAD_URL + "/fetch_token/?code=" + code)
+    .then((response) => {
+      if (response.data.success) {
+        if (cookiesAllowed.value) {
+          cookies.set("accessInfo", response.data.access_info, "3d");
         }
+        accessInfo.value = response.data.access_info;
+        verify();
+        loggedIn.value = true;
+        getUserData();
       }
-      this.$store.commit("deleteRoad", roadID);
+    });
+};
 
-      if (roadID in this.newRoads) {
-        const roadIndex = this.newRoads.indexOf(roadID);
-        this.newRoads.splice(roadIndex, 1);
-      }
+const attemptLogin = () => {
+  const queryObject = getQueryObject();
+  if ("code" in queryObject) {
+    const code = queryObject.code;
+    window.history.pushState(
+      "CourseRoad Home",
+      "CourseRoad Home",
+      "./#" + activeRoad.value,
+    );
+    getAuthorizationToken(code);
+  } else if (cookies.get("hasLoggedIn") === "true" && !loggedIn.value) {
+    loginUser();
+  }
+};
 
-      if (this.loggedIn) {
-        if (roadID.indexOf("$") < 0) {
-          this.postSecure("/sync/delete_road/", { id: roadID });
+const save = (roadID) => {
+  if (cookiesAllowed.value) {
+    cookies.set("newRoads", getNewRoadData());
+  }
+  if (loggedIn.value) {
+    saveRemote(roadID);
+  }
+};
+
+const saveRemote = (roadID, override) => {
+  if (override === undefined) {
+    override = false;
+  }
+
+  currentlySaving.value = true;
+  saveWarnings.value = [];
+  const assignKeys = { override, agent: getAgent() };
+  if (!roadID.includes("$")) {
+    assignKeys.id = roadID;
+  }
+  const roadSubjects = flatten(roads.value[roadID].contents.selectedSubjects);
+  const formattedRoadContents = Object.assign(
+    {
+      coursesOfStudy: ["girs"],
+      progressOverrides: [],
+      progressAssertions: {},
+    },
+    roads.value[roadID].contents,
+    { selectedSubjects: roadSubjects },
+  );
+  const roadToSend = {};
+  Object.assign(
+    roadToSend,
+    roads.value[roadID],
+    { contents: formattedRoadContents },
+    assignKeys,
+  );
+  const savePromise = postSecure("/sync/sync_road/", roadToSend).then(
+    (response) => {
+      if (response.status !== 200) {
+        return Promise.reject(new Error("Unable to save road " + roadID));
+      } else {
+        const newid =
+          response.data.id !== undefined ? response.data.id : roadID;
+        if (response.data.success === false) {
+          saveWarnings.value.push({
+            id: newid,
+            error: response.data.error,
+            name: roads.value[roadID].name,
+          });
         }
-      }
-    },
-    getAgent: function () {
-      const ua = UAParser(navigator.userAgent);
-      return navigator.platform + " " + ua.browser.name + " Tab " + this.tabID;
-    },
-    setTabID: function () {
-      if (this.cookiesAllowed) {
-        if (sessionStorage.tabID !== undefined) {
-          this.tabID = sessionStorage.tabID;
-          const tabNum = parseInt(this.tabID);
-          if (this.$cookies.isKey("tabs")) {
-            var tabs = this.$cookies.get("tabs").ids;
-            if (tabs.indexOf(tabNum) === -1) {
-              tabs.push(tabNum);
-              this.$cookies.set("tabs", { ids: tabs });
-            }
-          } else {
-            this.$cookies.set("tabs", { ids: [tabNum] });
-          }
+        if (response.data.result === "conflict") {
+          const conflictInfo = {
+            id: roadID,
+            other_name: response.data.other_name,
+            other_agent: response.data.other_agent,
+            other_date: response.data.other_date,
+            other_contents: response.data.other_contents,
+            this_agent: response.data.this_agent,
+            this_date: response.data.this_date,
+          };
+          store.setRoadProp({
+            id: roadID,
+            prop: "agent",
+            value: getAgent(),
+            ignoreSet: true,
+          });
+          emit("conflict", conflictInfo);
+
+          return Promise.resolve({ oldid: roadID, state: "same" });
+        } else if (response.data.result === "update_local") {
+          alert(
+            "Server has more recent edits.  Overriding local road.  If this is unexpected, check that your computer clock is accurate.",
+          );
+
+          const updatedRoad = {
+            downloaded: moment().format(DATE_FORMAT),
+            changed: response.data.changed,
+            name: response.data.name,
+            agent: getAgent(),
+            contents: response.data.contents,
+          };
+
+          sanitizeRoad(updatedRoad);
+
+          store.setRoad({
+            id: newid,
+            road: updatedRoad,
+            ignoreSet: true,
+          });
+
+          return Promise.resolve({
+            oldid: roadID,
+            newid: response.data.id,
+            state: "same",
+          });
         } else {
-          // TODO: look into whether this = sign is acting correctly?
-          if (
-            this.$cookies.isKey("tabs") &&
-            // eslint-disable-next-line no-undef
-            (tabs = this.$cookies.get("tabs").ids)
-          ) {
-            // eslint-disable-next-line no-undef
-            const maxTab = Math.max(...tabs);
-            const newTab = (maxTab + 1).toString();
-            sessionStorage.tabID = newTab;
-            this.tabID = newTab;
-            // eslint-disable-next-line no-undef
-            tabs.push(maxTab + 1);
-            // eslint-disable-next-line no-undef
-            this.$cookies.set("tabs", { ids: tabs });
+          store.setRoadProp({
+            id: roadID,
+            prop: "downloaded",
+            value: moment().format(DATE_FORMAT),
+            ignoreSet: true,
+          });
+
+          if (response.data.id !== undefined) {
+            // note: code moved to app.vue for reset id
+            // this is to fix a problem where the activeroad gets reset to the first one
+            // i suspect this is because the three events required were not happening
+            // in the correct order or something
+            if (roadID !== response.data.id.toString()) {
+              store.resetID({
+                oldid: roadID,
+                newid: response.data.id,
+              });
+            }
+            return Promise.resolve({
+              oldid: roadID,
+              newid: response.data.id,
+              state: "changed",
+            });
           } else {
-            sessionStorage.tabID = "1";
-            this.tabID = "1";
-            this.$cookies.set("tabs", { ids: [1] });
+            return Promise.resolve({
+              oldid: roadID,
+              newid: roadID,
+              state: "same",
+            });
           }
         }
       }
     },
-    changeSemester: function (year) {
-      if (this.cookiesAllowed) {
-        this.$cookies.set("has_set_year", true);
+  );
+  savePromise
+    .then((saveResult) => {
+      if (saveResult.state === "changed") {
+        const oldIdIndex = newRoadsRef.value.indexOf(saveResult.oldid);
+        if (oldIdIndex >= 0) {
+          newRoadsRef.value.splice(oldIdIndex, 1);
+        }
       }
-      const currentMonth = new Date().getMonth();
-      const sem =
-        currentMonth >= 5 && currentMonth <= 10 ? 1 + year * 3 : 3 + year * 3;
-      this.postSecure("/set_semester/", {
-        semester: sem + (currentMonth === 4 ? 1 : 0),
-      })
-        .then(
-          function (res) {
-            if (res.status === 200 && res.data.success) {
-              this.$store.commit("setCurrentSemester", sem);
-            }
-          }.bind(this),
-        )
-        .catch(
-          function (err) {
-            if (err.message === "No auth information") {
-              this.$store.commit("setCurrentSemester", sem);
-            }
-          }.bind(this),
-        );
-    },
-  },
+      if (cookies.isKey("newRoads")) {
+        cookies.set("newRoads", getNewRoadData());
+      }
+      currentlySaving.value = false;
+    })
+    .catch((err) => {
+      console.log(err);
+      currentlySaving.value = false;
+    });
+};
+
+// const saveLocal = () => {
+//   currentlySaving.value = true;
+//   if (cookiesAllowed.value) {
+//     cookies.set("newRoads", getNewRoadData());
+//   }
+//   for (const roadID in roads.value) {
+//     store.setRoadProp({
+//       id: roadID,
+//       prop: "downloaded",
+//       value: moment().format(DATE_FORMAT),
+//       ignoreSet: true,
+//     });
+//   }
+//   currentlySaving.value = false;
+// };
+
+const getNewRoadData = () => {
+  const newRoadData = {};
+  if (
+    newRoadsRef.value.indexOf("$defaultroad$") === -1 &&
+    "$defaultroad$" in roads.value
+  ) {
+    if (
+      flatten(roads.value.$defaultroad$.contents.selectedSubjects).length > 0 ||
+      JSON.stringify(
+        Array.from(roads.value.$defaultroad$.contents.coursesOfStudy),
+      ) !== '["girs"]'
+    ) {
+      newRoadsRef.value.push("$defaultroad$");
+    }
+  }
+  for (let r = 0; r < newRoadsRef.value.length; r++) {
+    const roadID = newRoadsRef.value[r];
+    if (roadID in roads.value) {
+      newRoadData[roadID] = roads.value[roadID];
+    }
+  }
+  return newRoadData;
+};
+
+const updateRemote = (roadID) => {
+  saveRemote(roadID, true);
+  emit("resolve-conflict");
+};
+
+const updateLocal = (roadID) => {
+  const remoteRoad = {
+    name: props.conflictInfo.other_name,
+    agent: props.conflictInfo.other_agent,
+    changed: props.conflictInfo.other_date,
+    contents: props.conflictInfo.other_contents,
+    downloaded: moment().format(DATE_FORMAT),
+  };
+  sanitizeRoad(remoteRoad);
+  store.setRoad({
+    id: roadID,
+    road: remoteRoad,
+    ignoreSet: false,
+  });
+  emit("resolve-conflict");
+};
+
+const deleteRoad = (roadID) => {
+  if (activeRoad.value === roadID) {
+    const roadIndex = Object.keys(roads.value).indexOf(roadID);
+    const withoutRoad = Object.keys(roads.value)
+      .slice(0, roadIndex)
+      .concat(Object.keys(roads.value).slice(roadIndex + 1));
+    if (withoutRoad.length) {
+      if (withoutRoad.length > roadIndex) {
+        store.setActiveRoad(withoutRoad[roadIndex]);
+      } else {
+        store.setActiveRoad(withoutRoad[roadIndex - 1]);
+      }
+    } else {
+      store.setActiveRoad("");
+    }
+  }
+  store.deleteRoad(roadID);
+
+  if (roadID in newRoadsRef.value) {
+    const roadIndex = newRoadsRef.value.indexOf(roadID);
+    newRoadsRef.value.splice(roadIndex, 1);
+  }
+
+  if (loggedIn.value) {
+    if (roadID.indexOf("$") < 0) {
+      postSecure("/sync/delete_road/", { id: roadID });
+    }
+  }
+};
+
+const getAgent = () => {
+  const ua = UAParser(navigator.userAgent);
+  return navigator.platform + " " + ua.browser.name + " Tab " + tabID.value;
+};
+
+const setTabID = () => {
+  if (cookiesAllowed.value) {
+    if (sessionStorage.tabID !== undefined) {
+      tabID.value = sessionStorage.tabID;
+      const tabNum = parseInt(tabID.value);
+      if (cookies.isKey("tabs")) {
+        var tabs = cookies.get("tabs").ids;
+        if (tabs.indexOf(tabNum) === -1) {
+          tabs.push(tabNum);
+          cookies.set("tabs", { ids: tabs });
+        }
+      } else {
+        cookies.set("tabs", { ids: [tabNum] });
+      }
+    } else {
+      // TODO: look into whether this = sign is acting correctly?
+      if (cookies.isKey("tabs") && (tabs = cookies.get("tabs").ids)) {
+        const maxTab = Math.max(...tabs);
+        const newTab = (maxTab + 1).toString();
+        sessionStorage.tabID = newTab;
+        tabID.value = newTab;
+        tabs.push(maxTab + 1);
+        cookies.set("tabs", { ids: tabs });
+      } else {
+        sessionStorage.tabID = "1";
+        tabID.value = "1";
+        cookies.set("tabs", { ids: [1] });
+      }
+    }
+  }
+};
+
+const changeSemester = (year) => {
+  if (cookiesAllowed.value) {
+    cookies.set("has_set_year", true);
+  }
+  const currentMonth = new Date().getMonth();
+  const sem =
+    currentMonth >= 5 && currentMonth <= 10 ? 1 + year * 3 : 3 + year * 3;
+  postSecure("/set_semester/", {
+    semester: sem + (currentMonth === 4 ? 1 : 0),
+  })
+    .then((res) => {
+      if (res.status === 200 && res.data.success) {
+        store.setCurrentSemester(sem);
+      }
+    })
+    .catch((err) => {
+      if (err.message === "No auth information") {
+        store.setCurrentSemester(sem);
+      }
+    });
+};
+
+defineExpose({
+  save,
+  updateLocal,
+  updateRemote,
+  deleteRoad,
+  retrieveRoad,
+  gettingUserData,
+  newRoads: newRoadsRef,
 });
 </script>
 
diff --git a/src/components/Class.vue b/src/components/Class.vue
index 1c295fca..e209387a 100644
--- a/src/components/Class.vue
+++ b/src/components/Class.vue
@@ -1,7 +1,7 @@
 <!-- this is a cool idea for class info on click: https://vuetifyjs.com/en/components/expansion-panels#popout-inset -->
 
 <template>
-  <v-flex lg2 md3 xs4>
+  <v-col lg="2" md="3" cols="4">
     <v-hover>
       <v-badge
         slot-scope="{ hover }"
@@ -15,16 +15,12 @@
           data-cy="placeholderClass"
           class="placeholder classbox"
         >
-          <v-container fill-height>
-            <v-layout align-center justify-center>
-              <v-btn
-                large
-                icon
-                @click="$store.dispatch('addAtPlaceholder', semesterIndex)"
-              >
+          <v-container class="fill-height">
+            <v-row align="center" justify="center">
+              <v-btn large icon @click="store.addAtPlaceholder(semesterIndex)">
                 <v-icon>mdi-plus</v-icon>
               </v-btn>
-            </v-layout>
+            </v-row>
           </v-container>
         </v-card>
 
@@ -48,7 +44,7 @@
             :color="cardTextColor(classInfo)"
             style="margin: -0.5em; pointer-events: auto; opacity: 0.8"
             @click="
-              $store.commit('removeClass', {
+              store.removeClass({
                 classInfo: classInfo,
                 classIndex: classIndex,
               });
@@ -103,7 +99,7 @@
             label="Override warnings"
             color="orange darken-3"
             @change="
-              $store.commit('overrideWarnings', {
+              store.overrideWarnings({
                 override: shouldOverrideWarnings,
                 classInfo: classInfo,
               })
@@ -115,92 +111,97 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
-  </v-flex>
+  </v-col>
 </template>
 
 <script>
-import colorMixin from "./../mixins/colorMixin.js";
 import { defineComponent } from "vue";
 
 export default defineComponent({
   name: "ClassComponent",
-  mixins: [colorMixin],
-  props: {
-    classIndex: {
-      type: Number,
-      required: true,
-    },
-    classInfo: {
-      type: [Object, String],
-      required: true,
-    },
-    semesterIndex: {
-      type: Number,
-      required: true,
-    },
-    warnings: {
-      type: Array,
-      required: true,
-    },
+});
+</script>
+
+<script setup>
+import { useStore } from "../plugins/composition.js";
+import {
+  getRawColor,
+  getRawTextColor,
+  courseColor,
+} from "./../mixins/colorMixin.js";
+import { computed, ref } from "vue";
+
+const props = defineProps({
+  classIndex: {
+    type: Number,
+    required: true,
   },
-  data() {
-    return {
-      warningDialog: false,
-      shouldOverrideWarnings: this.classInfo.overrideWarnings,
-    };
+  classInfo: {
+    type: [Object, String],
+    required: true,
   },
-  computed: {
-    oldID: function () {
-      if (this.classInfo.public === false) {
-        return undefined;
-      }
-      const subjectIndex =
-        this.$store.state.subjectsIndex[this.classInfo.subject_id];
-      if (subjectIndex !== undefined) {
-        const subject = this.$store.state.subjectsInfo[subjectIndex];
-        return subject.old_id;
-      } else {
-        return undefined;
-      }
-    },
+  semesterIndex: {
+    type: Number,
+    required: true,
   },
-  methods: {
-    dragStart: function (event) {
-      event.dataTransfer.setData(
-        "classData",
-        JSON.stringify({
-          isNew: false,
-          classInfo: this.classInfo,
-          classIndex: this.classIndex,
-        }),
-      );
-      this.$store.commit("dragStartClass", {
-        dragstart: event,
-        basicClass: this.classInfo,
-        isNew: false,
-        currentSem: this.semesterIndex,
-      });
-    },
-    clickClass: function (classInfo) {
-      if (classInfo === "placeholder") {
-        //
-      } else if (classInfo.public === false) {
-        this.$store.commit("editCustomClass", classInfo);
-      } else {
-        this.$store.commit("pushClassStack", classInfo.subject_id);
-      }
-    },
-    cardClass: function (classInfo) {
-      return `classbox ${this.courseColor(classInfo)}`;
-    },
-    cardColor: function (classInfo) {
-      return `${this.getRawColor(this.courseColor(classInfo))}`;
-    },
-    cardTextColor: function (classInfo) {
-      return `${this.getRawTextColor(this.courseColor(classInfo))}`;
-    },
+  warnings: {
+    type: Array,
+    required: true,
   },
 });
+
+const store = useStore();
+
+const warningDialog = ref(false);
+const shouldOverrideWarnings = ref(props.classInfo.overrideWarnings);
+
+const oldID = computed(() => {
+  if (props.classInfo.public === false) {
+    return undefined;
+  }
+  const subjectIndex = store.subjectsIndex[props.classInfo.subject_id];
+  if (subjectIndex !== undefined) {
+    const subject = store.subjectsInfo[subjectIndex];
+    return subject.old_id;
+  } else {
+    return undefined;
+  }
+});
+
+const dragStart = (event) => {
+  event.dataTransfer.setData(
+    "classData",
+    JSON.stringify({
+      isNew: false,
+      classInfo: props.classInfo,
+      classIndex: props.classIndex,
+    }),
+  );
+  store.dragStartClass({
+    dragstart: event,
+    basicClass: props.classInfo,
+    isNew: false,
+    currentSem: props.semesterIndex,
+  });
+};
+const clickClass = (classInfo) => {
+  if (classInfo === "placeholder") {
+    //
+  } else if (classInfo.public === false) {
+    store.editCustomClass(classInfo);
+  } else {
+    store.pushClassStack(classInfo.subject_id);
+  }
+};
+// const cardClass = (classInfo) => {
+//   return `classbox ${this.courseColor(classInfo)}`;
+// };
+const cardColor = (classInfo) => {
+  return `${getRawColor(courseColor(classInfo))}`;
+};
+const cardTextColor = (classInfo) => {
+  return `${getRawTextColor(courseColor(classInfo))}`;
+};
 </script>
 
 <style scoped>
diff --git a/src/components/ClassInfo.vue b/src/components/ClassInfo.vue
index 2872368f..cc8da69e 100644
--- a/src/components/ClassInfo.vue
+++ b/src/components/ClassInfo.vue
@@ -1,6 +1,6 @@
 <template>
-  <v-layout>
-    <v-flex>
+  <v-row no-gutters>
+    <v-col>
       <v-card
         id="classInfoCard"
         data-cy="classInfoCard"
@@ -14,7 +14,7 @@
           class="card-header"
           :style="'background-color: ' + cardColor()"
         >
-          <v-flex
+          <v-col
             style="display: flex; flex-direction: row; align-items: center"
           >
             <div style="padding: 0; margin: 0; display: block">
@@ -24,7 +24,7 @@
                 :color="cardTextColor(currentSubject)"
                 icon
                 data-cy="cardPreviousButton"
-                @click="$store.commit('popClassStack')"
+                @click="store.popClassStack()"
               >
                 <v-icon>mdi-arrow-left</v-icon>
               </v-btn>
@@ -42,7 +42,7 @@
                 icon
                 style="margin: 0"
                 data-cy="closeClassInfoButton"
-                @click="$store.commit('clearClassInfoStack')"
+                @click="store.clearClassInfoStack()"
               >
                 <v-icon
                   style="margin: 0; padding: 0"
@@ -52,12 +52,12 @@
                 </v-icon>
               </v-btn>
             </div>
-          </v-flex>
+          </v-col>
         </v-card-title>
 
         <v-card-text class="card-body">
           <div id="cardBody" class="card-body-container">
-            <v-layout>
+            <v-row no-gutters>
               <div style="padding: 0 0 0.5em 0">
                 <h3 data-cy="cardSubjectTitle">
                   {{ currentSubject.title }}
@@ -81,11 +81,11 @@
                 small
                 style="margin-left: auto"
                 class="secondary"
-                @click="$store.commit('cancelAddFromCard')"
+                @click="store.cancelAddFromCard()"
               >
                 <v-icon>mdi-cancel</v-icon>
               </v-btn>
-            </v-layout>
+            </v-row>
             <h4 v-if="currentSubject.is_historical">
               <v-icon small> mdi-alert </v-icon>
               This subject is no longer offered (last offered
@@ -202,7 +202,7 @@
               >
                 <td>
                   <b>{{
-                    currentSubject.subject_id in $store.state.genericIndex
+                    currentSubject.subject_id in store.genericIndex
                       ? "Average* hours"
                       : "Hours"
                   }}</b>
@@ -225,7 +225,7 @@
                 </td>
               </tr>
             </table>
-            <p v-if="currentSubject.subject_id in $store.state.genericIndex">
+            <p v-if="currentSubject.subject_id in store.genericIndex">
               *Hours averaged over all {{ currentSubject.subject_id }} classes
             </p>
             <h3>Description</h3>
@@ -237,7 +237,7 @@
                 >View in Course Catalog</a
               >
             </p>
-            <p v-if="currentSubject.subject_id in $store.state.subjectsIndex">
+            <p v-if="currentSubject.subject_id in store.subjectsIndex">
               <a
                 target="_blank"
                 :href="
@@ -250,21 +250,21 @@
             </p>
             <div v-if="currentSubject.joint_subjects !== undefined">
               <h3>Joint Subjects</h3>
-              <subject-scroll
+              <SubjectScroll
                 :subjects="currentSubject.joint_subjects.map(classInfo)"
                 @click-subject="clickRelatedSubject"
               />
             </div>
             <div v-if="currentSubject.equivalent_subjects !== undefined">
               <h3>Equivalent Subjects</h3>
-              <subject-scroll
+              <SubjectScroll
                 :subjects="currentSubject.equivalent_subjects.map(classInfo)"
                 @click-subject="clickRelatedSubject"
               />
             </div>
             <div v-if="parsedPrereqs.reqs.length > 0">
               <h3 id="prereq0">Prerequisites</h3>
-              <expansion-reqs
+              <ExpansionReqs
                 :requirement="parsedPrereqs"
                 :req-i-d="currentSubject.subject_id + 'prereq0'"
                 data-cy="cardPrereqs"
@@ -274,7 +274,7 @@
             <h4 v-if="currentSubject.either_prereq_or_coreq">OR</h4>
             <div v-if="parsedCoreqs.reqs.length > 0">
               <h3 id="coreq0">Corequisites</h3>
-              <expansion-reqs
+              <ExpansionReqs
                 :requirement="parsedCoreqs"
                 :req-i-d="currentSubject.subject_id + 'coreq0'"
                 @click-subject="clickRelatedSubject"
@@ -285,7 +285,7 @@
               data-cy="cardRelatedSubjects"
             >
               <h3>Related Subjects</h3>
-              <subject-scroll
+              <SubjectScroll
                 :subjects="currentSubject.related_subjects.map(classInfo)"
                 @click-subject="clickRelatedSubject"
               />
@@ -294,7 +294,7 @@
               <h3>
                 Subjects with {{ currentSubject.subject_id }} as Prerequisite
               </h3>
-              <subject-scroll
+              <SubjectScroll
                 :subjects="subjectsWithPrereq"
                 @click-subject="clickRelatedSubject"
               />
@@ -302,319 +302,300 @@
           </div>
         </v-card-text>
       </v-card>
-    </v-flex>
-  </v-layout>
+    </v-col>
+  </v-row>
 </template>
 
-<script>
+<script setup>
 import $ from "jquery";
 import SubjectScroll from "../components/SubjectScroll.vue";
 import ExpansionReqs from "../components/ExpansionReqs.vue";
-import colorMixin from "./../mixins/colorMixin.js";
-import schedule from "./../mixins/schedule.js";
-import reqFulfillment from "./../mixins/reqFulfillment.js";
-import { defineComponent } from "vue";
+import {
+  getRawColor,
+  getRawTextColor,
+  courseColor,
+} from "./../mixins/colorMixin.js";
+import { reqsFulfilled } from "./../mixins/reqFulfillment.js";
+import { computed } from "vue";
+import { useStore } from "../plugins/composition.js";
+import { flatten } from "../plugins/browserSupport.js";
 
-export default defineComponent({
-  name: "ClassInfo",
-  components: {
-    "subject-scroll": SubjectScroll,
-    "expansion-reqs": ExpansionReqs,
-  },
-  mixins: [colorMixin, schedule, reqFulfillment],
-  data: function () {
-    return {};
-  },
-  computed: {
-    addingFromCard() {
-      return this.$store.state.addingFromCard;
-    },
-    classInfoStack() {
-      return this.$store.state.classInfoStack;
-    },
-    currentSubject: function () {
-      const currentID = this.classInfoStack[this.classInfoStack.length - 1];
-      return currentID in this.$store.state.subjectsIndex
-        ? this.$store.state.subjectsInfo[
-            this.$store.state.subjectsIndex[currentID]
-          ]
-        : this.$store.state.genericCourses[
-            this.$store.state.genericIndex[currentID]
-          ];
-    },
-    parsedPrereqs: function () {
-      return this.currentSubject.prerequisites !== undefined
-        ? this.parseRequirements(this.currentSubject.prerequisites)
-        : { reqs: [] };
-    },
-    parsedCoreqs: function () {
-      return this.currentSubject.corequisites !== undefined
-        ? this.parseRequirements(this.currentSubject.corequisites)
-        : { reqs: [] };
-    },
-    subjectsWithPrereq: function () {
-      const currentID = this.currentSubject.subject_id;
-      const currentDept = currentID.substring(0, currentID.indexOf("."));
+const store = useStore();
 
-      const thisGIRAttr = this.currentSubject.gir_attribute;
-      let IDMatcher;
+const addingFromCard = computed(() => store.addingFromCard);
+const classInfoStack = computed(() => store.classInfoStack);
+const currentSubject = computed(() => {
+  const currentID = classInfoStack.value[classInfoStack.value.length - 1];
+  return currentID in store.subjectsIndex
+    ? store.subjectsInfo[store.subjectsIndex[currentID]]
+    : store.genericCourses[store.genericIndex[currentID]];
+});
+const parsedPrereqs = computed(() => {
+  return currentSubject.value.prerequisites !== undefined
+    ? parseRequirements(currentSubject.value.prerequisites)
+    : { reqs: [] };
+});
+const parsedCoreqs = computed(() => {
+  return currentSubject.value.corequisites !== undefined
+    ? parseRequirements(currentSubject.value.corequisites)
+    : { reqs: [] };
+});
 
-      if (thisGIRAttr === undefined) {
-        IDMatcher = new RegExp(
-          "(^|[^\\da-zA-Z])" +
-            currentID.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") +
-            "(?![\\da-zA-Z])",
-        );
+const subjectsWithPrereq = computed(() => {
+  const currentID = currentSubject.value.subject_id;
+  const currentDept = currentID.substring(0, currentID.indexOf("."));
+
+  const thisGIRAttr = currentSubject.value.gir_attribute;
+  let IDMatcher;
+
+  if (thisGIRAttr === undefined) {
+    IDMatcher = new RegExp(
+      "(^|[^\\da-zA-Z])" +
+        currentID.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") +
+        "(?![\\da-zA-Z])",
+    );
+  } else {
+    // Expression taken directly from above, but modified for GIRs
+    const filteredCurrentID = currentID.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    IDMatcher = new RegExp(
+      "(^|[^\\da-zA-Z])" +
+        "(" +
+        "GIR:" +
+        thisGIRAttr +
+        "|" +
+        filteredCurrentID +
+        ")" +
+        "(?![\\da-zA-Z])",
+    );
+  }
+  return store.subjectsInfo
+    .filter(function (s) {
+      return s.prerequisites !== undefined && IDMatcher.test(s.prerequisites);
+    })
+    .sort(function (s1, s2) {
+      // show subjects in same department first
+      const dept1 = s1.subject_id.substring(0, s1.subject_id.indexOf("."));
+      const dept2 = s2.subject_id.substring(0, s2.subject_id.indexOf("."));
+      if (dept1 === currentDept && dept2 !== currentDept) {
+        return -1;
       } else {
-        // Expression taken directly from above, but modified for GIRs
-        const filteredCurrentID = currentID.replace(
-          /[.*+?^${}()|[\]\\]/g,
-          "\\$&",
-        );
-        IDMatcher = new RegExp(
-          "(^|[^\\da-zA-Z])" +
-            "(" +
-            "GIR:" +
-            thisGIRAttr +
-            "|" +
-            filteredCurrentID +
-            ")" +
-            "(?![\\da-zA-Z])",
-        );
+        return 0;
       }
-      return this.$store.state.subjectsInfo
-        .filter(function (s) {
-          return (
-            s.prerequisites !== undefined && IDMatcher.test(s.prerequisites)
-          );
-        })
-        .sort(function (s1, s2) {
-          // show subjects in same department first
-          const dept1 = s1.subject_id.substring(0, s1.subject_id.indexOf("."));
-          const dept2 = s2.subject_id.substring(0, s2.subject_id.indexOf("."));
-          if (dept1 === currentDept && dept2 !== currentDept) {
-            return -1;
-          } else {
-            return 0;
-          }
-        });
-    },
-    firstAppearance: function () {
-      const currentSubjects =
-        this.$store.state.roads[this.$store.state.activeRoad].contents
-          .selectedSubjects;
-      const currentID = this.currentSubject.subject_id;
+    });
+});
+const firstAppearance = computed(() => {
+  const currentSubjects =
+    store.roads[store.activeRoad].contents.selectedSubjects;
+  const currentID = currentSubject.value.subject_id;
 
-      const subjectInSemesters = currentSubjects.map((semesterSubjects) => {
-        return (
-          semesterSubjects.map((subj) => subj.subject_id).indexOf(currentID) >=
-          0
-        );
-      });
+  const subjectInSemesters = currentSubjects.map((semesterSubjects) => {
+    return (
+      semesterSubjects.map((subj) => subj.subject_id).indexOf(currentID) >= 0
+    );
+  });
 
-      return subjectInSemesters.indexOf(true);
-    },
-  },
-  methods: {
-    classInfo: function (subjectID) {
-      const subj =
-        this.$store.state.subjectsInfo[
-          this.$store.state.subjectsIndex[subjectID]
-        ];
-      return (
-        subj || {
-          subject_id: subjectID,
-          title: "",
-        }
-      );
-    },
-    clickRelatedSubject: function (subject) {
-      this.$store.commit("pushClassStack", subject.subject_id);
-      $("#cardBody").animate({ scrollTop: 0 });
-    },
-    parseRequirements: function (requirements) {
-      // TODO: a way to make this more ETU?
-      // remove spaces after commas and slashes
-      requirements = requirements.replace(/([,/])\s+/g, "$1");
-      function getParenGroup(str) {
-        if (str[0] === "(") {
-          let retString = "";
-          str = str.substring(1);
-          let nextParen;
-          let numParens = 1;
-          while ((nextParen = /[()]/.exec(str)) !== null && numParens > 0) {
-            const parenIndex = nextParen.index;
-            const parenType = nextParen[0];
-            if (parenType === "(") {
-              numParens++;
-            } else {
-              numParens--;
-            }
-            retString += str.substring(0, parenIndex + 1);
-            str = str.substring(parenIndex + 1);
-          }
-          return [
-            retString.substring(0, retString.length - 1),
-            str.substring(1),
-            str.length > 0 ? str.substring(0, 1) : undefined,
-          ];
-        } else {
-          return undefined;
-        }
-      }
+  return subjectInSemesters.indexOf(true);
+});
+
+const classInfo = (subjectID) => {
+  const subj = store.subjectsInfo[store.subjectsIndex[subjectID]];
+  return (
+    subj || {
+      subject_id: subjectID,
+      title: "",
+    }
+  );
+};
 
-      function getNextReq(reqString) {
-        if (reqString[0] === "(") {
-          return getParenGroup(reqString);
+const clickRelatedSubject = (subject) => {
+  store.pushClassStack(subject.subject_id);
+  $("#cardBody").animate({ scrollTop: 0 });
+};
+
+const parseRequirements = (requirements) => {
+  // TODO: a way to make this more ETU?
+  // remove spaces after commas and slashes
+  requirements = requirements.replace(/([,/])\s+/g, "$1");
+  function getParenGroup(str) {
+    if (str[0] === "(") {
+      let retString = "";
+      str = str.substring(1);
+      let nextParen;
+      let numParens = 1;
+      while ((nextParen = /[()]/.exec(str)) !== null && numParens > 0) {
+        const parenIndex = nextParen.index;
+        const parenType = nextParen[0];
+        if (parenType === "(") {
+          numParens++;
         } else {
-          const nextMatch = /^([^/,]+)([/,])(.*)/g.exec(reqString);
-          if (nextMatch !== null) {
-            const nextReq = nextMatch[1];
-            const restOfString = nextMatch[3];
-            const delimiter = nextMatch[2];
-            return [nextReq, restOfString, delimiter];
-          } else {
-            return [reqString, "", undefined];
-          }
+          numParens--;
         }
+        retString += str.substring(0, parenIndex + 1);
+        str = str.substring(parenIndex + 1);
       }
+      return [
+        retString.substring(0, retString.length - 1),
+        str.substring(1),
+        str.length > 0 ? str.substring(0, 1) : undefined,
+      ];
+    } else {
+      return undefined;
+    }
+  }
 
-      function isBaseReq(req) {
-        return /[/(),]/g.exec(req) === null;
+  function getNextReq(reqString) {
+    if (reqString[0] === "(") {
+      return getParenGroup(reqString);
+    } else {
+      const nextMatch = /^([^/,]+)([/,])(.*)/g.exec(reqString);
+      if (nextMatch !== null) {
+        const nextReq = nextMatch[1];
+        const restOfString = nextMatch[3];
+        const delimiter = nextMatch[2];
+        return [nextReq, restOfString, delimiter];
+      } else {
+        return [reqString, "", undefined];
       }
+    }
+  }
 
-      const getClassInfo = this.classInfo;
+  function isBaseReq(req) {
+    return /[/(),]/g.exec(req) === null;
+  }
 
-      const parseReqs = (reqString) => {
-        const parsedReq = {
-          reqs: [],
-          subject_id: "",
-          connectionType: "",
-          title: "",
-          expansionDesc: "",
-          topLevel: false,
-          fulfilled: false,
-        };
-        let onereq;
-        let connectionType;
-        let nextConnectionType;
-        while (reqString.length > 0) {
-          [onereq, reqString, nextConnectionType] = getNextReq(reqString);
-          if (nextConnectionType !== undefined) {
-            connectionType = nextConnectionType;
-          }
-          if (isBaseReq(onereq)) {
-            let subRequirement;
-            if (onereq.indexOf("'") >= 0) {
-              subRequirement = {
-                subject_id: onereq.replace(/'/g, ""),
-                title: "",
-              };
-            } else {
-              subRequirement = Object.assign({}, getClassInfo(onereq));
-            }
-            if (this.firstAppearance >= -1) {
-              const allPreviousSubjects = this.flatten(
-                this.$store.state.roads[
-                  this.$store.state.activeRoad
-                ].contents.selectedSubjects.slice(0, this.firstAppearance),
-              );
-              subRequirement.fulfilled = this.reqsFulfilled(
-                onereq,
-                allPreviousSubjects,
-              );
-            } else {
-              subRequirement.fulfilled = true;
-            }
-            parsedReq.reqs.push(subRequirement);
-          } else {
-            parsedReq.reqs.push(parseReqs(onereq));
-          }
-        }
+  const getClassInfo = classInfo;
 
-        if (connectionType === "/") {
-          parsedReq.connectionType = "any";
-          parsedReq.fulfilled = parsedReq.reqs.some((req) => req.fulfilled);
-        } else if (connectionType === ",") {
-          parsedReq.connectionType = "all";
-          parsedReq.fulfilled = parsedReq.reqs.every((req) => req.fulfilled);
+  const parseReqs = (reqString) => {
+    const parsedReq = {
+      reqs: [],
+      subject_id: "",
+      connectionType: "",
+      title: "",
+      expansionDesc: "",
+      topLevel: false,
+      fulfilled: false,
+    };
+    let onereq;
+    let connectionType;
+    let nextConnectionType;
+    while (reqString.length > 0) {
+      [onereq, reqString, nextConnectionType] = getNextReq(reqString);
+      if (nextConnectionType !== undefined) {
+        connectionType = nextConnectionType;
+      }
+      if (isBaseReq(onereq)) {
+        let subRequirement;
+        if (onereq.indexOf("'") >= 0) {
+          subRequirement = {
+            subject_id: onereq.replace(/'/g, ""),
+            title: "",
+          };
+        } else {
+          subRequirement = Object.assign({}, getClassInfo(onereq));
         }
-
-        function sortOrder(req) {
-          if (req.reqs !== undefined) {
-            return 0;
-          } else if (req.total_units !== undefined) {
-            return -1;
-          } else {
-            return 1;
-          }
+        if (firstAppearance.value >= -1) {
+          const allPreviousSubjects = flatten(
+            store.roads[store.activeRoad].contents.selectedSubjects.slice(
+              0,
+              firstAppearance.value,
+            ),
+          );
+          subRequirement.fulfilled = reqsFulfilled(
+            store,
+            onereq,
+            allPreviousSubjects,
+          );
+        } else {
+          subRequirement.fulfilled = true;
         }
+        parsedReq.reqs.push(subRequirement);
+      } else {
+        parsedReq.reqs.push(parseReqs(onereq));
+      }
+    }
 
-        parsedReq.reqs.sort(function (a, b) {
-          return sortOrder(a) - sortOrder(b);
-        });
+    if (connectionType === "/") {
+      parsedReq.connectionType = "any";
+      parsedReq.fulfilled = parsedReq.reqs.some((req) => req.fulfilled);
+    } else if (connectionType === ",") {
+      parsedReq.connectionType = "all";
+      parsedReq.fulfilled = parsedReq.reqs.every((req) => req.fulfilled);
+    }
 
-        function getReqTitle(req) {
-          if (req.total_units !== undefined) {
-            return req.subject_id;
-          } else if (typeof req === "string") {
-            return req;
-          } else {
-            return req.subject_id + " " + req.title;
-          }
-        }
+    function sortOrder(req) {
+      if (req.reqs !== undefined) {
+        return 0;
+      } else if (req.total_units !== undefined) {
+        return -1;
+      } else {
+        return 1;
+      }
+    }
 
-        if (parsedReq.reqs.length === 2) {
-          if (parsedReq.connectionType === "any") {
-            parsedReq.subject_id = getReqTitle(parsedReq.reqs[0]);
-            parsedReq.title = "or " + getReqTitle(parsedReq.reqs[1]);
-            parsedReq.expansionDesc = "Select either:";
-          } else {
-            parsedReq.subject_id = getReqTitle(parsedReq.reqs[0]);
-            parsedReq.title = "and " + getReqTitle(parsedReq.reqs[1]);
-            parsedReq.expansionDesc = "Select both:";
-          }
-        } else if (parsedReq.reqs.length > 2) {
-          parsedReq.subject_id = getReqTitle(parsedReq.reqs[0]);
-          if (parsedReq.connectionType === "any") {
-            parsedReq.title = "or " + (parsedReq.reqs.length - 1) + " others";
-            parsedReq.expansionDesc = "Select any:";
-          } else {
-            parsedReq.title = "and " + (parsedReq.reqs.length - 1) + " others";
-            parsedReq.expansionDesc = "Select all:";
-          }
-        }
+    parsedReq.reqs.sort(function (a, b) {
+      return sortOrder(a) - sortOrder(b);
+    });
 
-        const connectionMatch = /(and|or)/.exec(parsedReq.subject_id);
+    function getReqTitle(req) {
+      if (req.total_units !== undefined) {
+        return req.subject_id;
+      } else if (typeof req === "string") {
+        return req;
+      } else {
+        return req.subject_id + " " + req.title;
+      }
+    }
 
-        if (connectionMatch !== null) {
-          const connectionIndex = connectionMatch.index;
-          const firstPart = parsedReq.subject_id
-            .substring(0, connectionIndex)
-            .replace(/\s/g, "");
-          const secondPart = parsedReq.subject_id.substring(connectionIndex);
-          parsedReq.subject_id = firstPart;
-          parsedReq.title = secondPart + " " + parsedReq.title;
-        }
+    if (parsedReq.reqs.length === 2) {
+      if (parsedReq.connectionType === "any") {
+        parsedReq.subject_id = getReqTitle(parsedReq.reqs[0]);
+        parsedReq.title = "or " + getReqTitle(parsedReq.reqs[1]);
+        parsedReq.expansionDesc = "Select either:";
+      } else {
+        parsedReq.subject_id = getReqTitle(parsedReq.reqs[0]);
+        parsedReq.title = "and " + getReqTitle(parsedReq.reqs[1]);
+        parsedReq.expansionDesc = "Select both:";
+      }
+    } else if (parsedReq.reqs.length > 2) {
+      parsedReq.subject_id = getReqTitle(parsedReq.reqs[0]);
+      if (parsedReq.connectionType === "any") {
+        parsedReq.title = "or " + (parsedReq.reqs.length - 1) + " others";
+        parsedReq.expansionDesc = "Select any:";
+      } else {
+        parsedReq.title = "and " + (parsedReq.reqs.length - 1) + " others";
+        parsedReq.expansionDesc = "Select all:";
+      }
+    }
 
-        return parsedReq;
-      };
+    const connectionMatch = /(and|or)/.exec(parsedReq.subject_id);
 
-      const rList = parseReqs(requirements);
-      rList.topLevel = true;
-      return rList;
-    },
-    addClass: function () {
-      this.$store.commit("addFromCard", this.currentSubject);
-    },
-    cardColor: function () {
-      return `${this.getRawColor(this.courseColor(this.currentSubject))}`;
-    },
-    cardTextColor: function () {
-      return `${this.getRawTextColor(this.courseColor(this.currentSubject))}`;
-    },
-  },
-});
+    if (connectionMatch !== null) {
+      const connectionIndex = connectionMatch.index;
+      const firstPart = parsedReq.subject_id
+        .substring(0, connectionIndex)
+        .replace(/\s/g, "");
+      const secondPart = parsedReq.subject_id.substring(connectionIndex);
+      parsedReq.subject_id = firstPart;
+      parsedReq.title = secondPart + " " + parsedReq.title;
+    }
+
+    return parsedReq;
+  };
+
+  const rList = parseReqs(requirements);
+  rList.topLevel = true;
+  return rList;
+};
+
+const addClass = () => {
+  store.addFromCard(currentSubject.value);
+};
+const cardColor = () => {
+  return `${getRawColor(courseColor(currentSubject.value))}`;
+};
+const cardTextColor = () => {
+  return `${getRawTextColor(courseColor(currentSubject.value))}`;
+};
 </script>
 
 <style scoped>
@@ -629,7 +610,7 @@ export default defineComponent({
 }
 
 .card-header {
-  padding: 0.5em 1em;
+  padding: 0em 1em;
   display: inline-block;
   color: white;
 }
diff --git a/src/components/ClassSearch.vue b/src/components/ClassSearch.vue
index dd1b723e..caace372 100644
--- a/src/components/ClassSearch.vue
+++ b/src/components/ClassSearch.vue
@@ -1,37 +1,37 @@
 <template>
   <v-container :style="searchHeight + 'display: flex; flex-direction:column;'">
     <div>
-      <filter-set
+      <FilterSet
         v-model="chosenFilters.girs"
         :label="'GIR'"
         :filters="allFilters.girs.filters"
       />
-      <filter-set
+      <FilterSet
         v-model="chosenFilters.hass"
         :label="'HASS'"
         :filters="allFilters.hass.filters"
       />
-      <filter-set
+      <FilterSet
         v-model="chosenFilters.ci"
         :label="'CI'"
         :filters="allFilters.ci.filters"
       />
-      <filter-set
+      <FilterSet
         v-model="chosenFilters.level"
         :label="'Level'"
         :filters="allFilters.level.filters"
       />
-      <filter-set
+      <FilterSet
         v-model="chosenFilters.units"
         :label="'Units'"
         :filters="allFilters.units.filters"
       />
-      <filter-set
+      <FilterSet
         v-model="chosenFilters.terms"
         :label="'Term'"
         :filters="allFilters.terms.filters"
       />
-      <filter-set
+      <FilterSet
         v-model="chosenFilters.virtual"
         :label="'Virtual'"
         :filters="allFilters.virtual.filters"
@@ -47,27 +47,28 @@
           :items-per-page-text="'Results per page:\xa0'"
           :hide-default-header="true"
         >
-          <template slot="item" slot-scope="props">
+          <template slot="item" slot-scope="searchProps">
             <v-hover>
               <tr
                 slot-scope="{ hover }"
                 :data-cy="
-                  'classInSearch' + props.item.subject_id.replace('.', '_')
+                  'classInSearch' +
+                  searchProps.item.subject_id.replace('.', '_')
                 "
                 :class="{ 'elevation-3': hover }"
                 draggable="true"
                 style="cursor: grab; margin: 4px"
-                @dragstart="dragStart($event, props)"
-                @click="viewClassInfo(props)"
+                @dragstart="dragStart($event, searchProps)"
+                @click="viewClassInfo(searchProps)"
               >
                 <td style="padding: 0px; white-space: nowrap; width: 30%">
                   <v-icon style="vertical-align: middle"> mdi-drag </v-icon>
                   <span style="vertical-align: middle">
-                    {{ props.item.subject_id }}</span
+                    {{ searchProps.item.subject_id }}</span
                   >
                 </td>
                 <td style="padding: 2px 4px 2px 0px; width: 60%">
-                  {{ props.item.title }}
+                  {{ searchProps.item.title }}
                 </td>
               </tr>
             </v-hover>
@@ -75,7 +76,7 @@
           <template slot="body.append">
             <tr>
               <td colspan="2">
-                <custom-class />
+                <CustomClass />
               </td>
             </tr>
           </template>
@@ -85,11 +86,10 @@
   </v-container>
 </template>
 
-<script>
+<script setup>
 import CustomClass from "./CustomClass.vue";
 import FilterSet from "./FilterSet.vue";
 import $ from "jquery";
-import Vue from "vue";
 import {
   FilterGroup,
   RegexFilter,
@@ -97,7 +97,18 @@ import {
   BooleanFilter,
   ArrayFilter,
 } from "../utilities/filters.js";
-import { defineComponent } from "vue";
+import { ref, computed, watch, nextTick, onMounted } from "vue";
+import { useStore, useCookies } from "../plugins/composition.js";
+
+const store = useStore();
+const cookies = useCookies();
+
+const props = defineProps({
+  searchInput: {
+    type: String,
+    required: true,
+  },
+});
 
 const girAny = new RegexFilter("GIR:Any", "Any", ".+", undefined, [
   "gir_attribute",
@@ -189,208 +200,185 @@ const instructorFilter = new ArrayFilter(
   "OR",
 );
 
-export default defineComponent({
-  name: "ClassSearch",
-  components: {
-    "filter-set": FilterSet,
-    "custom-class": CustomClass,
-  },
-  props: {
-    searchInput: {
-      type: String,
-      required: true,
-    },
-  },
-  data: function () {
-    return {
-      dragSemesterNum: -1,
-      searchHeight: "",
-      menuMargin: 20,
-      // lists of the filters turned on in each filter group
-      nameInput: "",
-      chosenFilters: {
-        girs: [false, false, false],
-        hass: [false, false, false, false, false],
-        ci: [false, false, false],
-        level: [false, false],
-        units: [false, false, false, false, false, false, false],
-        terms: [false, false, false],
-        virtual: [false, false, false],
-      },
-      allFilters: {
-        girs: new FilterGroup("GIR", [girAny, girLab, girRest], "OR"),
-        hass: new FilterGroup(
-          "HASS",
-          [hassAny, hassArt, hassSocialScience, hassHumanity, hassElective],
-          "OR",
-        ),
-        ci: new FilterGroup("CI", [ciAny, ciH, ciHW, ciNone], "OR"),
-        level: new FilterGroup("Level", [levelUG, levelG], "OR"),
-        units: new FilterGroup(
-          "Units",
-          [unitsLt6, units6, units9, units12, units15, units6To15, unitsGte15],
-          "OR",
-        ),
-        terms: new FilterGroup("Term", [termFall, termIAP, termSpring], "OR"),
-        virtual: new FilterGroup(
-          "Virtual",
-          [virtual, notVirtual, partlyVirtual],
-          "OR",
-        ),
-      },
-      rowsPerPageItems: [
-        5,
-        10,
-        20,
-        50,
-        { text: "$vuetify.dataIterator.rowsPerPageAll", value: -1 },
-      ],
-      pagination: {
-        rowsPerPage: 20,
-      },
-    };
-  },
-  computed: {
-    allSubjects: function () {
-      return this.$store.state.genericCourses.concat(
-        this.$store.state.subjectsInfo,
-      );
-    },
-    autocomplete: function () {
-      // Only display subjects if you are filtering by something
-      let returnAny = this.nameInput.length > 0;
-      for (const filterName in this.chosenFilters) {
-        returnAny = returnAny || this.chosenFilters[filterName].some((f) => f);
-      }
-      if (!returnAny) {
-        return [];
-      }
+// const dragSemesterNum = ref(-1);
+const searchHeight = ref("");
+const menuMargin = ref(20);
+// lists of the filters turned on in each filter group
+const nameInput = ref("");
+const chosenFilters = ref({
+  girs: [false, false, false],
+  hass: [false, false, false, false, false],
+  ci: [false, false, false],
+  level: [false, false],
+  units: [false, false, false, false, false, false, false],
+  terms: [false, false, false],
+  virtual: [false, false, false],
+});
+const allFilters = ref({
+  girs: new FilterGroup("GIR", [girAny, girLab, girRest], "OR"),
+  hass: new FilterGroup(
+    "HASS",
+    [hassAny, hassArt, hassSocialScience, hassHumanity, hassElective],
+    "OR",
+  ),
+  ci: new FilterGroup("CI", [ciAny, ciH, ciHW, ciNone], "OR"),
+  level: new FilterGroup("Level", [levelUG, levelG], "OR"),
+  units: new FilterGroup(
+    "Units",
+    [unitsLt6, units6, units9, units12, units15, units6To15, unitsGte15],
+    "OR",
+  ),
+  terms: new FilterGroup("Term", [termFall, termIAP, termSpring], "OR"),
+  virtual: new FilterGroup(
+    "Virtual",
+    [virtual, notVirtual, partlyVirtual],
+    "OR",
+  ),
+});
 
-      textFilter.setupInputs({ nameInput: this.nameInput });
-      instructorFilter.setupInputs({ nameInput: this.nameInput });
+const rowsPerPageItems = ref([
+  5,
+  10,
+  20,
+  50,
+  { text: "$vuetify.dataIterator.rowsPerPageAll", value: -1 },
+]);
+const pagination = ref({
+  rowsPerPage: 20,
+});
 
-      // Filter subjects that match all filter sets and the text filter
-      const filteredSubjects = this.allSubjects.filter((subject) => {
-        const matches =
-          textFilter.matches(subject) || instructorFilter.matches(subject);
-        return (
-          matches &&
-          Object.keys(this.allFilters).every((filterGroup) => {
-            return this.allFilters[filterGroup].matches(
-              subject,
-              this.chosenFilters[filterGroup],
-            );
-          })
-        );
-      });
+const allSubjects = computed(() =>
+  store.genericCourses.concat(store.subjectsInfo),
+);
 
-      // Sort subjects by priority order
-      if (this.nameInput.length) {
-        // Sort first by if it's a literal string vs regex match, then by if it starts with the search
-        textFilter.setupVariants(
-          { nameInput: this.nameInput },
-          { atStart: true, asLiteral: true },
-          ["asLiteral", "atStart"],
+const autocomplete = computed(() => {
+  // Only display subjects if you are filtering by something
+  let returnAny = nameInput.value.length > 0;
+  for (const filterName in chosenFilters.value) {
+    returnAny = returnAny || chosenFilters.value[filterName].some((f) => f);
+  }
+  if (!returnAny) {
+    return [];
+  }
+  textFilter.setupInputs({ nameInput: nameInput.value });
+  instructorFilter.setupInputs({ nameInput: nameInput.value });
+  // Filter subjects that match all filter sets and the text filter
+  const filteredSubjects = allSubjects.value.filter((subject) => {
+    const matches =
+      textFilter.matches(subject) || instructorFilter.matches(subject);
+    return (
+      matches &&
+      Object.keys(allFilters.value).every((filterGroup) => {
+        return allFilters.value[filterGroup].matches(
+          subject,
+          chosenFilters.value[filterGroup],
         );
-
-        // Compare by variants for each subject
-        return filteredSubjects.sort(function (subject1, subject2) {
-          return (
-            textFilter.compareByVariants(subject2) -
-            textFilter.compareByVariants(subject1)
-          );
-        });
-      } else {
-        return filteredSubjects;
-      }
-    },
-    classInfoStack() {
-      return this.$store.state.classInfoStack;
-    },
-    classStackExists: function () {
-      return this.classInfoStack.length > 0;
-    },
-    cookiesAllowed() {
-      return this.$store.state.cookiesAllowed;
-    },
-  },
-  watch: {
-    searchInput(newVal) {
-      this.nameInput = newVal;
-    },
-    classStackExists: function () {
-      Vue.nextTick(
-        function () {
-          this.updateMenuStyle();
-        }.bind(this),
+      })
+    );
+  });
+  // Sort subjects by priority order
+  if (nameInput.value.length) {
+    // Sort first by if it's a literal string vs regex match, then by if it starts with the search
+    textFilter.setupVariants(
+      { nameInput: nameInput.value },
+      { atStart: true, asLiteral: true },
+      ["asLiteral", "atStart"],
+    );
+    // Compare by variants for each subject
+    return filteredSubjects.sort(function (subject1, subject2) {
+      return (
+        textFilter.compareByVariants(subject2) -
+        textFilter.compareByVariants(subject1)
       );
-    },
-    "pagination.rowsPerPage": function (newRows) {
-      if (this.cookiesAllowed) {
-        this.$cookies.set("paginationRows", newRows);
-      }
-    },
-    cookiesAllowed: function (newCA) {
-      if (newCA) {
-        this.$cookies.set("paginationRows", this.pagination.rowsPerPage);
-      }
-    },
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.updateMenuStyle();
     });
+  } else {
+    return filteredSubjects;
+  }
+});
 
-    window.cookies = this.$cookies;
-    $(window).resize(
-      function () {
-        this.updateMenuStyle();
-      }.bind(this),
-    );
+const classInfoStack = computed(() => {
+  return store.classInfoStack;
+});
+const classStackExists = computed(() => {
+  return classInfoStack.value.length > 0;
+});
+const cookiesAllowed = computed(() => {
+  return store.cookiesAllowed;
+});
 
-    if (this.$cookies.isKey("paginationRows")) {
-      this.pagination.rowsPerPage = parseInt(
-        this.$cookies.get("paginationRows"),
-      );
-    }
+watch(
+  () => props.searchInput,
+  (newVal) => {
+    nameInput.value = newVal;
   },
-  methods: {
-    dragStart: function (event, classItem) {
-      event.dataTransfer.setData(
-        "classData",
-        JSON.stringify({ isNew: true, classIndex: -1 }),
-      );
-      this.$store.commit("dragStartClass", {
-        dragstart: event,
-        classInfo: classItem.item,
-        isNew: true,
-      });
-    },
-    updateMenuStyle: function () {
-      const searchInputElem = document.getElementById("searchInputTF");
-      const searchInputRect = searchInputElem.getBoundingClientRect();
-      const searchMenuTop = searchInputRect.top + searchInputRect.height;
-      const searchInput = $("#searchInputTF");
-      const menuWidth = searchInput.outerWidth();
-      const classInfoCard = $("#classInfoCard");
-      let menuBottom;
-      if (classInfoCard.length) {
-        menuBottom = classInfoCard.position().top;
-      } else {
-        menuBottom = $(window).innerHeight();
-      }
-      const maxHeight = menuBottom - searchMenuTop - this.menuMargin;
-      this.searchHeight =
-        "max-height: " + maxHeight + "px;width: " + menuWidth + "px;";
-    },
-    viewClassInfo: function (item) {
-      this.$store.commit("pushClassStack", item.item.subject_id);
-    },
-    openFirstClass: function () {
-      if (this.autocomplete.length > 0) {
-        this.$store.commit("pushClassStack", this.autocomplete[0].subject_id);
-      }
-    },
+);
+watch(classStackExists, () => {
+  nextTick(() => {
+    updateMenuStyle();
+  });
+});
+
+watch(
+  () => pagination.value.rowsPerPage,
+  (newRows) => {
+    if (cookiesAllowed.value) {
+      cookies.set("paginationRows", newRows);
+    }
   },
+);
+watch(cookiesAllowed, (newCA) => {
+  if (newCA) {
+    cookies.set("paginationRows", pagination.value.rowsPerPage);
+  }
+});
+
+onMounted(() => {
+  nextTick(() => {
+    updateMenuStyle();
+  });
+  window.cookies = cookies;
+  $(window).resize(() => {
+    updateMenuStyle();
+  });
+  if (cookies.isKey("paginationRows")) {
+    pagination.value.rowsPerPage = parseInt(cookies.get("paginationRows"));
+  }
 });
+
+const dragStart = (event, classItem) => {
+  event.dataTransfer.setData(
+    "classData",
+    JSON.stringify({ isNew: true, classIndex: -1 }),
+  );
+  store.dragStartClass({
+    dragstart: event,
+    classInfo: classItem.item,
+    isNew: true,
+  });
+};
+const updateMenuStyle = () => {
+  const searchInputElem = document.getElementById("searchInputTF");
+  const searchInputRect = searchInputElem.getBoundingClientRect();
+  const searchMenuTop = searchInputRect.top + searchInputRect.height;
+  const searchInput = $("#searchInputTF");
+  const menuWidth = searchInput.outerWidth();
+  const classInfoCard = $("#classInfoCard");
+  let menuBottom;
+  if (classInfoCard.length) {
+    menuBottom = classInfoCard.position().top;
+  } else {
+    menuBottom = $(window).innerHeight();
+  }
+  const maxHeight = menuBottom - searchMenuTop - menuMargin.value;
+  searchHeight.value =
+    "max-height: " + maxHeight + "px;width: " + menuWidth + "px;";
+};
+const viewClassInfo = (item) => {
+  store.pushClassStack(item.item.subject_id);
+};
+// const openFirstClass = () => {
+//   if (autocomplete.value.length > 0) {
+//     store.pushClassStack(autocomplete.value[0].subject_id);
+//   }
+// };
 </script>
diff --git a/src/components/ConflictDialog.vue b/src/components/ConflictDialog.vue
index 9ccc728f..83d5e9f2 100644
--- a/src/components/ConflictDialog.vue
+++ b/src/components/ConflictDialog.vue
@@ -10,9 +10,9 @@
         <v-icon>mdi-close</v-icon>
       </v-btn>
       <v-card-title>Save Conflict</v-card-title>
-      <v-layout>
+      <v-row>
         <!-- TODO: remove duplicate code? -->
-        <v-flex id="cloud-column" xs6 style="padding: 2em">
+        <v-col id="cloud-column" cols="6" style="padding: 2em">
           <b>Cloud</b>
           <v-list>
             <v-card style="padding: 1em">
@@ -54,8 +54,8 @@
           >
             Keep Remote
           </v-btn>
-        </v-flex>
-        <v-flex id="local-column" xs6 style="padding: 2em">
+        </v-col>
+        <v-col id="local-column" cols="6" style="padding: 2em">
           <b>Local</b>
           <v-list>
             <v-card style="padding: 1em">
@@ -98,101 +98,95 @@
           >
             Keep Local
           </v-btn>
-        </v-flex>
-      </v-layout>
+        </v-col>
+      </v-row>
     </v-card>
   </v-dialog>
 </template>
 
-<script>
-import { defineComponent } from "vue";
+<script setup>
+import { ref, computed } from "vue";
+import { useStore } from "../plugins/composition.js";
+import { flatten } from "../plugins/browserSupport.js";
 
-export default defineComponent({
-  name: "ConflictDialog",
-  props: {
-    conflictInfo: {
-      type: Object,
-      default: function () {
-        return undefined;
-      },
-    },
-  },
-  data: function () {
-    return {
-      conflictDialog: false,
-    };
-  },
-  computed: {
-    roads() {
-      return this.$store.state.roads;
-    },
-  },
-  methods: {
-    startConflict: function () {
-      this.conflictDialog = true;
-    },
-    resolveConflict: function () {
-      this.conflictDialog = false;
-    },
-    colorSubject: function (subjectIndex, subjectList) {
-      const remoteSubjects = this.renumberDuplicates(
-        this.conflictInfo.other_contents.selectedSubjects.map(
-          (s) => s.subject_id + " " + s.semester,
-        ),
-      );
-      const localSubjects = this.renumberDuplicates(
-        this.flatten(
-          this.roads[this.conflictInfo.id].contents.selectedSubjects,
-        ).map((s) => s.subject_id + " " + s.semester),
-      );
-      let currentSubject;
-      if (subjectList === "remote") {
-        currentSubject = remoteSubjects[subjectIndex];
-        if (
-          this.diff(remoteSubjects, localSubjects).indexOf(currentSubject) >= 0
-        ) {
-          return "blue--text";
-        }
-      } else if (subjectList === "local") {
-        currentSubject = localSubjects[subjectIndex];
-        if (
-          this.diff(localSubjects, remoteSubjects).indexOf(currentSubject) >= 0
-        ) {
-          return "blue--text";
-        }
-      }
-      return "";
-    },
-    diff: function (a1, a2) {
-      return a1.filter(function (i) {
-        return a2.indexOf(i) === -1;
-      });
-    },
-    count: function (arr, elem) {
-      let countElem = 0;
-      for (let i = 0; i < arr.length; i++) {
-        if (arr[i] === elem) {
-          countElem++;
-        }
-      }
-      return countElem;
-    },
-    renumberDuplicates: function (arr) {
-      return arr.map((elem, index) => {
-        if (this.count(arr, elem) > 1) {
-          const appendNumber = this.count(arr.slice(0, index), elem);
-          if (appendNumber > 0) {
-            return elem + "-" + appendNumber.toString();
-          } else {
-            return elem;
-          }
-        } else {
-          return elem;
-        }
-      });
-    },
+const store = useStore();
+
+const props = defineProps({
+  conflictInfo: {
+    type: Object,
+    default: undefined,
   },
 });
+
+// const emit = defineEmits(["update-local", "update-remote"]);
+defineEmits(["update-local", "update-remote"]);
+
+const conflictDialog = ref(false);
+
+const roads = computed(() => store.roads);
+
+// const startConflict = function () {
+//   conflictDialog.value = true;
+// };
+
+// const resolveConflict = function () {
+//   conflictDialog.value = false;
+// };
+
+const colorSubject = (subjectIndex, subjectList) => {
+  const remoteSubjects = renumberDuplicates(
+    props.conflictInfo.other_contents.selectedSubjects.map(
+      (s) => s.subject_id + " " + s.semester,
+    ),
+  );
+  const localSubjects = renumberDuplicates(
+    flatten(roads[props.conflictInfo.id].contents.selectedSubjects).map(
+      (s) => s.subject_id + " " + s.semester,
+    ),
+  );
+  let currentSubject;
+  if (subjectList === "remote") {
+    currentSubject = remoteSubjects[subjectIndex];
+    if (diff(remoteSubjects, localSubjects).indexOf(currentSubject) >= 0) {
+      return "blue--text";
+    }
+  } else if (subjectList === "local") {
+    currentSubject = localSubjects[subjectIndex];
+    if (diff(localSubjects, remoteSubjects).indexOf(currentSubject) >= 0) {
+      return "blue--text";
+    }
+  }
+  return "";
+};
+
+const diff = (a1, a2) => {
+  return a1.filter((i) => a2.indexOf(i) === -1);
+};
+
+const count = (arr, elem) => {
+  let countElem = 0;
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i] === elem) {
+      countElem++;
+    }
+  }
+  return countElem;
+};
+
+const renumberDuplicates = (arr) => {
+  return arr.map((elem, index) => {
+    if (count(arr, elem) > 1) {
+      const appendNumber = count(arr.slice(0, index), elem);
+      if (appendNumber > 0) {
+        return elem + "-" + appendNumber.toString();
+      } else {
+        return elem;
+      }
+    } else {
+      return elem;
+    }
+  });
+};
 </script>
 
 <style scoped></style>
diff --git a/src/components/CustomClass.vue b/src/components/CustomClass.vue
index bdae9e66..21f94a84 100644
--- a/src/components/CustomClass.vue
+++ b/src/components/CustomClass.vue
@@ -20,7 +20,7 @@
             Custom Activity
           </h2>
         </v-card-title>
-        <v-form ref="form" lazy-validation>
+        <v-form ref="formElement" lazy-validation>
           <div class="px-4">
             <v-text-field
               v-model="form.values.shortTitle"
@@ -72,19 +72,17 @@
                 mandatory
                 class="elevation-0"
               >
-                <v-layout wrap>
-                  <v-flex class="xs12">
+                <v-row>
+                  <v-col class="xs12">
                     <v-btn
                       class="white--text px-6 ma-2"
                       value="default"
-                      :color="
-                        getRawColor(courseColorFromId(form.values.shortTitle))
-                      "
+                      :color="getRawColor()"
                     >
                       Default
                     </v-btn>
-                  </v-flex>
-                  <v-flex v-for="(_i, i) in 7" :key="i">
+                  </v-col>
+                  <v-col v-for="(_i, i) in 7" :key="i">
                     <v-btn
                       v-for="(_j, j) in 6"
                       :key="j"
@@ -98,8 +96,8 @@
                         >mdi-check</v-icon
                       >
                     </v-btn>
-                  </v-flex>
-                </v-layout>
+                  </v-col>
+                </v-row>
               </v-btn-toggle>
             </div>
           </div>
@@ -117,105 +115,97 @@
   </v-card>
 </template>
 
-<script>
-import colorMixin from "./../mixins/colorMixin.js";
-import { defineComponent } from "vue";
+<script setup>
+import { getRawColor, getRawTextColor } from "../mixins/colorMixin.js";
+import { ref, watch, computed, reactive } from "vue";
+import { useStore } from "../plugins/composition.js";
 
-export default defineComponent({
-  name: "CustomClass",
-  mixins: [colorMixin],
-  data: function () {
-    return {
-      dialog: false,
-      form: {
-        values: {
-          shortTitle: undefined,
-          fullTitle: undefined,
-          units: undefined,
-          inClassHours: undefined,
-          outOfClassHours: undefined,
-          colorChosen: "default",
-        },
-        rules: {
-          shortTitleRule: [
-            (v) => (v !== undefined && v.length > 0) || "Required",
-            (v) => (v !== undefined && v.length <= 8) || "Max 8 characters",
-          ],
-          fullTitleRule: [
-            (v) => (v !== undefined && v.length > 0) || "Required",
-          ],
-          numberFormRule: [
-            (v) => v === undefined || Number(v) >= 0 || "Must be nonnegative",
-          ],
-        },
-      },
-    };
-  },
-  computed: {
-    editing() {
-      return this.$store.state.customClassEditing;
-    },
-  },
-  watch: {
-    editing(classEditing) {
-      if (classEditing === undefined) {
-        return;
-      }
-      this.form.values.shortTitle = classEditing.subject_id;
-      this.form.values.fullTitle = classEditing.title;
-      this.form.values.units = classEditing.units;
-      this.form.values.inClassHours = classEditing.in_class_hours;
-      this.form.values.outOfClassHours = classEditing.out_of_class_hours;
-      this.form.values.colorChosen = classEditing.custom_color || "default";
-      this.dialog = true;
-    },
-    dialog(newDialog) {
-      if (!newDialog) {
-        this.$store.commit("cancelEditCustomClass");
-      }
-    },
+const store = useStore();
+
+const dialog = ref(false);
+const form = reactive({
+  values: {
+    shortTitle: ref(undefined),
+    fullTitle: ref(undefined),
+    units: ref(undefined),
+    inClassHours: ref(undefined),
+    outOfClassHours: ref(undefined),
+    colorChosen: ref("default"),
   },
-  methods: {
-    addCustomClass: function () {
-      let color = this.form.values.colorChosen;
-      if (color === "default") {
-        color = undefined;
-      }
-      const newClass = {
-        subject_id: this.form.values.shortTitle,
-        title: this.form.values.fullTitle,
-        total_units: Number(this.form.values.units) || 0,
-        in_class_hours: Number(this.form.values.inClassHours) || 0,
-        out_of_class_hours: Number(this.form.values.outOfClassHours) || 0,
-        custom_color: color,
-        public: false,
-        offered_fall: true,
-        offered_IAP: true,
-        offered_spring: true,
-        offered_summer: true,
-      };
-      this.dialog = false;
-      if (this.editing !== undefined) {
-        this.$store.commit("finishEditCustomClass", newClass);
-      } else {
-        this.$store.commit("addFromCard", newClass);
-      }
-    },
-    openNewClass: function () {
-      // Open the dialog for adding a new class
-      if (this.$refs.form) {
-        this.$refs.form.reset();
-      }
-      this.form.values.colorChosen = "default";
-      this.dialog = true;
-    },
-    validate: function () {
-      if (this.$refs.form.validate()) {
-        this.addCustomClass();
-      }
-    },
+  rules: {
+    shortTitleRule: [
+      (v) => (v && v.length > 0) || "Required",
+      (v) => (v && v.length <= 8) || "Max 8 characters",
+    ],
+    fullTitleRule: [(v) => (v && v.length > 0) || "Required"],
+    numberFormRule: [(v) => !v || Number(v) >= 0 || "Must be nonnegative"],
   },
 });
+
+// template ref
+const formElement = ref(null);
+
+const editing = computed(() => store.customClassEditing);
+
+watch(editing, (classEditing) => {
+  if (classEditing === undefined) {
+    return;
+  }
+  form.values.shortTitle = classEditing.subject_id;
+  form.values.fullTitle = classEditing.title;
+  form.values.units = classEditing.units;
+  form.values.inClassHours = classEditing.in_class_hours;
+  form.values.outOfClassHours = classEditing.out_of_class_hours;
+  form.values.colorChosen = classEditing.custom_color || "default";
+  dialog.value = true;
+});
+
+watch(dialog, (newDialog) => {
+  if (!newDialog) {
+    store.cancelEditCustomClass();
+  }
+});
+
+const addCustomClass = () => {
+  let color = form.values.colorChosen;
+  if (color === "default") {
+    color = undefined;
+  }
+  const newClass = {
+    subject_id: form.values.shortTitle,
+    title: form.values.fullTitle,
+    total_units: Number(form.values.units) || 0,
+    in_class_hours: Number(form.values.inClassHours) || 0,
+    out_of_class_hours: Number(form.values.outOfClassHours) || 0,
+    custom_color: color,
+    public: false,
+    offered_fall: true,
+    offered_IAP: true,
+    offered_spring: true,
+    offered_summer: true,
+  };
+  dialog.value = false;
+  if (editing.value !== undefined) {
+    store.finishEditCustomClass(newClass);
+  } else {
+    store.addFromCard(newClass);
+  }
+};
+
+const openNewClass = () => {
+  // Open the dialog for adding a new class
+  if (formElement.value) {
+    formElement.value.reset();
+  }
+  form.values.colorChosen = "default";
+  dialog.value = true;
+};
+
+const validate = () => {
+  if (formElement.value && formElement.value.validate()) {
+    addCustomClass();
+  }
+};
 </script>
 
 <style scoped>
diff --git a/src/components/ExpansionReqs.vue b/src/components/ExpansionReqs.vue
index cfb53ffc..5268b9aa 100644
--- a/src/components/ExpansionReqs.vue
+++ b/src/components/ExpansionReqs.vue
@@ -29,7 +29,7 @@
         >
           {{ requirement.reqs[0].expansionDesc }}
         </span>
-        <subject-scroll
+        <SubjectScroll
           :subjects="requirement.reqs[0].reqs"
           :data-cy="'doubleScroller0' + reqID"
           @click-subject="clickSubject($event, 0)"
@@ -45,14 +45,14 @@
         >
           {{ requirement.reqs[1].expansionDesc }}
         </span>
-        <subject-scroll
+        <SubjectScroll
           :subjects="requirement.reqs[1].reqs"
           :data-cy="'doubleScroller1' + reqID"
           @click-subject="clickSubject($event, 1)"
         />
       </div>
     </div>
-    <subject-scroll
+    <SubjectScroll
       v-else
       :subjects="requirement.reqs"
       :data-cy="'singleScroller' + reqID"
@@ -74,115 +74,79 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import SubjectScroll from "../components/SubjectScroll.vue";
 import $ from "jquery";
-import Vue from "vue";
-import { defineComponent } from "vue";
+import { ref, computed, watch, nextTick } from "vue";
 
-export default defineComponent({
-  name: "ExpansionReqs",
-  components: {
-    "subject-scroll": SubjectScroll,
+const props = defineProps({
+  requirement: {
+    type: Object,
+    required: true,
   },
-  props: {
-    requirement: {
-      type: Object,
-      required: true,
-    },
-    reqID: {
-      type: String,
-      required: true,
-    },
-  },
-  data: function () {
-    return {
-      open: false,
-      expansionIndex: 0,
-      whichScroller: 0,
-      scrollerClicked: undefined,
-      subjectClicked: undefined,
-    };
+  reqID: {
+    type: String,
+    required: true,
   },
-  computed: {
-    doubleScroller: function () {
-      if (this.requirement.reqs.length === 2) {
-        return this.requirement.reqs.reduce(function (acc, nxt) {
-          return acc && nxt.reqs !== undefined;
-        }, true);
-      }
-      return false;
-    },
-    getNextReqs: function () {
-      if (!this.open) {
-        return undefined;
-      }
+});
 
-      if (this.scrollerClicked !== undefined) {
-        return this.requirement.reqs[this.scrollerClicked].reqs[
-          this.subjectClicked.index
-        ];
-      } else {
-        return this.requirement.reqs[this.subjectClicked.index];
-      }
-    },
-  },
-  watch: {
-    reqID: function () {
-      this.open = false;
-    },
+const emit = defineEmits(["click-subject", "close-expansion"]);
+
+const open = ref(false);
+const expansionIndex = ref(0);
+const whichScroller = ref(0);
+const scrollerClicked = ref(undefined);
+const subjectClicked = ref(undefined);
+
+const doubleScroller = computed(() => {
+  if (props.requirement.reqs.length === 2) {
+    return props.requirement.reqs.reduce(function (acc, nxt) {
+      return acc && nxt.reqs !== undefined;
+    }, true);
+  }
+  return false;
+});
+
+const getNextReqs = computed(() => {
+  if (!open.value) {
+    return undefined;
+  }
+
+  if (scrollerClicked.value !== undefined) {
+    return props.requirement.reqs[scrollerClicked.value].reqs[
+      subjectClicked.value.index
+    ];
+  } else {
+    return props.requirement.reqs[subjectClicked.value.index];
+  }
+});
+
+watch(
+  () => props.reqID,
+  () => {
+    open.value = false;
   },
-  methods: {
-    clickSubject: function (subj, scroller) {
-      this.scrollerClicked = scroller;
-      this.subjectClicked = subj;
+);
 
-      let scrollPointID;
-      let nextReqs;
-      if (scroller !== undefined) {
-        scrollPointID =
-          this.reqID + "." + this.whichScroller + "." + subj.index;
-        nextReqs = this.requirement.reqs[scroller].reqs[subj.index];
-      } else {
-        scrollPointID = this.reqID + "." + subj.index;
-        nextReqs = this.requirement.reqs[subj.index];
-      }
+const clickSubject = (subj, scroller) => {
+  scrollerClicked.value = scroller;
+  subjectClicked.value = subj;
 
-      if (nextReqs.reqs !== undefined) {
-        this.expansionIndex = subj.index;
-        this.open = true;
-        Vue.nextTick(function () {
-          const scrollPoint = $("#" + $.escapeSelector(scrollPointID));
-          const topPoint = scrollPoint.offset().top;
-          const cardBody = $("#cardBody");
-          cardBody.animate(
-            {
-              scrollTop:
-                topPoint - cardBody.offset().top + cardBody.scrollTop() - 10,
-            },
-            200,
-          );
-        });
-      } else {
-        if (subj.subject_id.indexOf("GIR:") >= 0) {
-          subj.subject_id = subj.subject_id.substring(4);
-        }
-        this.$emit("click-subject", subj);
-      }
-    },
-    closeMe: function () {
-      this.$emit("close-expansion");
-    },
-    closeMyExpansion: function () {
-      this.open = false;
-      let scrollPoint;
-      if (!this.doubleScroller) {
-        scrollPoint = $("#" + $.escapeSelector(this.reqID));
-      } else {
-        scrollPoint = $(
-          "#ds" + this.whichScroller + $.escapeSelector(this.reqID),
-        );
-      }
+  let scrollPointID;
+  let nextReqs;
+  if (scroller !== undefined) {
+    scrollPointID = props.reqID + "." + whichScroller.value + "." + subj.index;
+    nextReqs = props.requirement.reqs[scroller].reqs[subj.index];
+  } else {
+    scrollPointID = props.reqID + "." + subj.index;
+    nextReqs = props.requirement.reqs[subj.index];
+  }
+
+  if (nextReqs.reqs !== undefined) {
+    expansionIndex.value = subj.index;
+    open.value = true;
+    nextTick(function () {
+      const scrollPoint = $("#" + $.escapeSelector(scrollPointID));
       const topPoint = scrollPoint.offset().top;
       const cardBody = $("#cardBody");
       cardBody.animate(
@@ -190,11 +154,40 @@ export default defineComponent({
           scrollTop:
             topPoint - cardBody.offset().top + cardBody.scrollTop() - 10,
         },
-        350,
+        200,
       );
+    });
+  } else {
+    if (subj.subject_id.indexOf("GIR:") >= 0) {
+      subj.subject_id = subj.subject_id.substring(4);
+    }
+    emit("click-subject", subj);
+  }
+};
+
+const closeMe = () => {
+  emit("close-expansion");
+};
+
+const closeMyExpansion = () => {
+  open.value = false;
+  let scrollPoint;
+  if (!doubleScroller.value) {
+    scrollPoint = $("#" + $.escapeSelector(props.reqID));
+  } else {
+    scrollPoint = $(
+      "#ds" + whichScroller.value + $.escapeSelector(props.reqID),
+    );
+  }
+  const topPoint = scrollPoint.offset().top;
+  const cardBody = $("#cardBody");
+  cardBody.animate(
+    {
+      scrollTop: topPoint - cardBody.offset().top + cardBody.scrollTop() - 10,
     },
-  },
-});
+    350,
+  );
+};
 </script>
 
 <style scoped>
diff --git a/src/components/FilterSet.vue b/src/components/FilterSet.vue
index ce06755b..68b60f8e 100644
--- a/src/components/FilterSet.vue
+++ b/src/components/FilterSet.vue
@@ -17,54 +17,49 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  name: "FilterSet",
-  props: {
-    value: {
-      type: Array,
-      required: true,
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    filters: {
-      type: Array,
-      required: true,
-    },
+<script setup>
+const props = defineProps({
+  value: {
+    type: Array,
+    required: true,
   },
-  methods: {
-    /* selectionIndices : a list of the indices of selected filters
-
-    produces an array of booleans filtersSelected, such that for
-    0 <= i < filters.length, filtersSelected[i] is true iff
-    i is in selectionIndices
-
-    emits an input event with this array to let the search menu know
-    */
-    changeFilter(selectionIndices) {
-      const filtersSelected = this.filters.map(
-        (f, i) => selectionIndices.indexOf(i) >= 0,
-      );
-      this.$emit("input", filtersSelected);
-    },
-    /*
-    Focuses the search input after a filter is selected so typing in searchbar
-    can begin immediately after
-    */
-    buttonClicked() {
-      document.getElementById("searchInputTF").focus();
-    },
-    cssID(name) {
-      return (
-        "filter-" + name.replace(/[~!@$%^&*()+=,./';:"?><[\]\\{}|`#]/gi, "-")
-      );
-    },
+  label: {
+    type: String,
+    required: true,
+  },
+  filters: {
+    type: Array,
+    required: true,
   },
 });
+
+const emit = defineEmits(["input"]);
+
+/* selectionIndices : a list of the indices of selected filters
+
+  produces an array of booleans filtersSelected, such that for
+  0 <= i < filters.length, filtersSelected[i] is true iff
+  i is in selectionIndices
+
+  emits an input event with this array to let the search menu know
+  */
+const changeFilter = (selectionIndices) => {
+  const filtersSelected = props.filters.map(
+    (_f, i) => selectionIndices.indexOf(i) >= 0,
+  );
+  emit("input", filtersSelected);
+};
+/*
+  Focuses the search input after a filter is selected so typing in searchbar
+  can begin immediately after
+  */
+const buttonClicked = () => {
+  document.getElementById("searchInputTF").focus();
+};
+
+const cssID = (name) => {
+  return "filter-" + name.replace(/[~!@$%^&*()+=,./';:"?><[\]\\{}|`#]/gi, "-");
+};
 </script>
 
 <style scoped>
diff --git a/src/components/ImportExport.vue b/src/components/ImportExport.vue
index 0362b670..ef743c37 100644
--- a/src/components/ImportExport.vue
+++ b/src/components/ImportExport.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-layout grow>
+  <v-row class="grow" no-gutters>
     <v-btn
       class="collapse-button"
       outlined
@@ -63,15 +63,15 @@
           />
 
           <v-spacer />
-          <v-flex v-if="otherRoadHasName(roadtitle)">
+          <v-col v-if="otherRoadHasName(roadtitle)">
             <v-card color="red">
               <v-card-text>
                 <b>Invalid input!</b>
                 There's already a road with this name.
               </v-card-text>
             </v-card>
-          </v-flex>
-          <v-flex v-if="badinput">
+          </v-col>
+          <v-col v-if="badinput">
             <v-card color="red">
               <v-card-text>
                 <b>Invalid input!</b>
@@ -79,7 +79,7 @@
                 uploaded/pasted a valid '.road' file.
               </v-card-text>
             </v-card>
-          </v-flex>
+          </v-col>
         </v-card-text>
 
         <v-card-actions>
@@ -96,221 +96,200 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
-  </v-layout>
+  </v-row>
 </template>
 
-<script>
-import simpleSSMixin from "./../mixins/sanitizeSubjects.js";
-import { defineComponent } from "vue";
+<script setup>
+import { ref, computed } from "vue";
+import { useStore } from "../plugins/composition.js";
+import { getSimpleSelectedSubjects } from "../mixins/sanitizeSubjects.js";
+import { flatten } from "../plugins/browserSupport.js";
 
-export default defineComponent({
-  name: "ImportExport",
-  components: {},
-  mixins: [simpleSSMixin],
-  data: function () {
-    return {
-      dialog: false,
-      inputtext: "",
-      roadtitle: "",
-      badinput: false,
-    };
-  },
-  computed: {
-    activeRoad() {
-      return this.$store.state.activeRoad;
-    },
-    roads() {
-      return this.$store.state.roads;
-    },
-  },
-  mounted() {
-    // read uploaded files
-  },
-  methods: {
-    onFileChange: function (event) {
-      const reader = new FileReader();
-      reader.onload = (event) => {
-        this.inputtext = event.target.result;
-      };
+const store = useStore();
 
-      if (event.target.files[0]) {
-        // would have been undefined if user exited file select dialog
-        const name = event.target.files[0].name;
-        // check for valid type hopefully
-        if (name.substr(name.length - 5) === ".road") {
-          // update title unless they already input one
-          if (this.roadtitle === "") {
-            this.roadtitle = name.substr(0, name.length - 5);
-          }
-          // finally, read the file
-          reader.readAsText(event.target.files[0]);
-        } else {
-          // wrong file type
-          this.badinput = true;
-          setTimeout(() => {
-            this.badinput = false;
-          }, 7000);
-        }
+const emit = defineEmits(["add-road"]);
+
+const dialog = ref(false);
+const inputtext = ref("");
+const roadtitle = ref("");
+const badinput = ref(false);
+
+const activeRoad = computed(() => store.activeRoad);
+const roads = computed(() => store.roads);
+
+const onFileChange = (event) => {
+  const reader = new FileReader();
+  reader.onload = (event) => {
+    inputtext.value = event.target.result;
+  };
+
+  if (event.target.files[0]) {
+    // would have been undefined if user exited file select dialog
+    const name = event.target.files[0].name;
+    // check for valid type hopefully
+    if (name.substr(name.length - 5) === ".road") {
+      // update title unless they already input one
+      if (roadtitle.value === "") {
+        roadtitle.value = name.substr(0, name.length - 5);
       }
-    },
-    exportRoad: function () {
-      const filename = this.roads[this.activeRoad].name + ".road";
+      // finally, read the file
+      reader.readAsText(event.target.files[0]);
+    } else {
+      // wrong file type
+      badinput.value = true;
+      setTimeout(() => {
+        badinput.value = false;
+      }, 7000);
+    }
+  }
+};
 
-      const roadSubjects = this.flatten(
-        this.roads[this.activeRoad].contents.selectedSubjects,
-      );
-      const formattedRoadContents = Object.assign(
-        { coursesOfStudy: ["girs"], progressOverrides: [] },
-        this.roads[this.activeRoad].contents,
-        { selectedSubjects: roadSubjects },
-      );
+const exportRoad = () => {
+  const filename = roads.value[activeRoad.value].name + ".road";
 
-      const text = JSON.stringify(formattedRoadContents);
+  const roadSubjects = flatten(
+    roads.value[activeRoad.value].contents.selectedSubjects,
+  );
+  const formattedRoadContents = Object.assign(
+    { coursesOfStudy: ["girs"], progressOverrides: [] },
+    roads.value[activeRoad.value].contents,
+    { selectedSubjects: roadSubjects },
+  );
 
-      // for some reason this is the way you download files...
-      //    create an element, click it, and remove it
-      const element = document.createElement("a");
-      element.setAttribute(
-        "href",
-        "data:text/plain;charset=utf-8," + encodeURIComponent(text),
-      );
-      element.setAttribute("download", filename);
+  const text = JSON.stringify(formattedRoadContents);
 
-      element.style.display = "none";
-      document.body.appendChild(element);
+  // for some reason this is the way you download files...
+  //    create an element, click it, and remove it
+  const element = document.createElement("a");
+  element.setAttribute(
+    "href",
+    "data:text/plain;charset=utf-8," + encodeURIComponent(text),
+  );
+  element.setAttribute("download", filename);
 
-      element.click();
+  element.style.display = "none";
+  document.body.appendChild(element);
 
-      document.body.removeChild(element);
-    },
-    importRoad: async function () {
-      let fail = false;
-      // check for legal input
-      if (
-        this.inputtext === "" ||
-        this.roadtitle === "" ||
-        this.otherRoadHasName(this.roadtitle)
-      ) {
-        fail = true;
-      }
+  element.click();
+
+  document.body.removeChild(element);
+};
+
+const importRoad = async () => {
+  let fail = false;
+  // check for legal input
+  if (
+    inputtext.value === "" ||
+    roadtitle.value === "" ||
+    otherRoadHasName(roadtitle.value)
+  ) {
+    fail = true;
+  }
 
-      const expectedFields = [
-        "index",
-        "title",
-        "overrideWarnings",
-        "semester",
-        "units",
-        "subject_id",
-      ];
+  const expectedFields = [
+    "index",
+    "title",
+    "overrideWarnings",
+    "semester",
+    "units",
+    "subject_id",
+  ];
 
-      if (!fail) {
-        try {
-          // parse text and add to roads
-          const obj = JSON.parse(this.inputtext);
-          // sanitize
-          // progressOverrides must be defined
-          if (obj.progressOverrides === undefined) {
-            obj.progressOverrides = {};
+  if (!fail) {
+    try {
+      // parse text and add to roads
+      const obj = JSON.parse(inputtext.value);
+      // sanitize
+      // progressOverrides must be defined
+      if (obj.progressOverrides === undefined) {
+        obj.progressOverrides = {};
+      }
+      // subject_id issue
+      const newss = obj.selectedSubjects.map((s) => {
+        if ("id" in s) {
+          s.subject_id = s.id;
+          delete s.id;
+        }
+        return s;
+      });
+      obj.selectedSubjects = newss;
+
+      const ss = obj.selectedSubjects
+        .map((s) => {
+          // make sure it has everything, if not fill in from subjectsIndex or genericCourses
+          let subject;
+          if (store.subjectsIndex[s.subject_id] !== undefined) {
+            subject = store.subjectsInfo[store.subjectsIndex[s.subject_id]];
+          } else if (store.genericIndex[s.subject_id] !== undefined) {
+            subject = store.genericCourses[store.genericIndex[s.subject_id]];
           }
-          // subject_id issue
-          const newss = obj.selectedSubjects.map((s) => {
-            if ("id" in s) {
-              s.subject_id = s.id;
-              delete s.id;
-            }
-            return s;
-          });
-          obj.selectedSubjects = newss;
 
-          const ss = obj.selectedSubjects
-            .map((s) => {
-              // make sure it has everything, if not fill in from subjectsIndex or genericCourses
-              let subject;
-              if (this.$store.state.subjectsIndex[s.subject_id] !== undefined) {
-                subject =
-                  this.$store.state.subjectsInfo[
-                    this.$store.state.subjectsIndex[s.subject_id]
-                  ];
-              } else if (
-                this.$store.state.genericIndex[s.subject_id] !== undefined
-              ) {
-                subject =
-                  this.$store.state.genericCourses[
-                    this.$store.state.genericIndex[s.subject_id]
-                  ];
-              }
+          if (subject === undefined) {
+            const oldSubjects = store.subjectsInfo.filter((subj) => {
+              return subj.old_id === s.subject_id;
+            });
 
-              if (subject === undefined) {
-                const oldSubjects = this.$store.state.subjectsInfo.filter(
-                  (subj) => {
-                    return subj.old_id === s.subject_id;
-                  },
-                );
+            if (oldSubjects.length > 0) {
+              subject = oldSubjects[0];
+              s.subject_id = subject.subject_id;
+            }
+          }
 
-                if (oldSubjects.length > 0) {
-                  subject = oldSubjects[0];
-                  s.subject_id = subject.subject_id;
+          if (subject !== undefined) {
+            expectedFields.forEach((f) => {
+              if (s[f] === undefined) {
+                // right now (4/16/19) 'units' is the only one that doesn't match and needs an exception
+                if (f === "units") {
+                  s[f] = subject.total_units;
+                } else {
+                  s[f] = subject[f];
                 }
               }
-
-              if (subject !== undefined) {
-                expectedFields.forEach((f) => {
-                  if (s[f] === undefined) {
-                    // right now (4/16/19) 'units' is the only one that doesn't match and needs an exception
-                    if (f === "units") {
-                      s[f] = subject.total_units;
-                    } else {
-                      s[f] = subject[f];
-                    }
-                  }
-                });
-                return s;
-              }
-              console.log("ignoring " + s.subject_id);
-              return undefined;
-            })
-            .filter((s) => {
-              return s !== undefined;
             });
+            return s;
+          }
+          console.log("ignoring " + s.subject_id);
+          return undefined;
+        })
+        .filter((s) => {
+          return s !== undefined;
+        });
 
-          // convert selected subjects to more convenient format
-          const simpless = await this.getSimpleSelectedSubjects(ss);
-
-          this.$emit(
-            "add-road",
-            this.roadtitle,
-            obj.coursesOfStudy,
-            simpless,
-            obj.progressOverrides,
-          );
-        } catch (error) {
-          fail = true;
-          console.log("import failed with error:");
-          console.error(error);
-        }
-      }
+      // convert selected subjects to more convenient format
+      const simpless = await getSimpleSelectedSubjects(ss);
 
-      if (fail) {
-        this.badinput = true;
-        // make warning go away after 7 seconds
-        setTimeout(() => {
-          this.badinput = false;
-        }, 7000);
-      } else {
-        this.badinput = false;
-        this.dialog = false;
-      }
-    },
-    otherRoadHasName: function (roadName) {
-      const otherRoadNames = Object.keys(this.roads).filter(
-        function (road) {
-          return this.roads[road].name.toLowerCase() === roadName.toLowerCase();
-        }.bind(this),
+      emit(
+        "add-road",
+        roadtitle.value,
+        obj.coursesOfStudy,
+        simpless,
+        obj.progressOverrides,
       );
-      return otherRoadNames.length > 0;
-    },
-  },
-});
+    } catch (error) {
+      fail = true;
+      console.log("import failed with error:");
+      console.error(error);
+    }
+  }
+
+  if (fail) {
+    badinput.value = true;
+    // make warning go away after 7 seconds
+    setTimeout(() => {
+      badinput.value = false;
+    }, 7000);
+  } else {
+    badinput.value = false;
+    dialog.value = false;
+  }
+};
+
+const otherRoadHasName = (roadName) => {
+  const otherRoadNames = Object.keys(roads.value).filter((road) => {
+    return roads.value[road].name.toLowerCase() === roadName.toLowerCase();
+  });
+  return otherRoadNames.length > 0;
+};
 </script>
 
 <style scoped>
diff --git a/src/components/Requirement.vue b/src/components/Requirement.vue
index 01649e9b..061db2c9 100644
--- a/src/components/Requirement.vue
+++ b/src/components/Requirement.vue
@@ -1,14 +1,14 @@
 <template>
   <div
     class="requirement"
-    :draggable="canDrag(req)"
+    :draggable="canDrag(store, req)"
     :data-cy="'requirement' + req['list-id']"
     @dragstart="dragStart"
     @mouseover="hoveringOver = true"
     @mouseleave="hoveringOver = false"
   >
-    <v-layout>
-      <v-flex>
+    <v-row no-gutters>
+      <v-col class="grow">
         <div v-if="!isLeaf" style="text-wrap: wrap">
           <span v-if="'title-no-degree' in req && req['title-no-degree'] != ''">
             {{ req["title-no-degree"] }}
@@ -29,8 +29,7 @@
             <div
               v-if="
                 req['list-id'] in
-                $store.state.roads[$store.state.activeRoad].contents
-                  .progressAssertions
+                store.roads[store.activeRoad].contents.progressAssertions
               "
               style="display: inline-block"
             >
@@ -38,8 +37,9 @@
                 v-if="
                   !(
                     'ignore' in
-                    $store.state.roads[$store.state.activeRoad].contents
-                      .progressAssertions[req['list-id']]
+                    store.roads[store.activeRoad].contents.progressAssertions[
+                      req['list-id']
+                    ]
                   )
                 "
                 small
@@ -59,16 +59,16 @@
             <span
               v-if="
                 req['list-id'] in
-                $store.state.roads[$store.state.activeRoad].contents
-                  .progressAssertions
+                store.roads[store.activeRoad].contents.progressAssertions
               "
             >
               <v-icon
                 v-if="
                   !(
                     'ignore' in
-                    $store.state.roads[$store.state.activeRoad].contents
-                      .progressAssertions[req['list-id']]
+                    store.roads[store.activeRoad].contents.progressAssertions[
+                      req['list-id']
+                    ]
                   )
                 "
                 small
@@ -86,8 +86,8 @@
         <span v-if="req.max === 0 && isLeaf" style="font-style: italic">
           (optional)
         </span>
-      </v-flex>
-      <v-flex>
+      </v-col>
+      <v-col class="shrink" style="min-width: 7.8ch">
         <div>
           <span v-if="hoveringOver && isLeaf" style="float: right">
             <v-icon
@@ -126,93 +126,91 @@
             </v-icon>
           </span>
         </div>
-      </v-flex>
-    </v-layout>
+      </v-col>
+    </v-row>
     <div :class="percentage_bar" :style="percentage"></div>
   </div>
 </template>
 
 <script>
-import classInfoMixin from "../mixins/classInfo.js";
 import { defineComponent } from "vue";
 
 export default defineComponent({
   name: "RequirementComponent",
-  mixins: [classInfoMixin],
-  props: {
-    req: {
-      type: Object,
-      required: true,
-    },
-    isLeaf: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  data: function () {
-    return {
-      open: [],
-      hoveringOver: false,
-      iconHover: false,
-      petitionHover: false,
-    };
-  },
-  computed: {
-    iconColor: function () {
-      return this.iconHover ? "info" : "grey";
-    },
-    petitionColor: function () {
-      return this.petitionHover ? "info" : "grey";
-    },
-    reqFulfilled: function () {
-      return {
-        fulfilled: !!this.req.fulfilled,
-      };
-    },
-    percentageTextColor: function () {
-      return this.req.fulfilled
-        ? "#008400"
-        : this.req.percent_fulfilled > 15
-          ? "#d1b82b"
-          : "#d3701f";
-    },
-    percentageColor: function () {
-      return this.req.fulfilled
-        ? "#00b300"
-        : this.req.percent_fulfilled > 15
-          ? "#efce15"
-          : "#ef8214";
-    },
-    percentage: function () {
-      const pfulfilled = this.req.percent_fulfilled;
-      return `--percent: ${pfulfilled}%; --bar-color: ${this.percentageColor}; --bg-color: lightgrey`;
-    },
-    percentage_bar: function () {
-      const showPBar = "reqs" in this.req || "threshold" in this.req;
-      return {
-        "percentage-bar": showPBar,
-        "p-bar": showPBar,
-      };
-    },
+});
+</script>
+
+<script setup>
+import { canDrag, classInfo } from "../mixins/classInfo.js";
+import { useStore } from "../plugins/composition.js";
+import { ref, computed } from "vue";
+
+const store = useStore();
+
+const props = defineProps({
+  req: {
+    type: Object,
+    required: true,
   },
-  methods: {
-    dragStart: function (event) {
-      let usedInfo = this.classInfo(this.req);
-      if (usedInfo === undefined) {
-        usedInfo = { subject_id: this.req.req };
-      }
-      event.dataTransfer.setData(
-        "classData",
-        JSON.stringify({ isNew: true, classIndex: -1 }),
-      );
-      this.$store.commit("dragStartClass", {
-        dragstart: event,
-        classInfo: usedInfo,
-        isNew: true,
-      });
-    },
+  isLeaf: {
+    type: Boolean,
+    required: true,
   },
 });
+
+// const open = ref([]);
+const hoveringOver = ref(false);
+const iconHover = ref(false);
+const petitionHover = ref(false);
+
+const iconColor = computed(() => (iconHover.value ? "info" : "grey"));
+const petitionColor = computed(() => (petitionHover.value ? "info" : "grey"));
+const reqFulfilled = computed(() => {
+  return {
+    fulfilled: !!props.req.fulfilled,
+  };
+});
+const percentageTextColor = computed(() => {
+  return props.req.fulfilled
+    ? "#008400"
+    : props.req.percent_fulfilled > 15
+      ? "#d1b82b"
+      : "#d3701f";
+});
+const percentageColor = computed(() => {
+  return props.req.fulfilled
+    ? "#00b300"
+    : props.req.percent_fulfilled > 15
+      ? "#efce15"
+      : "#ef8214";
+});
+const percentage = computed(() => {
+  const pfulfilled = props.req.percent_fulfilled;
+  return `--percent: ${pfulfilled}%; --bar-color: ${percentageColor.value}; --bg-color: lightgrey`;
+});
+const percentage_bar = computed(() => {
+  const showPBar = "reqs" in props.req || "threshold" in props.req;
+  return {
+    "percentage-bar": showPBar,
+    "p-bar": showPBar,
+  };
+});
+
+const dragStart = (event) => {
+  let usedInfo = classInfo(store, props.req);
+  if (usedInfo === undefined) {
+    usedInfo = { subject_id: props.req.req };
+  }
+  event.dataTransfer.setData(
+    "classData",
+    JSON.stringify({ isNew: true, classIndex: -1 }),
+  );
+  store.dragStartClass({
+    dragstart: event,
+    classInfo: usedInfo,
+    isNew: true,
+  });
+};
 </script>
 
 <style scoped>
diff --git a/src/components/Road.vue b/src/components/Road.vue
index 1310f1d6..a2531229 100644
--- a/src/components/Road.vue
+++ b/src/components/Road.vue
@@ -4,7 +4,7 @@
   <v-expansion-panels v-model="visibleList" multiple accordion>
     <!-- v-for index in N starts at 1... -->
     <!-- FYI can't use key as prop: https://stackoverflow.com/questions/47783396/access-key-from-child-component-in-vue -->
-    <semester
+    <Semester
       v-for="index in numSems"
       :key="index - 1"
       :index="index - 1"
@@ -23,7 +23,7 @@
       small
       style="position: fixed; right: 1em; bottom: 1em"
       class="secondary"
-      @click="$store.commit('cancelAddFromCard')"
+      @click="store.cancelAddFromCard()"
     >
       <v-icon>mdi-cancel</v-icon>
     </v-btn>
@@ -72,97 +72,106 @@
 </template>
 
 <script>
-import Semester from "./Semester.vue";
 import { defineComponent } from "vue";
 
 export default defineComponent({
   name: "RoadComponent",
-  components: {
-    semester: Semester,
+});
+</script>
+
+<script setup>
+import Semester from "./Semester.vue";
+import { ref, watch, computed, onMounted } from "vue";
+import { useStore, useCookies } from "../plugins/composition.js";
+
+const store = useStore();
+const cookies = useCookies();
+
+const props = defineProps({
+  selectedSubjects: {
+    type: Array,
+    required: true,
   },
-  props: {
-    selectedSubjects: {
-      type: Array,
-      required: true,
-    },
-    roadID: {
-      type: String,
-      required: true,
-    },
-    addingFromCard: {
-      type: Boolean,
-      required: true,
-    },
-    dragSemesterNum: {
-      type: Number,
-      required: true,
-    },
+  roadID: {
+    type: String,
+    required: true,
   },
-  data: function () {
-    const defaultOpen = [
-      false,
-      true,
-      false,
-      true,
-      true,
-      false,
-      true,
-      true,
-      false,
-      true,
-      true,
-      false,
-      true,
-    ];
-    const numSemesters = 16;
-    return {
-      visibleList: (numSemesters >= 13
-        ? defaultOpen.concat([true, false, true])
-        : defaultOpen
-      ).reduce((out, bool, index) => (bool ? out.concat(index) : out), []),
-      openRoadSettings: false,
-      numSems: numSemesters,
-    };
+  addingFromCard: {
+    type: Boolean,
+    required: true,
   },
-  computed: {
-    year: {
-      get: function () {
-        return this.$store.getters.userYear;
-      },
-      set: function (newYear) {
-        this.$emit("change-year", newYear);
-      },
-    },
-    hideIAP: {
-      get: function () {
-        return this.$store.getters.hideIAP;
-      },
-      set: function (value) {
-        this.$store.commit("setHideIAP", value);
-      },
-    },
+  dragSemesterNum: {
+    type: Number,
+    required: true,
   },
-  watch: {
-    visibleList: function (newVisibleList) {
-      if (this.$store.state.cookiesAllowed) {
-        this.$cookies.set(
-          "visibleList" + this.roadID,
-          JSON.stringify(newVisibleList),
-        );
-      }
-    },
+});
+
+const emit = defineEmits(["change-year"]);
+
+const defaultOpen = [
+  false,
+  true,
+  false,
+  true,
+  true,
+  false,
+  true,
+  true,
+  false,
+  true,
+  true,
+  false,
+  true,
+];
+const numSemesters = 16;
+
+const visibleList = ref(
+  (numSemesters >= 13
+    ? defaultOpen.concat([true, false, true])
+    : defaultOpen
+  ).reduce((out, bool, index) => (bool ? out.concat(index) : out), []),
+);
+
+const openRoadSettings = ref(false);
+const numSems = ref(numSemesters);
+
+const year = computed({
+  get: function () {
+    return store.userYear;
   },
-  mounted() {
-    const visibleList = JSON.parse(
-      this.$cookies.get("visibleList" + this.roadID),
-    );
-    if (this.$store.state.cookiesAllowed && visibleList) {
-      if (Array.isArray(visibleList) && visibleList.length === this.numSems) {
-        this.visibleList = visibleList;
-      } else {
-        this.$cookies.remove("visibleList" + this.roadID);
-      }
-    }
+  set: function (newYear) {
+    emit("change-year", newYear);
+  },
+});
+
+const hideIAP = computed({
+  get: function () {
+    return store.hideIAP;
+  },
+  set: function (value) {
+    store.setHideIAP(value);
   },
 });
+
+watch(visibleList, (newVisibleList) => {
+  if (store.cookiesAllowed) {
+    cookies.set("visibleList" + props.roadID, JSON.stringify(newVisibleList));
+  }
+});
+
+onMounted(() => {
+  const visibleListCookie = JSON.parse(
+    cookies.get("visibleList" + props.roadID),
+  );
+  if (store.cookiesAllowed && visibleListCookie) {
+    if (
+      Array.isArray(visibleListCookie) &&
+      visibleListCookie.length === numSems.value
+    ) {
+      visibleList.value = visibleListCookie;
+    } else {
+      cookies.remove("visibleList" + props.roadID);
+    }
+  }
+});
 </script>
diff --git a/src/components/RoadTabs.vue b/src/components/RoadTabs.vue
index b35939d8..2648c5cf 100644
--- a/src/components/RoadTabs.vue
+++ b/src/components/RoadTabs.vue
@@ -1,180 +1,182 @@
 <template>
-  <v-layout>
-    <v-tabs v-model="tabRoad" background-color="transparent" show-arrows>
-      <v-tabs-slider />
-      <v-tab
-        v-for="roadId in Object.keys(roads)"
-        :key="roadId"
-        :href="`#${roadId}`"
-        :data-cy="'roadTab' + roadId"
-        @click="$store.commit('setActiveRoad', roadId)"
-      >
-        {{ roads[roadId].name }}
-        <v-btn
-          v-show="roadId == tabRoad"
-          icon
-          text
-          data-cy="editRoadButton"
-          @click="
-            newRoadName = roads[roadId].name;
-            editDialog = true;
-          "
+  <v-row no-gutters>
+    <v-col class="grow">
+      <v-tabs v-model="tabRoad" background-color="transparent" show-arrows>
+        <v-tabs-slider />
+        <v-tab
+          v-for="roadId in Object.keys(roads)"
+          :key="roadId"
+          :href="`#${roadId}`"
+          :data-cy="'roadTab' + roadId"
+          @click="store.setActiveRoad(roadId)"
         >
-          <v-icon>mdi-pencil</v-icon>
-        </v-btn>
-      </v-tab>
-      <v-dialog
-        v-model="editDialog"
-        max-width="600"
-        data-cy="editRoadDialog"
-        @input="newRoadName = ''"
-      >
-        <v-card>
-          <v-btn icon text style="float: right" @click="editDialog = false">
-            <v-icon>mdi-close</v-icon>
-          </v-btn>
-          <v-card-title>Edit Road</v-card-title>
-          <v-card-text>
-            <v-text-field
-              v-if="editDialog"
-              v-model="newRoadName"
-              autofocus
-              label="Road Name"
-              data-cy="renameRoadField"
-              @keyup.enter="renameRoad"
-            />
-          </v-card-text>
-          <v-card-actions>
-            <v-spacer />
-            <v-btn
-              color="error"
-              data-cy="deleteRoadButton"
-              @click="
-                editDialog = false;
-                deleteDialog = true;
-              "
-            >
-              <v-icon>mdi-delete</v-icon>
-              Delete Road
-            </v-btn>
-            <v-btn
-              color="primary"
-              :disabled="otherRoadHasName(tabRoad, newRoadName)"
-              data-cy="editRoadSubmitButton"
-              @click="renameRoad"
-            >
-              Submit
-            </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
-      <v-dialog
-        v-if="tabRoad in roads"
-        v-model="deleteDialog"
-        max-width="600"
-        data-cy="deleteRoadDialog"
-      >
-        <v-card>
-          <v-btn icon text style="float: right" @click="deleteDialog = false">
-            <v-icon>mdi-close</v-icon>
-          </v-btn>
-          <v-card-title
-            >Permanently Delete {{ roads[tabRoad].name }}?</v-card-title
+          {{ roads[roadId].name }}
+          <v-btn
+            v-show="roadId == tabRoad"
+            icon
+            text
+            data-cy="editRoadButton"
+            @click="
+              newRoadName = roads[roadId].name;
+              editDialog = true;
+            "
           >
-          <v-card-text>This action cannot be undone.</v-card-text>
-          <v-card-actions>
-            <v-spacer />
-            <v-btn
-              text
-              @click="
-                deleteDialog = false;
-                editDialog = true;
-              "
-            >
-              Cancel
+            <v-icon>mdi-pencil</v-icon>
+          </v-btn>
+        </v-tab>
+        <v-dialog
+          v-model="editDialog"
+          max-width="600"
+          data-cy="editRoadDialog"
+          @input="newRoadName = ''"
+        >
+          <v-card>
+            <v-btn icon text style="float: right" @click="editDialog = false">
+              <v-icon>mdi-close</v-icon>
             </v-btn>
-            <v-btn
-              color="error"
-              data-cy="deleteRoadConfirmButton"
-              @click="
-                deleteDialog = false;
-                $emit('delete-road', tabRoad);
-                newRoadName = '';
-              "
-            >
-              Delete
+            <v-card-title>Edit Road</v-card-title>
+            <v-card-text>
+              <v-text-field
+                v-if="editDialog"
+                v-model="newRoadName"
+                autofocus
+                label="Road Name"
+                data-cy="renameRoadField"
+                @keyup.enter="renameRoad"
+              />
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer />
+              <v-btn
+                color="error"
+                data-cy="deleteRoadButton"
+                @click="
+                  editDialog = false;
+                  deleteDialog = true;
+                "
+              >
+                <v-icon>mdi-delete</v-icon>
+                Delete Road
+              </v-btn>
+              <v-btn
+                color="primary"
+                :disabled="otherRoadHasName(tabRoad, newRoadName)"
+                data-cy="editRoadSubmitButton"
+                @click="renameRoad"
+              >
+                Submit
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+        <v-dialog
+          v-if="tabRoad in roads"
+          v-model="deleteDialog"
+          max-width="600"
+          data-cy="deleteRoadDialog"
+        >
+          <v-card>
+            <v-btn icon text style="float: right" @click="deleteDialog = false">
+              <v-icon>mdi-close</v-icon>
             </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
-      <v-dialog
-        v-model="addDialog"
-        max-width="600"
-        data-cy="addRoadDialog"
-        @input="newRoadName = ''"
-      >
-        <v-card>
-          <v-btn icon text style="float: right" @click="addDialog = false">
-            <v-icon>mdi-close</v-icon>
-          </v-btn>
-          <v-card-title>Create Road</v-card-title>
-          <v-card-text>
-            <v-text-field
-              v-if="addDialog"
-              v-model="newRoadName"
-              autofocus
-              placeholder="New road name"
-              data-cy="newRoadName"
-              @keyup.enter="
-                if (validRoadName) {
-                  createRoad();
-                }
-              "
-            />
-            <v-layout>
-              <v-flex xs6>
-                <v-switch
-                  v-model="duplicateRoad"
-                  label="Duplicate existing"
-                  data-cy="duplicateSwitch"
-                />
-              </v-flex>
-              <v-flex>
-                <v-select
-                  v-model="duplicateRoadSource"
-                  :disabled="!duplicateRoad"
-                  :items="Object.keys(roads)"
-                  data-cy="selectDuplicateRoadSource"
-                  autocomplete
-                >
-                  <template slot="item" slot-scope="{ item }">
-                    <slot
-                      :data-cy="'duplicateRoadSourceItem' + roads[item].id"
-                      >{{ roads[item].name }}</slot
-                    >
-                  </template>
-                  <template slot="selection" slot-scope="{ item }">
-                    {{ roads[item].name }}
-                  </template>
-                </v-select>
-              </v-flex>
-            </v-layout>
-          </v-card-text>
-          <v-card-actions>
-            <v-spacer />
-            <v-btn
-              :disabled="!validRoadName"
-              color="primary"
-              data-cy="createRoadButton"
-              @click="createRoad"
+            <v-card-title
+              >Permanently Delete {{ roads[tabRoad].name }}?</v-card-title
             >
-              Create
+            <v-card-text>This action cannot be undone.</v-card-text>
+            <v-card-actions>
+              <v-spacer />
+              <v-btn
+                text
+                @click="
+                  deleteDialog = false;
+                  editDialog = true;
+                "
+              >
+                Cancel
+              </v-btn>
+              <v-btn
+                color="error"
+                data-cy="deleteRoadConfirmButton"
+                @click="
+                  deleteDialog = false;
+                  $emit('delete-road', tabRoad);
+                  newRoadName = '';
+                "
+              >
+                Delete
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+        <v-dialog
+          v-model="addDialog"
+          max-width="600"
+          data-cy="addRoadDialog"
+          @input="newRoadName = ''"
+        >
+          <v-card>
+            <v-btn icon text style="float: right" @click="addDialog = false">
+              <v-icon>mdi-close</v-icon>
             </v-btn>
-          </v-card-actions>
-        </v-card>
-      </v-dialog>
-    </v-tabs>
-    <v-flex>
+            <v-card-title>Create Road</v-card-title>
+            <v-card-text>
+              <v-text-field
+                v-if="addDialog"
+                v-model="newRoadName"
+                autofocus
+                placeholder="New road name"
+                data-cy="newRoadName"
+                @keyup.enter="
+                  if (validRoadName) {
+                    createRoad();
+                  }
+                "
+              />
+              <v-row>
+                <v-col cols="6">
+                  <v-switch
+                    v-model="duplicateRoad"
+                    label="Duplicate existing"
+                    data-cy="duplicateSwitch"
+                  />
+                </v-col>
+                <v-col>
+                  <v-select
+                    v-model="duplicateRoadSource"
+                    :disabled="!duplicateRoad"
+                    :items="Object.keys(roads)"
+                    data-cy="selectDuplicateRoadSource"
+                    autocomplete
+                  >
+                    <template slot="item" slot-scope="{ item }">
+                      <slot
+                        :data-cy="'duplicateRoadSourceItem' + roads[item].id"
+                        >{{ roads[item].name }}</slot
+                      >
+                    </template>
+                    <template slot="selection" slot-scope="{ item }">
+                      {{ roads[item].name }}
+                    </template>
+                  </v-select>
+                </v-col>
+              </v-row>
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer />
+              <v-btn
+                :disabled="!validRoadName"
+                color="primary"
+                data-cy="createRoadButton"
+                @click="createRoad"
+              >
+                Create
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-tabs>
+    </v-col>
+    <v-col class="shrink">
       <v-btn
         type="submit"
         icon
@@ -185,105 +187,91 @@
       >
         <v-icon>mdi-plus</v-icon>
       </v-btn>
-    </v-flex>
-  </v-layout>
+    </v-col>
+  </v-row>
 </template>
 
-<script>
-import { defineComponent } from "vue";
+<script setup>
+import { ref, computed, watch } from "vue";
+import { useStore } from "../plugins/composition.js";
+
+const store = useStore();
+
+const emit = defineEmits(["delete-road", "add-road", "retrieve"]);
+
+const addDialog = ref(false);
+const deleteDialog = ref(false);
+const editDialog = ref(false);
+const duplicateRoad = ref(false);
+const duplicateRoadSource = ref("$defaultroad$");
+const newRoadName = ref("");
+const tabRoad = ref(store.activeRoad);
+
+const activeRoad = computed(() => store.activeRoad);
+const roads = computed(() => store.roads);
+const validRoadName = computed(() => {
+  return !(otherRoadHasName("", newRoadName.value) || newRoadName.value === "");
+});
+
+watch(activeRoad, () => {
+  tabRoad.value = activeRoad.value;
+});
 
-export default defineComponent({
-  name: "RoadTabs",
-  components: {},
-  data: function () {
-    return {
-      addDialog: false,
-      deleteDialog: false,
-      editDialog: false,
-      duplicateRoad: false,
-      duplicateRoadSource: "$defaultroad$",
-      newRoadName: "",
-      tabRoad: this.$store.state.activeRoad,
-    };
-  },
-  computed: {
-    activeRoad() {
-      return this.$store.state.activeRoad;
-    },
-    roads() {
-      return this.$store.state.roads;
-    },
-    validRoadName: function () {
-      return !(
-        this.otherRoadHasName("", this.newRoadName) || this.newRoadName === ""
-      );
-    },
-  },
-  watch: {
-    activeRoad: function () {
-      this.tabRoad = this.activeRoad;
-    },
-    "$store.state.unretrieved": function () {
-      if (
-        this.addDialog &&
-        this.$store.state.unretrieved.indexOf(this.duplicateRoadSource) === -1
-      ) {
-        this.addRoadFromDuplicate();
-      }
-    },
-  },
-  methods: {
-    otherRoadHasName: function (roadID, roadName) {
-      const otherRoadNames = Object.keys(this.roads).map(
-        function (road) {
-          return road === roadID
-            ? undefined
-            : this.roads[road].name.toLowerCase();
-        }.bind(this),
-      );
-      return otherRoadNames.indexOf(roadName.toLowerCase()) >= 0;
-    },
-    createRoad: function () {
-      if (!this.duplicateRoad) {
-        this.$emit("add-road", this.newRoadName);
-        this.addDialog = false;
-        this.newRoadName = "";
-      } else if (this.duplicateRoadSource in this.roads) {
-        if (
-          this.$store.state.unretrieved.indexOf(this.duplicateRoadSource) >= 0
-        ) {
-          this.$emit("retrieve", this.duplicateRoadSource);
-        } else {
-          this.addRoadFromDuplicate();
-        }
-      }
-    },
-    addRoadFromDuplicate: function () {
-      this.$emit(
-        "add-road",
-        this.newRoadName,
-        this.roads[this.duplicateRoadSource].contents.coursesOfStudy.slice(0),
-        this.roads[this.duplicateRoadSource].contents.selectedSubjects.map(
-          (semester) => semester.slice(0),
-        ),
-        Object.assign(
-          {},
-          this.roads[this.duplicateRoadSource].contents.progressOverrides,
-        ),
-      );
-      this.addDialog = false;
-      this.newRoadName = "";
-    },
-    renameRoad: function () {
-      this.$store.commit("setRoadName", {
-        id: this.tabRoad,
-        name: this.newRoadName,
-      });
-      this.editDialog = false;
-      this.newRoadName = "";
-    },
-  },
+watch(store.unretrieved, () => {
+  if (
+    addDialog.value &&
+    store.unretrieved.value.indexOf(duplicateRoadSource.value) === -1
+  ) {
+    addRoadFromDuplicate();
+  }
 });
+
+const otherRoadHasName = (roadID, roadName) => {
+  const otherRoadNames = Object.keys(roads.value).map((road) => {
+    return road === roadID ? undefined : roads.value[road].name.toLowerCase();
+  });
+  return otherRoadNames.indexOf(roadName.toLowerCase()) >= 0;
+};
+
+const createRoad = () => {
+  if (!duplicateRoad.value) {
+    emit("add-road", newRoadName.value);
+    addDialog.value = false;
+    newRoadName.value = "";
+  } else if (duplicateRoadSource.value in roads.value) {
+    if (store.unretrieved.indexOf(duplicateRoadSource.value) >= 0) {
+      emit("retrieve", duplicateRoadSource.value);
+    } else {
+      addRoadFromDuplicate();
+    }
+  }
+};
+
+const addRoadFromDuplicate = () => {
+  emit(
+    "add-road",
+    newRoadName.value,
+    roads.value[duplicateRoadSource.value].contents.coursesOfStudy.slice(0),
+    roads.value[duplicateRoadSource.value].contents.selectedSubjects.map(
+      (semester) => semester.slice(0),
+    ),
+    Object.assign(
+      {},
+      roads.value[duplicateRoadSource.value].contents.progressOverrides,
+    ),
+  );
+  addDialog.value = false;
+  newRoadName.value = "";
+};
+
+const renameRoad = () => {
+  store.setRoadName({
+    id: tabRoad.value,
+    name: newRoadName.value,
+  });
+  editDialog.value = false;
+  newRoadName.value = "";
+};
 </script>
 
 <style>
diff --git a/src/components/Semester.vue b/src/components/Semester.vue
index 71506759..777f3107 100644
--- a/src/components/Semester.vue
+++ b/src/components/Semester.vue
@@ -10,15 +10,14 @@
   >
     <v-expansion-panel-header>
       <v-container
-        grid-list-xs
         style="padding: 0px; margin-left: 0px"
         data-cy="semesterHeader"
         @dragenter="dragenter"
         @dragleave="dragleave"
         @drop="ondrop"
       >
-        <v-layout align-center style="user-select: none">
-          <v-flex xs6>
+        <v-row align="center" style="user-select: none" no-gutters>
+          <v-col cols="6">
             <span style="width: 12em; display: inline-block">
               <b>
                 <v-hover>
@@ -126,15 +125,19 @@
                 <span v-else>No Classes</span>
               </div>
             </v-tooltip>
-          </v-flex>
-          <v-layout v-if="!isOpen" xs6 style="max-width: 50%; overflow-x: auto">
-            <v-flex xs10 :style="{ color: semData.textColor }">
+          </v-col>
+          <v-row
+            v-if="!isOpen"
+            class="xs6"
+            style="max-width: 50%; overflow-x: auto"
+          >
+            <v-col cols="10" :style="{ color: semData.textColor }">
               {{ semData.message }}
-            </v-flex>
-            <v-flex
+            </v-col>
+            <v-col
               v-for="(subject, subjindex) in semesterSubjects"
               :key="subject.subject_id + '-' + subjindex + '-' + index"
-              xs3
+              cols="3"
             >
               <v-card :color="getRawColor(courseColor(subject))">
                 <div v-if="subject !== 'placeholder'">
@@ -146,14 +149,14 @@
                   </v-card-text>
                 </div>
               </v-card>
-            </v-flex>
-          </v-layout>
-          <v-layout v-else>
-            <v-flex xs10 :style="{ color: semData.textColor }">
+            </v-col>
+          </v-row>
+          <v-row v-else>
+            <v-col cols="10" :style="{ color: semData.textColor }">
               {{ semData.message }}
-            </v-flex>
-          </v-layout>
-        </v-layout>
+            </v-col>
+          </v-row>
+        </v-row>
       </v-container>
     </v-expansion-panel-header>
     <v-expansion-panel-content>
@@ -163,14 +166,13 @@
           semData.bgColor,
         ]"
         fluid
-        grid-list-md
         :data-cy="'road_' + roadID + '__semester_' + index + '_dropZone'"
         @dragenter="dragenter"
         @dragleave="dragleave"
         @drop="ondrop"
       >
-        <v-layout wrap align-center justify-center>
-          <class
+        <v-row align="center" justify="center" dense>
+          <Class
             v-for="(subject, subjindex) in semesterSubjects"
             :key="subject.subject_id + '-' + subjindex + '-' + index"
             :class-info="subject"
@@ -178,7 +180,7 @@
             :warnings="warnings[subjindex]"
             :class-index="subjindex"
           />
-          <class
+          <Class
             v-if="isActiveRoad && addingFromCard && (offeredNow || !isSameYear)"
             key="placeholder"
             class-info="placeholder"
@@ -186,506 +188,479 @@
             :warnings="[]"
             :class-index="semesterSubjects.length"
           />
-        </v-layout>
+        </v-row>
       </v-container>
     </v-expansion-panel-content>
   </v-expansion-panel>
 </template>
 
 <script>
-import Class from "./Class.vue";
-import colorMixin from "./../mixins/colorMixin.js";
-import reqFulfillment from "./../mixins/reqFulfillment.js";
-import schedule from "./../mixins/schedule.js";
 import { defineComponent } from "vue";
 
 export default defineComponent({
   name: "SemesterComponent",
-  components: {
-    class: Class,
+});
+</script>
+
+<script setup>
+import Class from "./Class.vue";
+import {
+  getRawColor,
+  getRawTextColor,
+  courseColor,
+} from "./../mixins/colorMixin.js";
+import { reqsFulfilled } from "./../mixins/reqFulfillment.js";
+import { flatten } from "./../plugins/browserSupport.js";
+import { lateSchedule } from "./../mixins/schedule.js";
+import { useStore, useVuetify } from "../plugins/composition.js";
+import { ref, computed } from "vue";
+
+const store = useStore();
+const vuetify = useVuetify();
+
+const props = defineProps({
+  selectedSubjects: {
+    type: Array,
+    required: true,
   },
-  mixins: [colorMixin, schedule, reqFulfillment],
-  props: {
-    selectedSubjects: {
-      type: Array,
-      required: true,
-    },
-    semesterSubjects: {
-      type: Array,
-      required: true,
-    },
-    index: {
-      type: Number,
-      required: true,
-    },
-    roadID: {
-      type: String,
-      required: true,
-    },
-    isOpen: {
-      type: Boolean,
-      required: true,
-    },
-    hideIap: {
-      type: Boolean,
-      required: true,
-    },
+  semesterSubjects: {
+    type: Array,
+    required: true,
   },
-  data: function () {
-    return {
-      draggingOver: false,
-      dragCount: 0,
-    };
+  index: {
+    type: Number,
+    required: true,
   },
-  computed: {
-    isActiveRoad() {
-      return this.$store.state.activeRoad === this.roadID;
-    },
-    baseYear() {
-      const today = new Date(Date.now());
-      const currentYear = today.getFullYear();
-      const baseYear = today.getMonth() >= 5 ? currentYear + 1 : currentYear;
-      return baseYear - this.$store.getters.userYear;
-    },
-    currentSemester() {
-      return this.$store.state.currentSemester;
-    },
-    itemAdding() {
-      return this.$store.state.itemAdding;
-    },
-    addingFromCard() {
-      return this.$store.state.addingFromCard;
-    },
-    subjectsLoaded: function () {
-      return Object.keys(this.$store.state.subjectsIndex).length > 0;
-    },
-    warnings: function () {
-      const allWarnings = Array(this.semesterSubjects.length).fill([]);
-      for (let i = 0; i < this.semesterSubjects.length; i++) {
-        const subjectWarnings = [];
-        if (this.semesterSubjects[i].public === false) {
-          // Suppress warnings for custom subject
-          continue;
-        }
-        const subjID = this.semesterSubjects[i].subject_id;
-        let subj;
-        if (subjID in this.$store.state.subjectsIndex) {
-          subj =
-            this.$store.state.subjectsInfo[
-              this.$store.state.subjectsIndex[subjID]
-            ];
-          const prereqString =
-            this.$store.state.subjectsInfo[
-              this.$store.state.subjectsIndex[subjID]
-            ].prerequisites;
-          const coreqString =
-            this.$store.state.subjectsInfo[
-              this.$store.state.subjectsIndex[subjID]
-            ].corequisites;
-          let prereqsfulfilled = true;
-          let coreqsfulfilled = true;
-          if (prereqString !== undefined) {
-            prereqsfulfilled = this.reqsFulfilled(
-              prereqString,
-              this.index > 0
-                ? this.previousSubjects(subj)
-                : this.concurrentSubjects,
-            );
-          }
-          if (coreqString !== undefined) {
-            coreqsfulfilled = this.reqsFulfilled(
-              coreqString,
-              this.concurrentSubjects,
-            );
-          }
-          if (subj.either_prereq_or_coreq) {
-            if (!(prereqsfulfilled || coreqsfulfilled)) {
-              subjectWarnings.push(
-                "<b>Unsatisfied corequisite or prerequisite</b> - You must satisfy either the prerequisites or corequisites for this course.",
-              );
-            }
-          } else {
-            if (!prereqsfulfilled) {
-              subjectWarnings.push(
-                "<b>Unsatisfied prerequisite</b> — One or more prerequisites are not yet fulfilled.",
-              );
-            }
-            if (!coreqsfulfilled) {
-              subjectWarnings.push(
-                "<b>Unsatisfied corequisite</b> — One or more corequisites are not yet fulfilled.",
-              );
-            }
-          }
-          if (
-            this.isScheduledSemester &&
-            this.lateSchedule(subj, this.$store.state.genericIndex)
-          ) {
-            subjectWarnings.push(
-              "<b>No schedule</b> - Classes that do not yet have a schedule may not be offered.",
-            );
-          }
-        } else if (subjID in this.$store.state.genericIndex) {
-          subj =
-            this.$store.state.genericCourses[
-              this.$store.state.genericIndex[subjID]
-            ];
-        }
-        if (subj !== undefined) {
-          const semType = (this.index - 1) % 3;
+  roadID: {
+    type: String,
+    required: true,
+  },
+  isOpen: {
+    type: Boolean,
+    required: true,
+  },
+  hideIap: {
+    type: Boolean,
+    required: true,
+  },
+});
 
-          // WARNING: be careful with injecting info from the subject like this
-          //  -- if we ever take user input, it could lead to XSS attacks from custom classes
-          //  (but right now we only ever insert info from FireRoad subjects)
-          if (this.noLongerOffered(subj)) {
-            const lastSemester = subj.source_semester.split("-");
-            subjectWarnings.push(
-              "<b>Not offered</b> - This subject is no longer offered (last offered " +
-                lastSemester.join(" ") +
-                ").",
-            );
-          } else if (this.notCurrentlyOffered(subj)) {
-            subjectWarnings.push(
-              `<b>Not offered</b> - This subject is not offered for the ${subj.not_offered_year} school year.`,
-            );
-          } else if (semType >= 0) {
-            const isUsuallyOffered = [
-              subj.offered_fall,
-              subj.offered_IAP,
-              subj.offered_spring,
-            ][semType];
-            if (!isUsuallyOffered) {
-              subjectWarnings.push(
-                "<b>Not offered</b> — According to the course catalog, " +
-                  subjID +
-                  " is not usually offered in " +
-                  this.semesterType +
-                  ".",
-              );
-            }
-          }
-        }
-        allWarnings[i] = subjectWarnings;
+const emit = defineEmits(["open-road-settings-dialog"]);
+
+const draggingOver = ref(false);
+const dragCount = ref(0);
+
+const isActiveRoad = computed(() => store.activeRoad === props.roadID);
+const baseYear = computed(() => {
+  const today = new Date(Date.now());
+  const currentYear = today.getFullYear();
+  const baseYear = today.getMonth() >= 5 ? currentYear + 1 : currentYear;
+  return baseYear - store.userYear;
+});
+const currentSemester = computed(() => store.currentSemester);
+const itemAdding = computed(() => store.itemAdding);
+const addingFromCard = computed(() => store.addingFromCard);
+const subjectsLoaded = computed(
+  () => Object.keys(store.subjectsIndex).length > 0,
+);
+
+const warnings = computed(() => {
+  const allWarnings = Array(props.semesterSubjects.length).fill([]);
+  for (let i = 0; i < props.semesterSubjects.length; i++) {
+    const subjectWarnings = [];
+    if (props.semesterSubjects[i].public === false) {
+      // Suppress warnings for custom subject
+      continue;
+    }
+    const subjID = props.semesterSubjects[i].subject_id;
+    let subj;
+    if (subjID in store.subjectsIndex) {
+      subj = store.subjectsInfo[store.subjectsIndex[subjID]];
+      const prereqString =
+        store.subjectsInfo[store.subjectsIndex[subjID]].prerequisites;
+      const coreqString =
+        store.subjectsInfo[store.subjectsIndex[subjID]].corequisites;
+      let prereqsfulfilled = true;
+      let coreqsfulfilled = true;
+      if (prereqString !== undefined) {
+        prereqsfulfilled = reqsFulfilled(
+          store,
+          prereqString,
+          props.index > 0 ? previousSubjects(subj) : concurrentSubjects.value,
+        );
       }
-      return allWarnings;
-    },
-    concurrentSubjects: function () {
-      return this.flatten(this.selectedSubjects.slice(0, this.index + 1));
-    },
-    semData: function () {
-      if (this.addingFromCard || this.draggingOver) {
-        if (!this.subjectsLoaded) {
-          return {
-            bgColor: "red",
-            message: "Loading subjects... give us a minute",
-            textColor: "DarkRed",
-            bgColorHeader:
-              "red " + (this.$vuetify.theme.dark ? "darken-5" : "lighten-5"),
-          };
-        } else if (this.itemAdding === undefined) {
-          return {
-            bgColor: "red",
-            message:
-              'If you see this message, contact courseroad@mit.edu and tell them "710".',
-            textColor: "DarkRed",
-            bgColorHeader:
-              "red" + (this.$vuetify.theme.dark ? "darken-5" : "lighten-5"),
-          };
-        } else if (this.index === 0 || this.offeredNow) {
-          return {
-            bgColor: "green",
-            message: "Add class here",
-            textColor: "DarkGreen",
-            bgColorHeader:
-              "green " + (this.$vuetify.theme.dark ? "darken-5" : "lighten-5"),
-          };
-        } else if (this.itemAddingNoLongerOffered) {
-          return {
-            bgColor: "yellow",
-            message: "Subject no longer offered",
-            textColor: "DarkGoldenRod",
-            bgColorHeader:
-              "yellow " + (this.$vuetify.theme.dark ? "darken-5" : "lighten-5"),
-          };
-        } else if (this.itemAddingNotCurrentlyOffered) {
-          return {
-            bgColor: "yellow",
-            message: "Subject not offered this year",
-            textColor: "DarkGoldenRod",
-            bgColorHeader:
-              "yellow " + (this.$vuetify.theme.dark ? "darken-5" : "lighten-5"),
-          };
-        } else if (this.isSameYear) {
-          return {
-            bgColor: "red",
-            message: "Subject not available this semester",
-            textColor: "DarkRed",
-            bgColorHeader:
-              "red " + (this.$vuetify.theme.dark ? "darken-5" : "lighten-5"),
-          };
-        } else {
-          return {
-            bgColor: "yellow",
-            message: "Subject may not be available this semester",
-            textColor: "DarkGoldenRod",
-            bgColorHeader:
-              "yellow " + (this.$vuetify.theme.dark ? "darken-5" : "lighten-5"),
-          };
+      if (coreqString !== undefined) {
+        coreqsfulfilled = reqsFulfilled(
+          store,
+          coreqString,
+          concurrentSubjects.value,
+        );
+      }
+      if (subj.either_prereq_or_coreq) {
+        if (!(prereqsfulfilled || coreqsfulfilled)) {
+          subjectWarnings.push(
+            "<b>Unsatisfied corequisite or prerequisite</b> - You must satisfy either the prerequisites or corequisites for this course.",
+          );
+        }
+      } else {
+        if (!prereqsfulfilled) {
+          subjectWarnings.push(
+            "<b>Unsatisfied prerequisite</b> — One or more prerequisites are not yet fulfilled.",
+          );
+        }
+        if (!coreqsfulfilled) {
+          subjectWarnings.push(
+            "<b>Unsatisfied corequisite</b> — One or more corequisites are not yet fulfilled.",
+          );
         }
       }
-      return {
-        bgColor: "grey",
-        message: "",
-        textColor: "",
-        bgColorHeader: "",
-      };
-    },
-    isSameYear: function () {
-      return (
-        Math.floor((this.index - 1) / 3) ===
-        Math.floor((this.currentSemester - 1) / 3)
-      );
-    },
-    isScheduledSemester: function () {
-      const today = new Date();
-      const month = today.getMonth();
-      const scheduledSemester =
-        month === 4 ? this.currentSemester + 1 : this.currentSemester;
-      return this.index === scheduledSemester;
-    },
-    itemAddingNoLongerOffered: function () {
-      return this.noLongerOffered(this.itemAdding);
-    },
-    itemAddingNotCurrentlyOffered: function () {
-      return this.notCurrentlyOffered(this.itemAdding);
-    },
-    offeredNow: function () {
-      if (
-        !this.subjectsLoaded ||
-        this.itemAdding === undefined ||
-        this.itemAddingNoLongerOffered ||
-        this.itemAddingNotCurrentlyOffered
-      ) {
-        return false;
+      if (isScheduledSemester.value && lateSchedule(subj, store.genericIndex)) {
+        subjectWarnings.push(
+          "<b>No schedule</b> - Classes that do not yet have a schedule may not be offered.",
+        );
       }
+    } else if (subjID in store.genericIndex) {
+      subj = store.genericCourses[store.genericIndex[subjID]];
+    }
+    if (subj !== undefined) {
+      const semType = (props.index - 1) % 3;
 
-      const semType = (this.index - 1) % 3;
-      if (semType >= 0 && (this.addingFromCard || this.draggingOver)) {
-        return [
-          this.itemAdding.offered_fall,
-          this.itemAdding.offered_IAP,
-          this.itemAdding.offered_spring,
+      // WARNING: be careful with injecting info from the subject like this
+      //  -- if we ever take user input, it could lead to XSS attacks from custom classes
+      //  (but right now we only ever insert info from FireRoad subjects)
+      if (noLongerOffered(subj)) {
+        const lastSemester = subj.source_semester.split("-");
+        subjectWarnings.push(
+          "<b>Not offered</b> - This subject is no longer offered (last offered " +
+            lastSemester.join(" ") +
+            ").",
+        );
+      } else if (notCurrentlyOffered(subj)) {
+        subjectWarnings.push(
+          `<b>Not offered</b> - This subject is not offered for the ${subj.not_offered_year} school year.`,
+        );
+      } else if (semType >= 0) {
+        const isUsuallyOffered = [
+          subj.offered_fall,
+          subj.offered_IAP,
+          subj.offered_spring,
         ][semType];
-      } else {
-        return this.addingFromCard;
+        if (!isUsuallyOffered) {
+          subjectWarnings.push(
+            "<b>Not offered</b> — According to the course catalog, " +
+              subjID +
+              " is not usually offered in " +
+              semesterType.value +
+              ".",
+          );
+        }
       }
-    },
-    semesterInformation: function () {
-      const classesInfo = this.semesterSubjects
-        .map(
-          function (subj) {
-            if (subj.public === false) {
-              return Object.assign({}, subj, {
-                total_units: subj.units,
-              });
-            } else if (subj.subject_id in this.$store.state.subjectsIndex) {
-              return this.$store.state.subjectsInfo[
-                this.$store.state.subjectsIndex[subj.subject_id]
-              ];
-            } else if (subj.subject_id in this.$store.state.genericIndex) {
-              return this.$store.state.genericCourses[
-                this.$store.state.genericIndex[subj.subject_id]
-              ];
-            } else {
-              return undefined;
-            }
-          }.bind(this),
-        )
-        .filter(function (subj) {
-          return subj !== undefined;
-        });
-      const totalUnits = classesInfo.reduce(function (units, subj) {
-        let tu = subj.total_units;
-        tu = isNaN(tu) ? 0 : tu;
-        return units + tu;
-      }, 0);
-      const expectedHours = function (subj) {
-        let hours = subj.in_class_hours + subj.out_of_class_hours;
-        hours = isNaN(hours) ? subj.total_units : hours;
-        hours = isNaN(hours) ? 0 : hours;
-        return {
-          hours,
-          subject_id: subj.subject_id,
-        };
+    }
+    allWarnings[i] = subjectWarnings;
+  }
+  return allWarnings;
+});
+
+const concurrentSubjects = computed(() => {
+  return flatten(props.selectedSubjects.slice(0, props.index + 1));
+});
+
+const semData = computed(() => {
+  if (addingFromCard.value || draggingOver.value) {
+    if (!subjectsLoaded.value) {
+      return {
+        bgColor: "red",
+        message: "Loading subjects... give us a minute",
+        textColor: "DarkRed",
+        bgColorHeader: "red " + (vuetify.theme.dark ? "darken-5" : "lighten-5"),
       };
-      const sumExpectedHours = function (hours, subj) {
-        return hours + subj.hours;
+    } else if (itemAdding.value === undefined) {
+      return {
+        bgColor: "red",
+        message:
+          'If you see this message, contact courseroad@mit.edu and tell them "710".',
+        textColor: "DarkRed",
+        bgColorHeader: "red" + (vuetify.theme.dark ? "darken-5" : "lighten-5"),
       };
-      const isInQuarter = function (subj, quarter) {
-        return (
-          subj.quarter_information === undefined ||
-          parseInt(subj.quarter_information.split(",")[0]) === quarter
-        );
+    } else if (props.index === 0 || offeredNow.value) {
+      return {
+        bgColor: "green",
+        message: "Add class here",
+        textColor: "DarkGreen",
+        bgColorHeader:
+          "green " + (vuetify.theme.dark ? "darken-5" : "lighten-5"),
       };
-      const expectedHoursQuarter1 = classesInfo
-        .filter((s) => isInQuarter(s, 0))
-        .map(expectedHours);
-      const totalExpectedHoursQuarter1 = expectedHoursQuarter1.reduce(
-        sumExpectedHours,
-        0,
-      );
-      const expectedHoursQuarter2 = classesInfo
-        .filter((s) => isInQuarter(s, 1))
-        .map(expectedHours);
-      const totalExpectedHoursQuarter2 = expectedHoursQuarter2.reduce(
-        sumExpectedHours,
-        0,
-      );
-      const totalExpectedHours = Math.max(
-        totalExpectedHoursQuarter1,
-        totalExpectedHoursQuarter2,
-      );
-      const anyClassInSingleQuarter = classesInfo.some(
-        (s) => s.quarter_information !== undefined,
-      );
-
+    } else if (itemAddingNoLongerOffered.value) {
+      return {
+        bgColor: "yellow",
+        message: "Subject no longer offered",
+        textColor: "DarkGoldenRod",
+        bgColorHeader:
+          "yellow " + (vuetify.theme.dark ? "darken-5" : "lighten-5"),
+      };
+    } else if (itemAddingNotCurrentlyOffered.value) {
+      return {
+        bgColor: "yellow",
+        message: "Subject not offered this year",
+        textColor: "DarkGoldenRod",
+        bgColorHeader:
+          "yellow " + (vuetify.theme.dark ? "darken-5" : "lighten-5"),
+      };
+    } else if (isSameYear.value) {
       return {
-        totalUnits,
-        totalExpectedHours,
-        anyClassInSingleQuarter,
-        expectedHoursQuarter1,
-        expectedHoursQuarter2,
-        totalExpectedHoursQuarter1,
-        totalExpectedHoursQuarter2,
+        bgColor: "red",
+        message: "Subject not available this semester",
+        textColor: "DarkRed",
+        bgColorHeader: "red " + (vuetify.theme.dark ? "darken-5" : "lighten-5"),
       };
-    },
-    semesterYearName: function () {
-      const yearNames = [
-        "Freshman",
-        "Sophomore",
-        "Junior",
-        "Senior",
-        "Fifth Year",
-      ];
-      if (this.index === 0) {
-        return "";
+    } else {
+      return {
+        bgColor: "yellow",
+        message: "Subject may not be available this semester",
+        textColor: "DarkGoldenRod",
+        bgColorHeader:
+          "yellow " + (vuetify.theme.dark ? "darken-5" : "lighten-5"),
+      };
+    }
+  }
+  return {
+    bgColor: "grey",
+    message: "",
+    textColor: "",
+    bgColorHeader: "",
+  };
+});
+
+const isSameYear = computed(() => {
+  return (
+    Math.floor((props.index - 1) / 3) ===
+    Math.floor((currentSemester.value - 1) / 3)
+  );
+});
+
+const isScheduledSemester = computed(() => {
+  const today = new Date();
+  const month = today.getMonth();
+  const scheduledSemester =
+    month === 4 ? currentSemester.value + 1 : currentSemester.value;
+  return props.index === scheduledSemester;
+});
+const itemAddingNoLongerOffered = computed(() => {
+  return noLongerOffered(itemAdding.value);
+});
+const itemAddingNotCurrentlyOffered = computed(() => {
+  return notCurrentlyOffered(itemAdding.value);
+});
+const offeredNow = computed(() => {
+  if (
+    !subjectsLoaded.value ||
+    itemAdding.value === undefined ||
+    itemAddingNoLongerOffered.value ||
+    itemAddingNotCurrentlyOffered.value
+  ) {
+    return false;
+  }
+
+  const semType = (props.index - 1) % 3;
+  if (semType >= 0 && (addingFromCard.value || draggingOver.value)) {
+    return [
+      itemAdding.value.offered_fall,
+      itemAdding.value.offered_IAP,
+      itemAdding.value.offered_spring,
+    ][semType];
+  } else {
+    return addingFromCard.value;
+  }
+});
+
+const semesterInformation = computed(() => {
+  const classesInfo = props.semesterSubjects
+    .map((subj) => {
+      if (subj.public === false) {
+        return Object.assign({}, subj, {
+          total_units: subj.units,
+        });
+      } else if (subj.subject_id in store.subjectsIndex) {
+        return store.subjectsInfo[store.subjectsIndex[subj.subject_id]];
+      } else if (subj.subject_id in store.genericIndex) {
+        return store.genericCourses[store.genericIndex[subj.subject_id]];
       } else {
-        const yearIndex = Math.floor((this.index - 1) / 3);
-        return yearNames[yearIndex];
+        return undefined;
       }
-    },
-    semesterYear: function () {
-      return this.index === 0
-        ? ""
-        : Math.floor((this.index - 2) / 3) + this.baseYear;
-    },
-    semesterType: function () {
-      return this.index === 0
-        ? "Prior Credit"
-        : ["Fall", "IAP", "Spring"][(this.index - 1) % 3];
-    },
-  },
-  methods: {
-    openRoadSettingsDialog: function (event) {
-      event.stopPropagation();
-      this.$emit("open-road-settings-dialog");
-    },
-    noLongerOffered: function (course) {
-      if (course.is_historical) {
-        const lastSemester = course.source_semester.split("-");
-        const sourceSemester = ["fall", "IAP", "spring"].indexOf(
-          lastSemester[0],
-        );
-        // which class year the last year offered corresponds to; +1 if fall because fall semester year is off by 1
-        const sourceYear =
-          parseInt(lastSemester[1]) -
-          this.baseYear +
-          (sourceSemester === 0 ? 1 : 0);
-        const lastSemesterNumber = sourceYear * 3 + sourceSemester + 1;
-        if (this.index > lastSemesterNumber) {
-          return true;
-        }
-      }
-      return false;
-    },
-    notCurrentlyOffered: function (course) {
-      if (course.not_offered_year) {
-        const year = parseInt(course.not_offered_year.slice(0, 4));
+    })
+    .filter(function (subj) {
+      return subj !== undefined;
+    });
+  const totalUnits = classesInfo.reduce(function (units, subj) {
+    let tu = subj.total_units;
+    tu = isNaN(tu) ? 0 : tu;
+    return units + tu;
+  }, 0);
+  const expectedHours = function (subj) {
+    let hours = subj.in_class_hours + subj.out_of_class_hours;
+    hours = isNaN(hours) ? subj.total_units : hours;
+    hours = isNaN(hours) ? 0 : hours;
+    return {
+      hours,
+      subject_id: subj.subject_id,
+    };
+  };
+  const sumExpectedHours = function (hours, subj) {
+    return hours + subj.hours;
+  };
+  const isInQuarter = function (subj, quarter) {
+    return (
+      subj.quarter_information === undefined ||
+      parseInt(subj.quarter_information.split(",")[0]) === quarter
+    );
+  };
+  const expectedHoursQuarter1 = classesInfo
+    .filter((s) => isInQuarter(s, 0))
+    .map(expectedHours);
+  const totalExpectedHoursQuarter1 = expectedHoursQuarter1.reduce(
+    sumExpectedHours,
+    0,
+  );
+  const expectedHoursQuarter2 = classesInfo
+    .filter((s) => isInQuarter(s, 1))
+    .map(expectedHours);
+  const totalExpectedHoursQuarter2 = expectedHoursQuarter2.reduce(
+    sumExpectedHours,
+    0,
+  );
+  const totalExpectedHours = Math.max(
+    totalExpectedHoursQuarter1,
+    totalExpectedHoursQuarter2,
+  );
+  const anyClassInSingleQuarter = classesInfo.some(
+    (s) => s.quarter_information !== undefined,
+  );
 
-        return (
-          (this.semesterYear === year && this.semesterType === "Fall") ||
-          (this.semesterYear === year + 1 &&
-            ["IAP", "Spring"].includes(this.semesterType))
-        );
-      }
-      return false;
-    },
-    previousSubjects: function (subj) {
-      const subjInQuarter2 =
-        subj.quarter_information !== undefined &&
-        subj.quarter_information.split(",")[0] === "1";
-      const beforeThisSemester = this.flatten(
-        this.selectedSubjects.slice(0, this.index),
-      );
-      const previousQuarter = this.selectedSubjects[this.index].filter((s) => {
-        const subj2 =
-          this.$store.state.subjectsInfo[
-            this.$store.state.subjectsIndex[s.subject_id]
-          ];
-        let inPreviousQuarter = false;
-        if (subj2 !== undefined) {
-          inPreviousQuarter =
-            s.semester === this.index &&
-            subjInQuarter2 &&
-            subj2.quarter_information !== undefined &&
-            subj2.quarter_information.split(",")[0] === "0";
-        }
-        return inPreviousQuarter;
-      });
-      return beforeThisSemester.concat(previousQuarter);
-    },
-    dragenter: function () {
-      this.draggingOver = true;
-      this.dragCount++;
-    },
-    dragleave: function () {
-      this.dragCount--;
-      if (this.dragCount === 0) {
-        this.draggingOver = false;
-      }
-    },
-    ondrop: function (event) {
-      if (
-        this.subjectsLoaded &&
-        this.itemAdding !== undefined &&
-        (this.offeredNow ||
-          this.itemAddingNoLongerOffered ||
-          this.itemAddingNotCurrentlyOffered ||
-          !this.isSameYear ||
-          this.index === 0)
-      ) {
-        const eventData = JSON.parse(event.dataTransfer.getData("classData"));
-        if (eventData.isNew) {
-          const newClass = {
-            overrideWarnings: false,
-            semester: this.index,
-            title: this.itemAdding.title,
-            subject_id: this.itemAdding.subject_id,
-            units: this.itemAdding.total_units,
-          };
-          this.$store.commit("addClass", newClass);
-        } else {
-          this.$store.commit("moveClass", {
-            currentClass: eventData.classInfo,
-            classIndex: eventData.classIndex,
-            semester: this.index,
-          });
-        }
-      }
-      this.draggingOver = false;
-      this.dragCount = 0;
-    },
-  },
+  return {
+    totalUnits,
+    totalExpectedHours,
+    anyClassInSingleQuarter,
+    expectedHoursQuarter1,
+    expectedHoursQuarter2,
+    totalExpectedHoursQuarter1,
+    totalExpectedHoursQuarter2,
+  };
+});
+const semesterYearName = computed(() => {
+  const yearNames = ["Freshman", "Sophomore", "Junior", "Senior", "Fifth Year"];
+  if (props.index === 0) {
+    return "";
+  } else {
+    const yearIndex = Math.floor((props.index - 1) / 3);
+    return yearNames[yearIndex];
+  }
+});
+const semesterYear = computed(() => {
+  return props.index === 0
+    ? ""
+    : Math.floor((props.index - 2) / 3) + baseYear.value;
+});
+const semesterType = computed(() => {
+  return props.index === 0
+    ? "Prior Credit"
+    : ["Fall", "IAP", "Spring"][(props.index - 1) % 3];
 });
+
+const openRoadSettingsDialog = (event) => {
+  event.stopPropagation();
+  emit("open-road-settings-dialog");
+};
+
+const noLongerOffered = (course) => {
+  if (course.is_historical) {
+    const lastSemester = course.source_semester.split("-");
+    const sourceSemester = ["fall", "IAP", "spring"].indexOf(lastSemester[0]);
+    // which class year the last year offered corresponds to; +1 if fall because fall semester year is off by 1
+    const sourceYear =
+      parseInt(lastSemester[1]) -
+      baseYear.value +
+      (sourceSemester === 0 ? 1 : 0);
+    const lastSemesterNumber = sourceYear * 3 + sourceSemester + 1;
+    if (props.index > lastSemesterNumber) {
+      return true;
+    }
+  }
+  return false;
+};
+const notCurrentlyOffered = (course) => {
+  if (course.not_offered_year) {
+    const year = parseInt(course.not_offered_year.slice(0, 4));
+
+    return (
+      (semesterYear.value === year && semesterType.value === "Fall") ||
+      (semesterYear.value === year + 1 &&
+        ["IAP", "Spring"].includes(semesterType.value))
+    );
+  }
+  return false;
+};
+const previousSubjects = (subj) => {
+  const subjInQuarter2 =
+    subj.quarter_information !== undefined &&
+    subj.quarter_information.split(",")[0] === "1";
+  const beforeThisSemester = flatten(
+    props.selectedSubjects.slice(0, props.index),
+  );
+  const previousQuarter = props.selectedSubjects[props.index].filter((s) => {
+    const subj2 = store.subjectsInfo[store.subjectsIndex[s.subject_id]];
+    let inPreviousQuarter = false;
+    if (subj2 !== undefined) {
+      inPreviousQuarter =
+        s.semester === props.index &&
+        subjInQuarter2 &&
+        subj2.quarter_information !== undefined &&
+        subj2.quarter_information.split(",")[0] === "0";
+    }
+    return inPreviousQuarter;
+  });
+  return beforeThisSemester.concat(previousQuarter);
+};
+const dragenter = () => {
+  draggingOver.value = true;
+  dragCount.value++;
+};
+const dragleave = () => {
+  dragCount.value--;
+  if (dragCount.value === 0) {
+    draggingOver.value = false;
+  }
+};
+const ondrop = (event) => {
+  if (
+    subjectsLoaded.value &&
+    itemAdding.value !== undefined &&
+    (offeredNow.value ||
+      itemAddingNoLongerOffered.value ||
+      itemAddingNotCurrentlyOffered.value ||
+      !isSameYear.value ||
+      props.index === 0)
+  ) {
+    const eventData = JSON.parse(event.dataTransfer.getData("classData"));
+    if (eventData.isNew) {
+      const newClass = {
+        overrideWarnings: false,
+        semester: props.index,
+        title: itemAdding.value.title,
+        subject_id: itemAdding.value.subject_id,
+        units: itemAdding.value.total_units,
+      };
+      store.addClass(newClass);
+    } else {
+      store.moveClass({
+        currentClass: eventData.classInfo,
+        classIndex: eventData.classIndex,
+        semester: props.index,
+      });
+    }
+  }
+  draggingOver.value = false;
+  dragCount.value = 0;
+};
 </script>
 
 <style scoped>
diff --git a/src/components/SubjectScroll.vue b/src/components/SubjectScroll.vue
index 8ddbf5e9..2f6ed2c7 100644
--- a/src/components/SubjectScroll.vue
+++ b/src/components/SubjectScroll.vue
@@ -1,7 +1,11 @@
 <template>
-  <v-container grid-list-md style="padding: 0.5em">
-    <v-layout overflow-x>
-      <v-flex v-for="(subject, index) in subjects" :key="subject.subject_id">
+  <v-container style="padding: 0.5em">
+    <v-row class="overflow-x flex-nowrap" dense>
+      <v-col
+        v-for="(subject, index) in props.subjects"
+        :key="subject.subject_id"
+        class="shrink"
+      >
         <v-badge right overlap color="rgba(0,0,0,0)">
           <v-card
             class="subject"
@@ -42,34 +46,36 @@
             <v-icon color="green" medium> mdi-check </v-icon>
           </template>
         </v-badge>
-      </v-flex>
-      <v-flex style="width: 500px" />
-    </v-layout>
+      </v-col>
+      <v-col style="width: 500px" />
+    </v-row>
   </v-container>
 </template>
-<script>
-import colorMixin from "./../mixins/colorMixin.js";
-import { defineComponent } from "vue";
 
-export default defineComponent({
-  name: "SubjectScroll",
-  mixins: [colorMixin],
-  props: {
-    subjects: {
-      type: Array,
-      required: true,
-    },
-  },
-  methods: {
-    shouldLighten: function (subject) {
-      if (subject.fulfilled === true) {
-        return "lightened";
-      } else {
-        return "";
-      }
-    },
+<script setup>
+import {
+  courseColor,
+  getRawColor,
+  getRawTextColor,
+} from "../mixins/colorMixin.js";
+
+const props = defineProps({
+  subjects: {
+    type: Array,
+    required: true,
   },
 });
+
+// const emit = defineEmits(["click-subject"]);
+defineEmits(["click-subject"]);
+
+const shouldLighten = (subject) => {
+  if (subject.fulfilled === true) {
+    return "lightened";
+  } else {
+    return "";
+  }
+};
 </script>
 
 <style scoped>
diff --git a/src/components/ThemeToggler.vue b/src/components/ThemeToggler.vue
index f25a6888..82dd9949 100644
--- a/src/components/ThemeToggler.vue
+++ b/src/components/ThemeToggler.vue
@@ -20,26 +20,24 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from "vue";
+<script setup>
+import { computed, onMounted } from "vue";
+import { useStore, useVuetify } from "../plugins/composition.js";
 
-export default defineComponent({
-  name: "ThemeToggler",
+const store = useStore();
+const vuetify = useVuetify();
 
-  computed: {
-    isDarkMode() {
-      return this.$store.state.isDarkMode;
-    },
-  },
-  mounted() {
-    this.$vuetify.theme.dark = this.$store.state.isDarkMode;
-  },
-  methods: {
-    changeTheme() {
-      this.$store.commit("changeTheme");
-      this.$vuetify.theme.dark = this.$store.state.isDarkMode;
-    },
-  },
+function changeTheme() {
+  store.changeTheme();
+  vuetify.theme.dark = store.isDarkMode;
+}
+
+const isDarkMode = computed(() => {
+  return store.isDarkMode;
+});
+
+onMounted(() => {
+  vuetify.theme.dark = store.isDarkMode;
 });
 </script>
 
diff --git a/src/mixins/classInfo.js b/src/mixins/classInfo.js
index c5e50635..0347274d 100644
--- a/src/mixins/classInfo.js
+++ b/src/mixins/classInfo.js
@@ -1,30 +1,29 @@
+export const classInfo = (store, req) => {
+  if ("req" in req) {
+    if (req.req in store.subjectsIndex) {
+      return store.subjectsInfo[store.subjectsIndex[req.req]];
+    }
+    let attributeReq = req.req;
+    if (attributeReq.indexOf("GIR:") === 0) {
+      attributeReq = attributeReq.substring(4);
+    }
+    if (attributeReq in store.genericIndex) {
+      return store.genericCourses[store.genericIndex[attributeReq]];
+    }
+  }
+  return undefined;
+};
+
+export const canDrag = (store, req) => {
+  return (
+    classInfo(store, req) !== undefined ||
+    ("req" in req && Object.keys(store.subjectsIndex).length === 0)
+  );
+};
+
 export default {
   methods: {
-    classInfo: function (req) {
-      if ("req" in req) {
-        if (req.req in this.$store.state.subjectsIndex) {
-          return this.$store.state.subjectsInfo[
-            this.$store.state.subjectsIndex[req.req]
-          ];
-        }
-        let attributeReq = req.req;
-        if (attributeReq.indexOf("GIR:") === 0) {
-          attributeReq = attributeReq.substring(4);
-        }
-        if (attributeReq in this.$store.state.genericIndex) {
-          return this.$store.state.genericCourses[
-            this.$store.state.genericIndex[attributeReq]
-          ];
-        }
-      }
-      return undefined;
-    },
-    canDrag: function (req) {
-      return (
-        this.classInfo(req) !== undefined ||
-        ("req" in req &&
-          Object.keys(this.$store.state.subjectsIndex).length === 0)
-      );
-    },
+    classInfo: classInfo,
+    canDrag: canDrag,
   },
 };
diff --git a/src/mixins/colorMixin.js b/src/mixins/colorMixin.js
index ecd45162..b26e626e 100644
--- a/src/mixins/colorMixin.js
+++ b/src/mixins/colorMixin.js
@@ -1,230 +1,248 @@
-export default {
-  data: function () {
-    return {
-      validCourses: [
-        "1",
-        "2",
-        "3",
-        "4",
-        "5",
-        "6",
-        "7",
-        "8",
-        "9",
-        "10",
-        "11",
-        "12",
-        "14",
-        "15",
-        "16",
-        "17",
-        "18",
-        "20",
-        "21",
-        "21A",
-        "21G",
-        "21H",
-        "21L",
-        "21M",
-        "21T",
-        "21W",
-        "22",
-        "24",
-        "CC",
-        "CMS",
-        "CSB",
-        "EC",
-        "EM",
-        "ES",
-        "HST",
-        "IDS",
-        "MAS",
-        "SCM",
-        "STS",
-        "WGS",
-        "SP",
-        "SWE",
-        "AS",
-        "MS",
-        "NS",
-      ],
-      validGeneric: [
-        "PHY1",
-        "PHY2",
-        "CHEM",
-        "BIOL",
-        "CAL1",
-        "CAL2",
-        "LAB",
-        "REST",
-        "HASS-A",
-        "HASS-H",
-        "HASS-S",
-        "HASS-E",
-        "CI-H",
-        "CI-HW",
-      ],
-      colors: {
-        "course-none": "#999999",
-        "course-1": "#d10d23",
-        "course-2": "#f16024",
-        "course-3": "#305aba",
-        "course-4": "#bde788",
-        "course-5": "#8abd6d",
-        "course-6": "#499eda",
-        "course-7": "#4365a2",
-        "course-8": "#7a36bf",
-        "course-9": "#4bb399",
-        "course-10": "#c96b52",
-        "course-11": "#81235b",
-        "course-12": "#4bcb4a",
-        "course-14": "#f5a623",
-        "course-15": "#a40052",
-        "course-16": "#64d4e3",
-        "course-17": "#c80db9",
-        "course-18": "#1f3573",
-        "course-20": "#64a518",
-        "course-21": "#a18cd3",
-        "course-21A": "#9162d0",
-        "course-21G": "#764e8d",
-        "course-21H": "#b560c3",
-        "course-21L": "#d574d7",
-        "course-21M": "#f1a7e5",
-        "course-21T": "#ad4096",
-        "course-21W": "#d16ca4",
-        "course-22": "#734954",
-        "course-24": "#3f1c57",
-        "course-CC": "#398486",
-        "course-CMS": "#8aafb1",
-        "course-CSB": "#f5889c",
-        "course-EC": "#8b1d17",
-        "course-EM": "#e1d059",
-        "course-ES": "#b0b02e",
-        "course-HST": "#90cdd0",
-        "course-IDS": "#9eabd0",
-        "course-MAS": "#64696d",
-        "course-SCM": "#152348",
-        "course-STS": "#155410",
-        "course-WGS": "#44cf9d",
-        "course-SP": "#deb821",
-        "course-SWE": "#b82165",
-        "course-AS": "#b0b0b0",
-        "course-MS": "#b0b0b0",
-        "course-NS": "#b0b0b0",
-        "generic-GIR": "#bf6139",
-        "generic-HASS-E": "#39bf97",
-        "generic-HASS-A": "#3997bf",
-        "generic-HASS-H": "#3946bf",
-        "generic-HASS-S": "#7c39bf",
-        "generic-CI-H": "#bf39b1",
-        "generic-CI-HW": "#bf3961",
-        "custom_color-0": "#b55757",
-        "custom_color-1": "#b58657",
-        "custom_color-2": "#b5b557",
-        "custom_color-3": "#86b557",
-        "custom_color-4": "#57b557",
-        "custom_color-5": "#57b586",
-        "custom_color-6": "#de4343",
-        "custom_color-7": "#de9043",
-        "custom_color-8": "#dede43",
-        "custom_color-9": "#90de43",
-        "custom_color-10": "#43de43",
-        "custom_color-11": "#43de90",
-        "custom_color-12": "#b51616",
-        "custom_color-13": "#b56516",
-        "custom_color-14": "#b5b516",
-        "custom_color-15": "#65b516",
-        "custom_color-16": "#16b516",
-        "custom_color-17": "#16b565",
-        "custom_color-18": "#57b5b5",
-        "custom_color-19": "#5786b5",
-        "custom_color-20": "#5757b5",
-        "custom_color-21": "#8657b5",
-        "custom_color-22": "#b557b5",
-        "custom_color-23": "#b55786",
-        "custom_color-24": "#43dede",
-        "custom_color-25": "#4390de",
-        "custom_color-26": "#4343de",
-        "custom_color-27": "#9043de",
-        "custom_color-28": "#de43de",
-        "custom_color-29": "#de4390",
-        "custom_color-30": "#16b5b5",
-        "custom_color-31": "#1665b5",
-        "custom_color-32": "#1616b5",
-        "custom_color-33": "#6516b5",
-        "custom_color-34": "#b516b5",
-        "custom_color-35": "#b51665",
-        "custom_color-36": "#000000",
-        "custom_color-37": "#262626",
-        "custom_color-38": "#4d4d4d",
-        "custom_color-39": "#737373",
-        "custom_color-40": "#999999",
-        "custom_color-41": "#bfbfbf",
-      },
-    };
-  },
-  methods: {
-    getRawColor: function (courseColor) {
-      return this.colors[courseColor];
-    },
-    getRawTextColor: function (courseColor) {
-      // See https://github.com/Myndex/max-contrast
-      // https://stackoverflow.com/questions/1855884/determine-font-color-based-on-background-color
+export const validCourses = [
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "10",
+  "11",
+  "12",
+  "14",
+  "15",
+  "16",
+  "17",
+  "18",
+  "20",
+  "21",
+  "21A",
+  "21G",
+  "21H",
+  "21L",
+  "21M",
+  "21T",
+  "21W",
+  "22",
+  "24",
+  "CC",
+  "CMS",
+  "CSB",
+  "EC",
+  "EM",
+  "ES",
+  "HST",
+  "IDS",
+  "MAS",
+  "SCM",
+  "STS",
+  "WGS",
+  "SP",
+  "SWE",
+  "AS",
+  "MS",
+  "NS",
+];
+export const validGeneric = [
+  "PHY1",
+  "PHY2",
+  "CHEM",
+  "BIOL",
+  "CAL1",
+  "CAL2",
+  "LAB",
+  "REST",
+  "HASS-A",
+  "HASS-H",
+  "HASS-S",
+  "HASS-E",
+  "CI-H",
+  "CI-HW",
+];
+export const colors = {
+  "course-none": "#999999",
+  "course-1": "#de4343",
+  "course-2": "#de7643",
+  "course-3": "#4369de",
+  "course-4": "#57b563",
+  "course-5": "#43deaf",
+  "course-6": "#4390de",
+  "course-7": "#5779b5",
+  "course-8": "#8157b5",
+  "course-9": "#8143de",
+  "course-10": "#b55757",
+  "course-11": "#b55773",
+  "course-12": "#43de4f",
+  "course-14": "#de9043",
+  "course-15": "#b55c57",
+  "course-16": "#43b2de",
+  "course-17": "#de43b7",
+  "course-18": "#575db5",
+  "course-20": "#57b56e",
+  "course-21": "#57b573",
+  "course-21A": "#57b573",
+  "course-21G": "#57b599",
+  "course-21H": "#57b5a5",
+  "course-21L": "#57b5b2",
+  "course-21M": "#57acb5",
+  "course-21T": "#5e9da6",
+  "course-21W": "#57b580",
+  "course-22": "#b55757",
+  "course-24": "#7657b5",
+  "course-CC": "#4fde43",
+  "course-CMS": "#57b58c",
+  "course-CSB": "#579ab5",
+  "course-EC": "#76b557",
+  "course-EM": "#576eb5",
+  "course-ES": "#5a57b5",
+  "course-HST": "#5779b5",
+  "course-IDS": "#57b586",
+  "course-MAS": "#57b55a",
+  "course-SCM": "#57b573",
+  "course-STS": "#8f57b5",
+  "course-WGS": "#579fb5",
+  "course-SP": "#4343de",
+  "course-SWE": "#b56b57",
+  "course-AS": "#b0b0b0",
+  "course-MS": "#b0b0b0",
+  "course-NS": "#b0b0b0",
+  "generic-GIR": "#bf6139",
+  "generic-HASS-E": "#39bf97",
+  "generic-HASS-A": "#3997bf",
+  "generic-HASS-H": "#3946bf",
+  "generic-HASS-S": "#7c39bf",
+  "generic-CI-H": "#bf39b1",
+  "generic-CI-HW": "#bf3961",
+  "custom_color-0": "#b55757",
+  "custom_color-1": "#b58657",
+  "custom_color-2": "#b5b557",
+  "custom_color-3": "#86b557",
+  "custom_color-4": "#57b557",
+  "custom_color-5": "#57b586",
+  "custom_color-6": "#de4343",
+  "custom_color-7": "#de9043",
+  "custom_color-8": "#dede43",
+  "custom_color-9": "#90de43",
+  "custom_color-10": "#43de43",
+  "custom_color-11": "#43de90",
+  "custom_color-12": "#b51616",
+  "custom_color-13": "#b56516",
+  "custom_color-14": "#b5b516",
+  "custom_color-15": "#65b516",
+  "custom_color-16": "#16b516",
+  "custom_color-17": "#16b565",
+  "custom_color-18": "#57b5b5",
+  "custom_color-19": "#5786b5",
+  "custom_color-20": "#5757b5",
+  "custom_color-21": "#8657b5",
+  "custom_color-22": "#b557b5",
+  "custom_color-23": "#b55786",
+  "custom_color-24": "#43dede",
+  "custom_color-25": "#4390de",
+  "custom_color-26": "#4343de",
+  "custom_color-27": "#9043de",
+  "custom_color-28": "#de43de",
+  "custom_color-29": "#de4390",
+  "custom_color-30": "#16b5b5",
+  "custom_color-31": "#1665b5",
+  "custom_color-32": "#1616b5",
+  "custom_color-33": "#6516b5",
+  "custom_color-34": "#b516b5",
+  "custom_color-35": "#b51665",
+  "custom_color-36": "#000000",
+  "custom_color-37": "#262626",
+  "custom_color-38": "#4d4d4d",
+  "custom_color-39": "#737373",
+  "custom_color-40": "#999999",
+  "custom_color-41": "#bfbfbf",
+};
 
-      const Rs = parseInt(this.colors[courseColor].substring(1, 3), 16);
-      const Gs = parseInt(this.colors[courseColor].substring(3, 5), 16);
-      const Bs = parseInt(this.colors[courseColor].substring(5, 7), 16);
+export const getRawColor = (courseColor) => {
+  if (courseColor) {
+    return colors[courseColor];
+  } else {
+    return colors["course-none"];
+  }
+};
 
-      const flipYs = 0.342; // based on APCA™ 0.98G middle contrast BG
+export const getRawTextColor = () => {
+  return "#ffffff";
+  // getRawTextColor: function (courseColor) {
+  // // See https://github.com/Myndex/max-contrast
+  // // https://stackoverflow.com/questions/1855884/determine-font-color-based-on-background-color
 
-      const trc = 2.4,
-        Rco = 0.2126729,
-        Gco = 0.7151522,
-        Bco = 0.072175;
+  // const Rs = parseInt(colors[courseColor].substring(1, 3), 16);
+  // const Gs = parseInt(colors[courseColor].substring(3, 5), 16);
+  // const Bs = parseInt(colors[courseColor].substring(5, 7), 16);
 
-      let Ys =
-        (Rs / 255.0) ** trc * Rco +
-        (Gs / 255.0) ** trc * Gco +
-        (Bs / 255.0) ** trc * Bco;
+  // const flipYs = 0.342; // based on APCA™ 0.98G middle contrast BG
 
-      return Ys < flipYs ? "#ffffffee" : "#000000dd";
-    },
-    // courseColor takes in subject
-    courseColor: function (subject) {
-      // Custom course have custom_color component
-      if (subject.custom_color) {
-        return "custom_color-" + subject.custom_color.slice(1);
-      }
-      // Otherwise it's normal class which id determines color
-      return this.courseColorFromId(subject.id || subject.subject_id);
-    },
-    // Takes a subject ID directly
-    courseColorFromId: function (id) {
-      if (id !== undefined) {
-        let course = id.split(".")[0];
-        if (course.indexOf("GIR:") >= 0) {
-          course =
-            course.substring(0, course.indexOf("GIR:")) +
-            course.substring(course.indexOf("GIR:") + 4);
-        }
-        const girAttrs = course
-          .split(" ")
-          .filter((c) => this.validGeneric.indexOf(c) >= 0);
-        if (this.validCourses.indexOf(course) !== -1) {
-          return "course-" + course;
-        } else if (girAttrs.length > 0) {
-          if (girAttrs.length === 1) {
-            const attr = girAttrs[0];
-            if (attr.indexOf("HASS") === 0) {
-              return "generic-" + course;
-            } else if (attr.indexOf("CI") === 0) {
-              return "generic-" + course;
-            }
-          }
-          return "generic-GIR";
+  // const trc = 2.4,
+  //   Rco = 0.2126729,
+  //   Gco = 0.7151522,
+  //   Bco = 0.072175;
+
+  // let Ys =
+  //   (Rs / 255.0) ** trc * Rco +
+  //   (Gs / 255.0) ** trc * Gco +
+  //   (Bs / 255.0) ** trc * Bco;
+
+  // return Ys < flipYs ? colors.shades.white : colors.shades.black;
+};
+
+// courseColor takes in subject
+export const courseColor = (subject) => {
+  // Custom course have custom_color component
+  if (subject.custom_color) {
+    return "custom_color-" + subject.custom_color.slice(1);
+  }
+  // Otherwise it's normal class which id determines color
+  return courseColorFromId(subject.id || subject.subject_id);
+};
+
+// Takes a subject ID directly
+export const courseColorFromId = (id) => {
+  if (id !== undefined) {
+    let course = id.split(".")[0];
+    if (course.indexOf("GIR:") >= 0) {
+      course =
+        course.substring(0, course.indexOf("GIR:")) +
+        course.substring(course.indexOf("GIR:") + 4);
+    }
+    const girAttrs = course
+      .split(" ")
+      .filter((c) => validGeneric.indexOf(c) >= 0);
+    if (validCourses.indexOf(course) !== -1) {
+      return "course-" + course;
+    } else if (girAttrs.length > 0) {
+      if (girAttrs.length === 1) {
+        const attr = girAttrs[0];
+        if (attr.indexOf("HASS") === 0) {
+          return "generic-" + course;
+        } else if (attr.indexOf("CI") === 0) {
+          return "generic-" + course;
         }
       }
-      return "course-none";
-    },
+      return "generic-GIR";
+    }
+  }
+  return "course-none";
+};
+
+export default {
+  data: function () {
+    return {
+      validCourses: validCourses,
+      validGeneric: validGeneric,
+      colors: colors,
+    };
+  },
+  methods: {
+    getRawColor: getRawColor,
+    getRawTextColor: getRawTextColor,
+    courseColor: courseColor,
+    courseColorFromId: courseColorFromId,
   },
 };
diff --git a/src/mixins/courseLinks.js b/src/mixins/courseLinks.js
index c74fcca1..3773eeb0 100644
--- a/src/mixins/courseLinks.js
+++ b/src/mixins/courseLinks.js
@@ -1,75 +1,79 @@
+export const courseLinks = [
+  {
+    courses: [
+      "major6-1",
+      "major6-1-8-flex",
+      "major6-2",
+      "major6-2new",
+      "major6-3",
+      "major6-3new",
+      "major6-4",
+      "major6-7",
+      "major6-14",
+      "major11-6",
+      "minor6",
+      "master6-P",
+      "meng6-14",
+    ],
+    link: "https://eecsis.mit.edu/checklist.cgi",
+    text: "Course 6 Checklist",
+  },
+  {
+    courses: ["major11"],
+    link: "https://duspsis.mit.edu/",
+    text: "Course 11 Student Status",
+  },
+  {
+    courses: [
+      "neetLM-CB",
+      "neetLM-IE",
+      "neetLM-TE",
+      "neetLM-SB",
+      "neetLM-MDE",
+      "neetLM",
+    ],
+    link: "https://neet.mit.edu/threads/lm",
+    text: "NEET Living Machines Website",
+  },
+  {
+    courses: ["neetAM"],
+    link: "https://neet.mit.edu/threads/am",
+    text: "NEET Autonomous Machines Website",
+  },
+  {
+    courses: ["neetAAM"],
+    link: "https://neet.mit.edu/threads/amm",
+    text: "NEET Advanced Materials Machines Website",
+  },
+  {
+    courses: ["neetDC"],
+    link: "https://neet.mit.edu/threads/dc",
+    text: "NEET Digital Cities Website",
+  },
+  {
+    courses: ["neetCES"],
+    link: "https://neet.mit.edu/threads/rem",
+    text: "NEET Renewable Energy Machines",
+  },
+];
+
+export const getCourseLinks = (selectedReqs) => {
+  const links = [];
+  for (const { courses, link, text } of courseLinks) {
+    if (selectedReqs.some((course) => courses.includes(course))) {
+      links.push({ link, text });
+    }
+  }
+  return links;
+};
+
 export default {
   data: function () {
     return {
-      courseLinks: [
-        {
-          courses: [
-            "major6-1",
-            "major6-1-8-flex",
-            "major6-2",
-            "major6-2new",
-            "major6-3",
-            "major6-3new",
-            "major6-4",
-            "major6-7",
-            "major6-14",
-            "major11-6",
-            "minor6",
-            "master6-P",
-            "meng6-14",
-          ],
-          link: "https://eecsis.mit.edu/checklist.cgi",
-          text: "Course 6 Checklist",
-        },
-        {
-          courses: ["major11"],
-          link: "https://duspsis.mit.edu/",
-          text: "Course 11 Student Status",
-        },
-        {
-          courses: [
-            "neetLM-CB",
-            "neetLM-IE",
-            "neetLM-TE",
-            "neetLM-SB",
-            "neetLM-MDE",
-            "neetLM",
-          ],
-          link: "https://neet.mit.edu/threads/lm",
-          text: "NEET Living Machines Website",
-        },
-        {
-          courses: ["neetAM"],
-          link: "https://neet.mit.edu/threads/am",
-          text: "NEET Autonomous Machines Website",
-        },
-        {
-          courses: ["neetAAM"],
-          link: "https://neet.mit.edu/threads/amm",
-          text: "NEET Advanced Materials Machines Website",
-        },
-        {
-          courses: ["neetDC"],
-          link: "https://neet.mit.edu/threads/dc",
-          text: "NEET Digital Cities Website",
-        },
-        {
-          courses: ["neetCES"],
-          link: "https://neet.mit.edu/threads/rem",
-          text: "NEET Renewable Energy Machines",
-        },
-      ],
+      courseLinks: courseLinks,
     };
   },
   methods: {
-    getCourseLinks: function (selectedReqs) {
-      const links = [];
-      for (const { courses, link, text } of this.courseLinks) {
-        if (selectedReqs.some((course) => courses.includes(course))) {
-          links.push({ link, text });
-        }
-      }
-      return links;
-    },
+    getCourseLinks: getCourseLinks,
   },
 };
diff --git a/src/mixins/reqFulfillment.js b/src/mixins/reqFulfillment.js
index 06997a3b..bbf65c9c 100644
--- a/src/mixins/reqFulfillment.js
+++ b/src/mixins/reqFulfillment.js
@@ -1,199 +1,189 @@
-export default {
-  methods: {
-    classSatisfies: function (req, id, allSubjects) {
-      if (req === id) {
-        return true;
-      }
+export const classSatisfies = (store, req, id, allSubjects) => {
+  if (req === id) {
+    return true;
+  }
 
-      let subj;
-      if (id in this.$store.state.subjectsIndex) {
-        subj =
-          this.$store.state.subjectsInfo[this.$store.state.subjectsIndex[id]];
-      } else if (id in this.$store.state.genericIndex) {
-        subj =
-          this.$store.state.genericCourses[this.$store.state.genericIndex[id]];
-      } else {
-        // subj not found in known courses
-        return false;
-      }
+  let subj;
+  if (id in store.subjectsIndex) {
+    subj = store.subjectsInfo[store.subjectsIndex[id]];
+  } else if (id in store.genericIndex) {
+    subj = store.genericCourses[store.genericIndex[id]];
+  } else {
+    // subj not found in known courses
+    return false;
+  }
 
-      if (
-        subj.equivalent_subjects !== undefined &&
-        subj.equivalent_subjects.indexOf(req) >= 0
-      ) {
-        return true;
-      }
+  if (
+    subj.equivalent_subjects !== undefined &&
+    subj.equivalent_subjects.indexOf(req) >= 0
+  ) {
+    return true;
+  }
+
+  // ex: 6.00 satisfies the 6.0001 requirement
+  if (subj.children !== undefined && subj.children.indexOf(req) >= 0) {
+    return true;
+  }
 
-      // ex: 6.00 satisfies the 6.0001 requirement
-      if (subj.children !== undefined && subj.children.indexOf(req) >= 0) {
+  // ex: 6.0001 and 6.0002 together satisfy the 6.00 requirement
+  if (subj.parent !== undefined && req === subj.parent) {
+    const parentCourse = store.subjectsInfo[store.subjectsIndex[subj.parent]];
+    if (parentCourse !== undefined) {
+      if (parentCourse.children.every((sid) => allSubjects.indexOf(sid) >= 0)) {
         return true;
       }
+    }
+  }
 
-      // ex: 6.0001 and 6.0002 together satisfy the 6.00 requirement
-      if (subj.parent !== undefined && req === subj.parent) {
-        const parentCourse =
-          this.$store.state.subjectsInfo[
-            this.$store.state.subjectsIndex[subj.parent]
-          ];
-        if (parentCourse !== undefined) {
-          if (
-            parentCourse.children.every((sid) => allSubjects.indexOf(sid) >= 0)
-          ) {
-            return true;
-          }
-        }
-      }
+  if (req.indexOf(".") === -1) {
+    if (req.indexOf("GIR:") >= 0) {
+      req = req.substring(4);
+      return subj.gir_attribute === req;
+    } else if (req.indexOf("HASS") >= 0) {
+      return subj.hass_attribute.split(",").indexOf(req) >= 0;
+    } else if (req.indexOf("CI") >= 0) {
+      return subj.communication_requirement === req;
+    }
+  }
+  return false;
+};
 
-      if (req.indexOf(".") === -1) {
-        if (req.indexOf("GIR:") >= 0) {
-          req = req.substring(4);
-          return subj.gir_attribute === req;
-        } else if (req.indexOf("HASS") >= 0) {
-          return subj.hass_attribute.split(",").indexOf(req) >= 0;
-        } else if (req.indexOf("CI") >= 0) {
-          return subj.communication_requirement === req;
-        }
-      }
-      return false;
-    },
-    reqsFulfilled: function (reqString, subjects) {
-      const allIDs = subjects.map((s) => s.subject_id);
-      reqString = reqString.replace(/''/g, '"').replace(/,[\s]+/g, ",");
-      const splitReq = reqString.split(/(,|\(|\)|\/)/);
-      const _this = this;
-      let skipNumber;
-      for (let i = 0; i < splitReq.length; i++) {
-        if (splitReq[i].indexOf('"') >= 0 && i !== skipNumber) {
-          // if the requirement is a string instead of a class ID:
-          // If the string is "One subject in X", check for any subject with X in their ID
-          // things that are still not handled correctly:
-          // 21M.283 doesn't work correctly because film / music
-          // 24.280, 21L.709, 21L.715, 21L.S96, 21L.S97 don't work because we don't keep the count between i's
-          // Set other strings (like "permission of instructor") automatically to false
-          // If required as an alternative to other prereqs, will not affect fulfillment
-          // If the string is a required prereq, it must be manually dismissed
-          const req = splitReq[i];
-          let idCategory;
-          let numRequired;
-          const lowercaseReq = req.toLowerCase();
-          if (
-            lowercaseReq.indexOf("one subject in") >= 0 ||
-            lowercaseReq.indexOf("two subjects in") >= 0
-          ) {
-            if (lowercaseReq.indexOf("one subject in") >= 0) {
-              numRequired = 1;
-            } else {
-              numRequired = 2;
-            }
-            // because "one subject in CMS / History" should be (one subject in CMS || one subject in History) not (one subject in CMS) || History
-            const orcheck =
-              splitReq[i + 1] === "/" &&
-              (splitReq[i + 2] === '"Comparative Media Studies"' ||
-                splitReq[i + 2] === '"History"');
-            // because FireRoad treats "Brain and Cognitive Sciences" as (Brain) && (Cognitive Sciences) instead of (Brain and Cognitive Sciences)
-            const andcheck =
-              splitReq[i + 1] === "," &&
-              splitReq[i + 2] === '"Cognitive Sciences"';
-            if (splitReq.length > i + 2 && (orcheck || andcheck)) {
-              skipNumber = i + 2;
-              idCategory = this.convertReqToID(splitReq[i + 2]);
-              splitReq[i + 2] = this.checkForNumRequired(
-                allIDs,
-                idCategory,
-                numRequired,
-              );
-            }
-            // sometimes the string is 'two subjects in X' and sometimes it is 'any other two subjects in X'
-            const parts = req.split(" ");
-            const category = req.split(" ")[parts.indexOf("in") + 1];
-            idCategory = this.convertReqToID(category);
-            splitReq[i] = this.checkForNumRequired(
-              allIDs,
-              idCategory,
-              numRequired,
-            );
-            if (idCategory.toString() === "/film/i") {
-              const allTitles = subjects.map((s) => s.title);
-              splitReq[i] = this.checkForNumRequired(
-                allTitles,
-                idCategory,
-                numRequired,
-              );
-            }
-          } else {
-            splitReq[i] = "false";
-          }
-        } else if ("()/, ".indexOf(splitReq[i]) < 0 && i !== skipNumber) {
-          if (allIDs.indexOf(splitReq[i]) >= 0) {
-            splitReq[i] = "true";
-          } else {
-            const anyClassSatisfies = subjects.some((s) =>
-              _this.classSatisfies(splitReq[i], s.subject_id, allIDs),
-            );
-            splitReq[i] = anyClassSatisfies ? "true" : "false";
-          }
-        }
-      }
-      const reqExpression = splitReq
-        .join("")
-        .replace(/\//g, "||")
-        .replace(/,/g, "&&");
-      // i know this seems scary, but the above code guarantees there will only be ()/, true false in this string
-      // eslint-disable-next-line no-eval
-      return eval(reqExpression);
-    },
-    convertReqToID: function (category) {
-      // takes in a string like "Comparative Media Studies" or "philosophy" and outputs something that matches
-      // a class ID like /CMS/ or /24\.[0-8]/
-      if (category.indexOf('"') === 0) {
-        category = category.slice(1);
-      }
-      if (category.indexOf('"') === category.length - 1) {
-        category = category.slice(0, -1);
-      }
-      let idCategory = "";
+export const reqsFulfilled = (store, reqString, subjects) => {
+  const allIDs = subjects.map((s) => s.subject_id);
+  reqString = reqString.replace(/''/g, '"').replace(/,[\s]+/g, ",");
+  const splitReq = reqString.split(/(,|\(|\)|\/)/);
+  let skipNumber;
+  for (let i = 0; i < splitReq.length; i++) {
+    if (splitReq[i].indexOf('"') >= 0 && i !== skipNumber) {
+      // if the requirement is a string instead of a class ID:
+      // If the string is "One subject in X", check for any subject with X in their ID
+      // things that are still not handled correctly:
+      // 21M.283 doesn't work correctly because film / music
+      // 24.280, 21L.709, 21L.715, 21L.S96, 21L.S97 don't work because we don't keep the count between i's
+      // Set other strings (like "permission of instructor") automatically to false
+      // If required as an alternative to other prereqs, will not affect fulfillment
+      // If the string is a required prereq, it must be manually dismissed
+      const req = splitReq[i];
+      let idCategory;
+      let numRequired;
+      const lowercaseReq = req.toLowerCase();
       if (
-        category === "Comparative" ||
-        category === "CMS" ||
-        category === "Comparative Media Studies"
-      ) {
-        idCategory = /CMS/;
-      } else if (category === "Literature") {
-        idCategory = /21L/;
-      } else if (/film/i.test(category)) {
-        idCategory = /film/i;
-      } else if (category === "philosophy") {
-        // below 900 is Linguistics
-        idCategory = /24\.[0-8]/;
-      } else if (category === "Anthropology") {
-        idCategory = /21A/;
-      } else if (
-        category === "Brain" ||
-        category === "Cognitive Sciences" ||
-        category === "Cognitive"
+        lowercaseReq.indexOf("one subject in") >= 0 ||
+        lowercaseReq.indexOf("two subjects in") >= 0
       ) {
-        idCategory = /^9\./;
-      } else if (category === "History") {
-        idCategory = /21H/;
-      } else {
-        idCategory = "do not match anything";
-        // maybe this should create a message asking us to add it
-      }
-      return idCategory;
-    },
-    checkForNumRequired: function (allIDs, idCategory, numRequired) {
-      // checks whether there are numRequired matches for idCategory in allIDs
-      let satisfied = "false";
-      let numMatches = 0;
-      for (let i = 0; i < allIDs.length; i++) {
-        if (allIDs[i].search(idCategory) >= 0) {
-          numMatches += 1;
+        if (lowercaseReq.indexOf("one subject in") >= 0) {
+          numRequired = 1;
+        } else {
+          numRequired = 2;
         }
+        // because "one subject in CMS / History" should be (one subject in CMS || one subject in History) not (one subject in CMS) || History
+        const orcheck =
+          splitReq[i + 1] === "/" &&
+          (splitReq[i + 2] === '"Comparative Media Studies"' ||
+            splitReq[i + 2] === '"History"');
+        // because FireRoad treats "Brain and Cognitive Sciences" as (Brain) && (Cognitive Sciences) instead of (Brain and Cognitive Sciences)
+        const andcheck =
+          splitReq[i + 1] === "," && splitReq[i + 2] === '"Cognitive Sciences"';
+        if (splitReq.length > i + 2 && (orcheck || andcheck)) {
+          skipNumber = i + 2;
+          idCategory = convertReqToID(splitReq[i + 2]);
+          splitReq[i + 2] = checkForNumRequired(
+            allIDs,
+            idCategory,
+            numRequired,
+          );
+        }
+        // sometimes the string is 'two subjects in X' and sometimes it is 'any other two subjects in X'
+        const parts = req.split(" ");
+        const category = req.split(" ")[parts.indexOf("in") + 1];
+        idCategory = convertReqToID(category);
+        splitReq[i] = checkForNumRequired(allIDs, idCategory, numRequired);
+        if (idCategory.toString() === "/film/i") {
+          const allTitles = subjects.map((s) => s.title);
+          splitReq[i] = checkForNumRequired(allTitles, idCategory, numRequired);
+        }
+      } else {
+        splitReq[i] = "false";
       }
-      if (numMatches >= numRequired) {
-        satisfied = "true";
+    } else if ("()/, ".indexOf(splitReq[i]) < 0 && i !== skipNumber) {
+      if (allIDs.indexOf(splitReq[i]) >= 0) {
+        splitReq[i] = "true";
+      } else {
+        const anyClassSatisfies = subjects.some((s) =>
+          classSatisfies(store, splitReq[i], s.subject_id, allIDs),
+        );
+        splitReq[i] = anyClassSatisfies ? "true" : "false";
       }
-      return satisfied;
-    },
+    }
+  }
+  const reqExpression = splitReq
+    .join("")
+    .replace(/\//g, "||")
+    .replace(/,/g, "&&");
+  // i know this seems scary, but the above code guarantees there will only be ()/, true false in this string
+  return eval(reqExpression);
+};
+
+export const convertReqToID = (category) => {
+  // takes in a string like "Comparative Media Studies" or "philosophy" and outputs something that matches
+  // a class ID like /CMS/ or /24\.[0-8]/
+  if (category.indexOf('"') === 0) {
+    category = category.slice(1);
+  }
+  if (category.indexOf('"') === category.length - 1) {
+    category = category.slice(0, -1);
+  }
+  let idCategory = "";
+  if (
+    category === "Comparative" ||
+    category === "CMS" ||
+    category === "Comparative Media Studies"
+  ) {
+    idCategory = /CMS/;
+  } else if (category === "Literature") {
+    idCategory = /21L/;
+  } else if (/film/i.test(category)) {
+    idCategory = /film/i;
+  } else if (category === "philosophy") {
+    // below 900 is Linguistics
+    idCategory = /24\.[0-8]/;
+  } else if (category === "Anthropology") {
+    idCategory = /21A/;
+  } else if (
+    category === "Brain" ||
+    category === "Cognitive Sciences" ||
+    category === "Cognitive"
+  ) {
+    idCategory = /^9\./;
+  } else if (category === "History") {
+    idCategory = /21H/;
+  } else {
+    idCategory = "do not match anything";
+    // maybe this should create a message asking us to add it
+  }
+  return idCategory;
+};
+
+export const checkForNumRequired = (allIDs, idCategory, numRequired) => {
+  // checks whether there are numRequired matches for idCategory in allIDs
+  let satisfied = "false";
+  let numMatches = 0;
+  for (let i = 0; i < allIDs.length; i++) {
+    if (allIDs[i].search(idCategory) >= 0) {
+      numMatches += 1;
+    }
+  }
+  if (numMatches >= numRequired) {
+    satisfied = "true";
+  }
+  return satisfied;
+};
+
+export default {
+  methods: {
+    classSatisfies: classSatisfies,
+    reqsFulfilled: reqsFulfilled,
+    convertReqToID: convertReqToID,
+    checkForNumRequired: checkForNumRequired,
   },
 };
diff --git a/src/mixins/sanitizeSubjects.js b/src/mixins/sanitizeSubjects.js
index 55388e6c..db633056 100644
--- a/src/mixins/sanitizeSubjects.js
+++ b/src/mixins/sanitizeSubjects.js
@@ -1,15 +1,17 @@
+export const getSimpleSelectedSubjects = (selectedSubjects) => {
+  const simpless = Array.from(Array(16), () => []);
+  for (let i = 0; i < selectedSubjects.length; i++) {
+    const s = selectedSubjects[i];
+    if (s.semester === undefined || s.semester < 0) {
+      s.semester = 0;
+    }
+    simpless[s.semester].push(s);
+  }
+  return simpless;
+};
+
 export default {
   methods: {
-    getSimpleSelectedSubjects(selectedSubjects) {
-      const simpless = Array.from(Array(16), () => []);
-      for (let i = 0; i < selectedSubjects.length; i++) {
-        const s = selectedSubjects[i];
-        if (s.semester === undefined || s.semester < 0) {
-          s.semester = 0;
-        }
-        simpless[s.semester].push(s);
-      }
-      return simpless;
-    },
+    getSimpleSelectedSubjects: getSimpleSelectedSubjects,
   },
 };
diff --git a/src/mixins/schedule.js b/src/mixins/schedule.js
index 2eab8172..1325283e 100644
--- a/src/mixins/schedule.js
+++ b/src/mixins/schedule.js
@@ -1,20 +1,22 @@
+export const lateSchedule = (subj, genericIndex, compareDate = new Date()) => {
+  if (subj.schedule === undefined && !(subj.subject_id in genericIndex)) {
+    const year = compareDate.getFullYear();
+    const month = compareDate.getMonth();
+    const fallCutoff = new Date(year, 4, 15);
+    const springCutoff =
+      month === 11 ? new Date(year, 11, 15) : new Date(year - 1, 11, 15);
+    const scheduleForFall = month >= 4 && month <= 10;
+    const lateForFall =
+      scheduleForFall && subj.offered_fall && compareDate > fallCutoff;
+    const lateForSpring =
+      !scheduleForFall && subj.offered_spring && compareDate > springCutoff;
+    return lateForFall || lateForSpring;
+  }
+  return false;
+};
+
 export default {
   methods: {
-    lateSchedule: function (subj, genericIndex, compareDate = new Date()) {
-      if (subj.schedule === undefined && !(subj.subject_id in genericIndex)) {
-        const year = compareDate.getFullYear();
-        const month = compareDate.getMonth();
-        const fallCutoff = new Date(year, 4, 15);
-        const springCutoff =
-          month === 11 ? new Date(year, 11, 15) : new Date(year - 1, 11, 15);
-        const scheduleForFall = month >= 4 && month <= 10;
-        const lateForFall =
-          scheduleForFall && subj.offered_fall && compareDate > fallCutoff;
-        const lateForSpring =
-          !scheduleForFall && subj.offered_spring && compareDate > springCutoff;
-        return lateForFall || lateForSpring;
-      }
-      return false;
-    },
+    lateSchedule: lateSchedule,
   },
 };
diff --git a/src/pages/MainPage.vue b/src/pages/MainPage.vue
index 0cdfc1cf..5b012af4 100644
--- a/src/pages/MainPage.vue
+++ b/src/pages/MainPage.vue
@@ -3,9 +3,9 @@
   <v-app id="app-wrapper">
     <v-dialog v-model="showMobile" fullscreen>
       <v-card height="100%">
-        <v-container fill-height>
-          <v-layout column>
-            <v-flex grow>
+        <v-container class="fill-height">
+          <v-row class="flex-column">
+            <v-col class="grow">
               <v-card-title primary-title>
                 <h1 class="text-h3">Hello there!</h1>
               </v-card-title>
@@ -16,8 +16,8 @@
                   app instead, available on Android and iOS.
                 </p>
               </v-card-text>
-            </v-flex>
-            <v-flex shrink align-self-center>
+            </v-col>
+            <v-col class="shrink" align-self="center">
               <v-btn block :href="appLink" color="info">
                 <v-icon>mdi-download</v-icon> Download
               </v-btn>
@@ -25,22 +25,22 @@
               <v-btn block href="#" @click="showMobile = false">
                 No thanks, take me to the desktop site.
               </v-btn>
-            </v-flex>
-          </v-layout>
+            </v-col>
+          </v-row>
         </v-container>
       </v-card>
     </v-dialog>
     <v-app-bar app fixed dense :elevation="2">
-      <road-tabs
+      <RoadTabs
         slot="extension"
-        @delete-road="$refs.authcomponent.deleteRoad($event)"
+        @delete-road="authcomponent.deleteRoad($event)"
         @add-road="addRoad(...arguments)"
-        @retrieve="$refs.authcomponent.retrieveRoad($event)"
+        @retrieve="authcomponent.retrieveRoad($event)"
       />
 
-      <import-export @add-road="addRoad(...arguments)" />
+      <ImportExport @add-road="addRoad(...arguments)" />
 
-      <auth
+      <Auth
         ref="authcomponent"
         :just-loaded="justLoaded"
         :conflict-info="conflictInfo"
@@ -48,7 +48,7 @@
         @resolve-conflict="resolveConflict"
       />
 
-      <v-layout justify-end>
+      <v-row justify="end" no-gutters>
         <v-text-field
           id="searchInputTF"
           v-model="searchInput"
@@ -66,9 +66,9 @@
           "
           @input="typeSearch"
           @keydown.esc="searchOpen = false"
-          @keyup.enter="$refs.searchMenu.openFirstClass"
+          @keyup.enter="searchMenu.openFirstClass"
         />
-      </v-layout>
+      </v-row>
     </v-app-bar>
 
     <v-navigation-drawer
@@ -78,17 +78,17 @@
       class="side-panel elevation-2 scroller"
       app
     >
-      <v-container fill-height style="padding: 0">
-        <v-layout fill-height column>
-          <v-layout
-            shrink
+      <v-container class="fill-height" style="padding: 0">
+        <v-row class="fill-height flex-column" no-gutters>
+          <v-row
+            class="shrink"
             style="padding: 14px; padding-bottom: 0"
-            align-center
+            align="center"
+            no-gutters
           >
-            <v-flex
-              shrink
-              class="blue-grey"
-              :class="[$vuetify.theme.dark ? 'darken-4' : 'lighten-4']"
+            <v-col
+              class="blue-grey shrink"
+              :class="[vuetify.theme.dark ? 'darken-4' : 'lighten-4']"
               style="
                 user-select: none;
                 color: inherit;
@@ -98,13 +98,15 @@
                 display: inline-block;
               "
             >
-              <v-icon size="1.3em" color="#00b300">
-                mdi-checkbox-marked
-              </v-icon>
-              <h3 style="display: inline">{{ " C o u r s e R o a d " }}</h3>
-            </v-flex>
-            <theme-toggler />
-            <v-flex>
+              <h3 style="white-space: nowrap; display: inline-block">
+                <v-icon size="0.75lh" color="#00b300">
+                  mdi-checkbox-marked
+                </v-icon>
+                {{ " C o u r s e R o a d " }}
+              </h3>
+            </v-col>
+            <ThemeToggler />
+            <v-col>
               <v-dialog
                 v-model="aboutDialog"
                 fullscreen
@@ -129,13 +131,13 @@
                     <v-btn icon text @click="aboutDialog = false">
                       <v-icon>mdi-arrow-left</v-icon>
                     </v-btn>
-                    <about />
+                    <About />
                   </v-container>
                 </v-card>
               </v-dialog>
-            </v-flex>
-          </v-layout>
-          <audit
+            </v-col>
+          </v-row>
+          <Audit
             v-if="activeRoad !== ''"
             :req-trees="reqTrees"
             :selected-reqs="roads[activeRoad].contents.coursesOfStudy"
@@ -144,8 +146,8 @@
             :progress-overrides="roads[activeRoad].contents.progressOverrides"
             data-cy="audit"
           />
-          <v-flex
-            shrink
+          <v-col
+            class="shrink"
             style="padding: 14px; padding-bottom: 0"
             data-cy="unofficialWarning"
           >
@@ -175,8 +177,8 @@
                 >courseroad@mit.edu</a
               >.
             </p>
-          </v-flex>
-        </v-layout>
+          </v-col>
+        </v-row>
       </v-container>
       <!-- TODO: will need to add event for when the child can edit selectedReqs probably -->
     </v-navigation-drawer>
@@ -188,18 +190,18 @@
           :key="roadId"
           :value="roadId"
         >
-          <road
+          <Road
             :selected-subjects="roads[roadId].contents.selectedSubjects"
             :road-i-d="roadId"
             :adding-from-card="addingFromCard && activeRoad === roadId"
             :drag-semester-num="activeRoad === roadId ? dragSemesterNum : -1"
             :data-cy="'road_' + roadId"
-            @change-year="$refs.authcomponent.changeSemester($event)"
+            @change-year="authcomponent.changeSemester($event)"
           />
         </v-tab-item>
       </v-tabs-items>
 
-      <conflict-dialog
+      <ConflictDialog
         ref="conflictdialog"
         :conflict-info="conflictInfo"
         :conflict-dialog="conflictDialog"
@@ -214,7 +216,7 @@
       class="elevation-8"
       @click.native="$event.stopPropagation()"
     >
-      <class-search
+      <ClassSearch
         id="searchMenu"
         ref="searchMenu"
         class="search-menu"
@@ -222,16 +224,16 @@
       />
     </v-card>
 
-    <class-info
-      v-if="$store.state.classInfoStack.length"
+    <ClassInfo
+      v-if="store.classInfoStack.length"
       @click.native="$event.stopPropagation()"
     />
 
     <v-footer v-if="!dismissedCookies" fixed :color="'#34627d'" app>
-      <v-layout column>
-        <v-flex v-if="!dismissedCookies" class="py-1 px-2">
-          <v-layout align-center>
-            <v-flex style="color: white">
+      <v-row class="flex-column">
+        <v-col v-if="!dismissedCookies" class="py-1 px-2">
+          <v-row align="center">
+            <v-col style="color: white">
               This website uses cookies and session storage to store your data
               and login token, and important features like saving roads will not
               work without them. <br />
@@ -244,8 +246,8 @@
                 use of cookies, but may opt out by clicking the button to the
                 right.</span
               >
-            </v-flex>
-            <v-flex shrink>
+            </v-col>
+            <v-col class="shrink">
               <v-btn
                 small
                 depressed
@@ -254,14 +256,14 @@
                 data-cy="acceptCookies"
                 style="color: rgb(255 255 255)"
                 @click="
-                  $store.commit('allowCookies');
+                  store.allowCookies();
                   dismissCookies();
                 "
               >
                 I accept
               </v-btn>
-            </v-flex>
-            <v-flex shrink>
+            </v-col>
+            <v-col class="shrink">
               <v-btn
                 small
                 depressed
@@ -273,378 +275,369 @@
               >
                 Opt out
               </v-btn>
-            </v-flex>
-          </v-layout>
-        </v-flex>
-      </v-layout>
+            </v-col>
+          </v-row>
+        </v-col>
+      </v-row>
     </v-footer>
   </v-app>
 </template>
 
-<script>
+<script setup>
 import Audit from "./../components/Audit.vue";
 import ClassSearch from "./../components/ClassSearch.vue";
 import Road from "./../components/Road.vue";
 import RoadTabs from "./../components/RoadTabs.vue";
 import ConflictDialog from "./../components/ConflictDialog.vue";
 import Auth from "./../components/Auth.vue";
-import axios from "axios";
-import $ from "jquery";
-import moment from "moment";
-import UAParser from "ua-parser-js";
-import Vue from "vue";
 import ClassInfo from "./../components/ClassInfo.vue";
 import ImportExport from "./../components/ImportExport.vue";
 import ThemeToggler from "./../components/ThemeToggler.vue";
 import About from "./../components/About.vue";
+import axios from "axios";
+import $ from "jquery";
+import moment from "moment";
+import UAParser from "ua-parser-js";
+import {
+  useStore,
+  useVuetify,
+  useCookies,
+  useRoute,
+  useRouter,
+} from "../plugins/composition.js";
+import { flatten } from "../plugins/browserSupport.js";
+import {
+  ref,
+  computed,
+  watch,
+  nextTick,
+  onMounted,
+  onBeforeMount,
+  reactive,
+  set,
+} from "vue";
 
 const DATE_FORMAT = "YYYY-MM-DDTHH:mm:ss.SSS000Z";
 
-export default {
-  components: {
-    audit: Audit,
-    "class-search": ClassSearch,
-    road: Road,
-    "road-tabs": RoadTabs,
-    "conflict-dialog": ConflictDialog,
-    auth: Auth,
-    "class-info": ClassInfo,
-    "import-export": ImportExport,
-    "theme-toggler": ThemeToggler,
-    about: About,
-  },
-  data: function () {
-    return {
-      aboutDialog: false,
-      reqTrees: {},
-      reqList: [],
-      dragSemesterNum: -1,
-      gettingUserData: false,
-      cookieName: "Default Cookie",
-      accessInfo: undefined,
-      rightDrawer: true,
-      newRoadName: "",
-      justLoaded: true,
-      currentlySaving: false,
-      saveWarnings: [],
-      conflictDialog: false,
-      conflictInfo: undefined,
-      searchInput: "",
-      dismissedAndroidWarning: false,
-      dismissedCookies: false,
-      searchOpen: false,
-      updatingFulfillment: false,
-      showMobile:
-        ["mobile", "tabvar"].indexOf(
-          new UAParser(navigator.userAgent).getDevice().type,
-        ) !== -1,
-    };
-  },
-  computed: {
-    activeRoad: {
-      get() {
-        return this.$store.state.activeRoad;
-      },
-      set(value) {
-        this.$store.commit("setActiveRoad", value);
-      },
-    },
-    addingFromCard() {
-      return this.$store.state.addingFromCard;
-    },
-    appLink: function () {
-      switch (new UAParser(navigator.userAgent).getOS().name) {
-        case "Android":
-          return "http://play.google.com/store/apps/details?id=com.base12innovations.android.fireroad";
-        case "iOS":
-          return "https://itunes.apple.com/us/app/fireroad-mit-course-planner/id1330678450?mt=8";
-        default:
-          return null;
-      }
-    },
-    cookiesAllowed() {
-      return this.$store.state.cookiesAllowed;
-    },
-    roads() {
-      return this.$store.state.roads;
-    },
-    roadref: function () {
-      return "#road" + this.activeRoad;
-    },
-  },
-  watch: {
-    // call fireroad to check fulfillment if you change active roads or change something about a road
-    activeRoad: function (newRoad) {
-      if (
-        this.$store.state.unretrieved.indexOf(newRoad) >= 0 &&
-        !this.$refs.authcomponent.gettingUserData
-      ) {
-        const _this = this;
-        this.$refs.authcomponent.retrieveRoad(newRoad).then(function () {
-          _this.$store.commit("setRetrieved", newRoad);
-        });
-      } else if (newRoad !== "") {
-        this.updateFulfillment(this.$store.state.fulfillmentNeeded);
-      }
-      // If just loaded, store isn't loaded yet
-      // and so we can't overwrite the router just yet
-      if (newRoad !== "" && !this.justLoaded) {
-        this.$router.push({ path: `/road/${newRoad}` });
-      }
-      this.justLoaded = false;
-    },
-    cookiesAllowed: function (newCA) {
-      if (newCA) {
-        this.$cookies.set(
-          "dismissedAndroidWarning",
-          this.dismissedAndroidWarning,
-        );
-      }
-    },
-    roads: {
-      handler: function () {
-        this.justLoaded = false;
-        if (this.cookiesAllowed === undefined) {
-          this.$store.commit("allowCookies");
-        }
-        if (this.activeRoad !== "") {
-          this.updateFulfillment(this.$store.state.fulfillmentNeeded);
-        }
-        this.$store.commit("resetFulfillmentNeeded");
-
-        if (!this.$store.state.ignoreRoadChanges) {
-          this.$refs.authcomponent.save(this.activeRoad);
-        } else {
-          this.$store.commit("watchRoadChanges");
-        }
-      },
-      deep: true,
-    },
-  },
-  created() {
-    if (
-      this.cookiesAllowed &&
-      this.$cookies.get("versionNumber") !== this.$store.state.versionNumber
-    ) {
-      console.log("Warning: the version number has changed.");
-      // do whatever needs to happen when the version changed, probably including clearing local storage
-      // then update the version number cookie
-      localStorage.clear();
-      this.$cookies.set("versionNumber", this.$store.state.versionNumber);
+const store = useStore();
+const vuetify = useVuetify();
+const cookies = useCookies();
+const route = useRoute();
+const router = useRouter();
+
+const aboutDialog = ref(false);
+const reqTrees = reactive({});
+const reqList = ref([]);
+const dragSemesterNum = ref(-1);
+// const gettingUserData = ref(false);
+// const cookieName = ref("Default Cookie");
+// const accessInfo = ref(undefined);
+// const rightDrawer = ref(true);
+// const newRoadName = ref("");
+const justLoaded = ref(true);
+// const currentlySaving = ref(false);
+// const saveWarnings = ref([]);
+const conflictDialog = ref(false);
+const conflictInfo = ref(undefined);
+const searchInput = ref("");
+const dismissedAndroidWarning = ref(false);
+const dismissedCookies = ref(false);
+const searchOpen = ref(false);
+const updatingFulfillment = ref(false);
+const showMobile = ref(
+  ["mobile", "tabvar"].indexOf(
+    new UAParser(navigator.userAgent).getDevice().type,
+  ) !== -1,
+);
+
+// template component
+const authcomponent = ref(null);
+const searchMenu = ref(null);
+const conflictdialog = ref(null);
+
+const activeRoad = computed({
+  get: () => store.activeRoad,
+  set: (value) => store.setActiveRoad(value),
+});
+const addingFromCard = computed(() => store.addingFromCard);
+const appLink = computed(() => {
+  switch (new UAParser(navigator.userAgent).getOS().name) {
+    case "Android":
+      return "http://play.google.com/store/apps/details?id=com.base12innovations.android.fireroad";
+    case "iOS":
+      return "https://itunes.apple.com/us/app/fireroad-mit-course-planner/id1330678450?mt=8";
+    default:
+      return null;
+  }
+});
+const cookiesAllowed = computed(() => store.cookiesAllowed);
+const roads = computed(() => store.roads);
+// const roadref = computed(() => "#road" + activeRoad.value);
+
+watch(activeRoad, (newRoad) => {
+  if (
+    store.unretrieved.indexOf(newRoad) >= 0 &&
+    !authcomponent.value.gettingUserData
+  ) {
+    authcomponent.value.retrieveRoad(newRoad).then(() => {
+      store.setRetrieved(newRoad);
+    });
+  } else if (newRoad !== "") {
+    updateFulfillment(store.fulfillmentNeeded);
+  }
+  // If just loaded, store isn't loaded yet
+  // and so we can't overwrite the router just yet
+  if (newRoad !== "" && !justLoaded.value) {
+    router.push({ path: `/road/${newRoad}` });
+  }
+  justLoaded.value = false;
+});
+watch(cookiesAllowed, (newCA) => {
+  if (newCA) {
+    cookies.set("dismissedAndroidWarning", dismissedAndroidWarning.value);
+  }
+});
+watch(
+  roads,
+  () => {
+    justLoaded.value = false;
+    if (cookiesAllowed.value === undefined) {
+      store.allowCookies();
     }
-  },
-  mounted() {
-    const today = new Date();
-    const month = today.getMonth();
-    this.$store.commit("setCurrentSemester", month >= 4 && month <= 10 ? 1 : 3);
-    if (
-      localStorage.courseRoadStore !== undefined &&
-      this.cookiesAllowed &&
-      this.$store.state.loggedIn
-    ) {
-      this.$store.commit(
-        "setFromLocalStorage",
-        JSON.parse(localStorage.courseRoadStore),
-      );
+    if (activeRoad.value !== "") {
+      updateFulfillment(store.fulfillmentNeeded);
+    }
+    store.resetFulfillmentNeeded();
+
+    if (!store.ignoreRoadChanges) {
+      authcomponent.value.save(activeRoad.value);
+    } else {
+      store.watchRoadChanges();
     }
-    const borders = $(".v-navigation-drawer__border");
-    const scrollers = $(".scroller");
-    const scrollWidth = scrollers.width();
-    // moves nav drawer border with scroll
-    // if the effect proves too annoying we can remove the borders instead
-    scrollers.scroll(function () {
-      const scrollPosition = scrollers.scrollLeft();
-      borders.css({ top: 0, left: scrollWidth - 1 + scrollPosition });
+  },
+  { deep: true },
+);
+
+onBeforeMount(() => {
+  if (
+    cookiesAllowed.value &&
+    cookies.get("versionNumber") !== store.versionNumber
+  ) {
+    console.log("Warning: the version number has changed.");
+    // do whatever needs to happen when the version changed, probably including clearing local storage
+    // then update the version number cookie
+    localStorage.clear();
+    cookies.set("versionNumber", store.versionNumber);
+  }
+});
+
+onMounted(() => {
+  const today = new Date();
+  const month = today.getMonth();
+  store.setCurrentSemester(month >= 4 && month <= 10 ? 1 : 3);
+  if (
+    localStorage.courseRoadStore !== undefined &&
+    cookiesAllowed.value &&
+    store.loggedIn
+  ) {
+    store.setFromLocalStorage(JSON.parse(localStorage.courseRoadStore));
+  }
+  const borders = $(".v-navigation-drawer__border");
+  const scrollers = $(".scroller");
+  const scrollWidth = scrollers.width();
+  // moves nav drawer border with scroll
+  // if the effect proves too annoying we can remove the borders instead
+  scrollers.on("scroll", () => {
+    const scrollPosition = scrollers.scrollLeft();
+    borders.css({ top: 0, left: scrollWidth - 1 + scrollPosition });
+  });
+
+  setActiveRoad();
+
+  axios
+    .get(import.meta.env.VITE_FIREROAD_URL + "/requirements/list_reqs/")
+    .then((response) => {
+      reqList.value = Object.keys(response.data)
+        .map((m) => {
+          return Object.assign(response.data[m], { key: m });
+        })
+        .sort();
     });
 
-    this.setActiveRoad();
-
-    axios
-      .get(import.meta.env.VITE_FIREROAD_URL + "/requirements/list_reqs/")
-      .then((response) => {
-        this.reqList = Object.keys(response.data)
-          .map((m) => {
-            return Object.assign(response.data[m], { key: m });
-          })
-          .sort();
-      });
-
-    // Update fulfillment for all majors on load
-    this.updateFulfillment("all");
-
-    document.body.addEventListener(
-      "click",
-      function () {
-        this.searchOpen = false;
-      }.bind(this),
+  // Update fulfillment for all majors on load
+  updateFulfillment("all");
+
+  document.body.addEventListener("click", () => {
+    searchOpen.value = false;
+  });
+
+  window.addEventListener("beforeunload", () => {
+    if (cookiesAllowed.value && store.loggedIn) {
+      const subjectsInfoNoDescriptions = store.subjectsInfo.map((x) => ({
+        subject_id: x.subject_id,
+        title: x.title,
+        offered_fall: x.offered_fall,
+        offered_spring: x.offered_spring,
+        offered_iap: x.offered_iap,
+      }));
+      store.setSubjectsInfo(subjectsInfoNoDescriptions);
+      localStorage.courseRoadStore = JSON.stringify(store.$state);
+    }
+  });
+
+  if (cookies.isKey("dismissedAndroidWarning")) {
+    dismissedAndroidWarning.value = JSON.parse(
+      cookies.get("dismissedAndroidWarning"),
     );
+    store.allowCookies();
+  }
+
+  if (cookies.isKey("dismissedCookies")) {
+    dismissedCookies.value = JSON.parse(cookies.get("dismissedCookies"));
+    store.allowCookies();
+  }
 
-    window.addEventListener("beforeunload", () => {
-      if (this.cookiesAllowed && this.$store.state.loggedIn) {
-        const subjectsInfoNoDescriptions = this.$store.state.subjectsInfo.map(
-          function (x) {
-            x = {
-              subject_id: x.subject_id,
-              title: x.title,
-              offered_fall: x.offered_fall,
-              offered_spring: x.offered_spring,
-              offered_iap: x.offered_iap,
-            };
-            return x;
-          },
-        );
-        this.$store.commit("setSubjectsInfo", subjectsInfoNoDescriptions);
-        localStorage.courseRoadStore = JSON.stringify(this.$store.state);
-      }
+  // developer.mit.edu version commented out because I couldn't get it to work. filed an issue to resolve it.
+  // axios.get('https://mit-course-catalog-v2.cloudhub.io/coursecatalog/v2/terms/2018FA/subjects', {headers:{client_id:'01fce9ed7f9d4d26939a68a4126add9b', client_secret:'D4ce51aA6A32421DA9AddF4188b93255'}})
+  // , 'Accept': 'application/json'} ?
+  // full=true is ~3x bigger but has some great info like "in_class_hours" and "rating"
+  store
+    .loadAllSubjects()
+    .then(() => {
+      console.log("Subjects were loaded successfully!");
+    })
+    .catch((e) => {
+      console.log("There was an error loading subjects: \n" + e);
     });
+});
 
-    if (this.$cookies.isKey("dismissedAndroidWarning")) {
-      this.dismissedAndroidWarning = JSON.parse(
-        this.$cookies.get("dismissedAndroidWarning"),
+const updateFulfillment = (fulfillmentNeeded) => {
+  if (!updatingFulfillment.value && fulfillmentNeeded !== "none") {
+    updatingFulfillment.value = true;
+    // list of majors to get audit fulfillment for depending on fulfillmentNeeded
+    const fulfillments =
+      fulfillmentNeeded === "all"
+        ? roads.value[activeRoad.value].contents.coursesOfStudy
+        : [fulfillmentNeeded];
+    for (let r = 0; r < fulfillments.length; r++) {
+      const req = fulfillments[r];
+      const alteredRoadContents = Object.assign(
+        {},
+        roads.value[activeRoad.value].contents,
       );
-      this.$store.commit("allowCookies");
-    }
-    if (this.$cookies.isKey("dismissedCookies")) {
-      this.dismissedCookies = JSON.parse(this.$cookies.get("dismissedCookies"));
-      this.$store.commit("allowCookies");
+      alteredRoadContents.selectedSubjects = flatten(
+        alteredRoadContents.selectedSubjects,
+      );
+      axios
+        .post(
+          import.meta.env.VITE_FIREROAD_URL +
+            "/requirements/progress/" +
+            req +
+            "/",
+          alteredRoadContents,
+        )
+        .then((response) => {
+          // This is necessary so Vue knows about the new property on reqTrees
+          // TODO: above comment was true in vue 2, check for vue 3
+          set(reqTrees, req, response.data);
+        });
     }
+    nextTick(() => {
+      updatingFulfillment.value = false;
+    });
+  }
+};
 
-    // developer.mit.edu version commented out because I couldn't get it to work. filed an issue to resolve it.
-    // axios.get('https://mit-course-catalog-v2.cloudhub.io/coursecatalog/v2/terms/2018FA/subjects', {headers:{client_id:'01fce9ed7f9d4d26939a68a4126add9b', client_secret:'D4ce51aA6A32421DA9AddF4188b93255'}})
-    // , 'Accept': 'application/json'} ?
-    // full=true is ~3x bigger but has some great info like "in_class_hours" and "rating"
-    this.$store
-      .dispatch("loadAllSubjects")
-      .then(() => {
-        console.log("Subjects were loaded successfully!");
-      })
-      .catch((e) => {
-        console.log("There was an error loading subjects: \n" + e);
-      });
-  },
-  methods: {
-    updateFulfillment: function (fulfillmentNeeded) {
-      if (!this.updatingFulfillment && fulfillmentNeeded !== "none") {
-        this.updatingFulfillment = true;
-        const _this = this;
-        // list of majors to get audit fulfillment for depending on fulfillmentNeeded
-        const fulfillments =
-          fulfillmentNeeded === "all"
-            ? this.roads[this.activeRoad].contents.coursesOfStudy
-            : [fulfillmentNeeded];
-        for (let r = 0; r < fulfillments.length; r++) {
-          const req = fulfillments[r];
-          const alteredRoadContents = Object.assign(
-            {},
-            _this.roads[_this.activeRoad].contents,
-          );
-          alteredRoadContents.selectedSubjects = this.flatten(
-            alteredRoadContents.selectedSubjects,
-          );
-          axios
-            .post(
-              import.meta.env.VITE_FIREROAD_URL +
-                "/requirements/progress/" +
-                req +
-                "/",
-              alteredRoadContents,
-            )
-            .then(
-              function (response) {
-                // This is necessary so Vue knows about the new property on reqTrees
-                Vue.set(this.data.reqTrees, this.req, response.data);
-              }.bind({ data: this, req }),
-            );
-        }
-        Vue.nextTick(
-          function () {
-            this.updatingFulfillment = false;
-          }.bind(this),
-        );
-      }
-    },
-    setActiveRoad: function () {
-      const roadRequested = this.$route.params.road;
-      if (this.$route.params.road in this.roads) {
-        this.$store.commit("setActiveRoad", roadRequested);
-        return true;
-      } else if (!this.$cookies.isKey("accessInfo")) {
-        // If user isn't logged in, and bad road id in url, then redirect to default road
-        const defaultRoadId = this.$store.state.activeRoad;
-        this.$router.replace({ path: `/road/${defaultRoadId}` });
-      }
-      return false;
-    },
-    addRoad: function (
-      roadName,
-      cos = ["girs"],
-      ss = Array.from(Array(16), () => []),
-      overrides = {},
-    ) {
-      const tempRoadID = "$" + this.$refs.authcomponent.newRoads.length + "$";
-      const newContents = {
-        coursesOfStudy: cos,
-        selectedSubjects: ss,
-        progressOverrides: overrides,
-        progressAssertions: {},
-      };
-      const newRoad = {
-        downloaded: moment().format(DATE_FORMAT),
-        changed: moment().format(DATE_FORMAT),
-        name: roadName,
-        agent: "",
-        contents: newContents,
-      };
-      this.$store.commit("setRoad", {
-        id: tempRoadID,
-        road: newRoad,
-        ignoreSet: false,
-      });
-      this.$store.commit("resetFulfillmentNeeded");
-      this.$store.commit("setActiveRoad", tempRoadID);
-      this.$refs.authcomponent.newRoads.push(tempRoadID);
-    },
-    conflict: function (conflictInfo) {
-      this.$refs.conflictdialog.startConflict();
-      this.conflictInfo = conflictInfo;
-    },
-    resolveConflict: function () {
-      this.$refs.conflictdialog.resolveConflict();
-      this.conflictInfo = undefined;
-    },
-    disallowCookies: function () {
-      this.$store.commit("disallowCookies");
-      this.dismissCookies();
-      const cookieKeys = this.$cookies.keys();
-      for (let k = 0; k < cookieKeys.length; k++) {
-        this.$cookies.remove(cookieKeys[k]);
-      }
-    },
-    updateLocal: function (id) {
-      this.$refs.authcomponent.updateLocal(id);
-    },
-    updateRemote: function (id) {
-      this.$refs.authcomponent.updateRemote(id);
-    },
-    dismissOld: function () {
-      this.dismissedAndroidWarning = true;
-      if (this.cookiesAllowed) {
-        this.$cookies.set("dismissedAndroidWarning", true);
-      }
-    },
-    dismissCookies: function () {
-      this.dismissedCookies = true;
-      if (this.cookiesAllowed) {
-        this.$cookies.set("dismissedCookies", true);
-      }
-    },
-    clickSearch: function () {
-      this.searchOpen = !this.searchOpen;
-    },
-    typeSearch: function (searchString) {
-      this.searchOpen = searchString.length > 0;
-    },
-  },
+const setActiveRoad = () => {
+  const roadRequested = route.params.road;
+  if (route.params.road in roads.value) {
+    store.setActiveRoad(roadRequested);
+    return true;
+  } else if (!cookies.isKey("accessInfo")) {
+    // If user isn't logged in, and bad road id in url, then redirect to default road
+    const defaultRoadId = store.activeRoad;
+    router.replace({ path: `/road/${defaultRoadId}` });
+  }
+  return false;
+};
+
+const addRoad = (
+  roadName,
+  cos = ["girs"],
+  ss = Array.from(Array(16), () => []),
+  overrides = {},
+) => {
+  const tempRoadID = "$" + authcomponent.value.newRoads.length + "$";
+  const newContents = {
+    coursesOfStudy: cos,
+    selectedSubjects: ss,
+    progressOverrides: overrides,
+    progressAssertions: {},
+  };
+  const newRoad = {
+    downloaded: moment().format(DATE_FORMAT),
+    changed: moment().format(DATE_FORMAT),
+    name: roadName,
+    agent: "",
+    contents: newContents,
+  };
+  store.setRoad({
+    id: tempRoadID,
+    road: newRoad,
+    ignoreSet: false,
+  });
+  store.resetFulfillmentNeeded();
+  store.setActiveRoad(tempRoadID);
+  authcomponent.value.newRoads.push(tempRoadID);
+};
+
+const conflict = (conflictInfo) => {
+  conflictDialog.value = true;
+  conflictInfo.value = conflictInfo;
+};
+
+const resolveConflict = () => {
+  conflictDialog.value = false;
+  conflictInfo.value = undefined;
+};
+
+const disallowCookies = () => {
+  store.disallowCookies();
+  dismissCookies();
+  const cookieKeys = cookies.keys();
+  for (let k = 0; k < cookieKeys.length; k++) {
+    cookies.remove(cookieKeys[k]);
+  }
+};
+
+const updateLocal = (id) => {
+  authcomponent.value.updateLocal(id);
+};
+
+const updateRemote = (id) => {
+  authcomponent.value.updateRemote(id);
+};
+
+// const dismissOld = () => {
+//   dismissedAndroidWarning.value = true;
+//   if (cookiesAllowed.value) {
+//     cookies.set("dismissedAndroidWarning", true);
+//   }
+// };
+
+const dismissCookies = () => {
+  dismissedCookies.value = true;
+  if (cookiesAllowed.value) {
+    cookies.set("dismissedCookies", true);
+  }
+};
+
+const clickSearch = () => {
+  searchOpen.value = !searchOpen.value;
+};
+
+const typeSearch = (searchString) => {
+  searchOpen.value = searchString.length > 0;
 };
 </script>
 
diff --git a/src/plugins/browserSupport.js b/src/plugins/browserSupport.js
index 0899a17f..76a540ca 100644
--- a/src/plugins/browserSupport.js
+++ b/src/plugins/browserSupport.js
@@ -1,10 +1,12 @@
+export const flatten = (array) => {
+  return [].concat.apply([], array);
+};
+
 const BrowserSupportPlugin = {
   install(Vue) {
     Vue.mixin({
       methods: {
-        flatten: function (array) {
-          return [].concat.apply([], array);
-        },
+        flatten: flatten,
       },
     });
   },
diff --git a/src/plugins/composition.js b/src/plugins/composition.js
new file mode 100644
index 00000000..05716990
--- /dev/null
+++ b/src/plugins/composition.js
@@ -0,0 +1,27 @@
+// this file can be removed once we're using vue 3
+// everything here can be done with new apis in later versions
+
+import { getCurrentInstance } from "vue";
+import useCourseDataStore from "../stores/courseData";
+
+export const useVuetify = () => {
+  const vm = getCurrentInstance();
+  return vm.proxy?.$vuetify || undefined;
+};
+
+export const useStore = useCourseDataStore;
+
+export const useCookies = () => {
+  const vm = getCurrentInstance();
+  return vm.proxy?.$cookies || undefined;
+};
+
+export const useRoute = () => {
+  const vm = getCurrentInstance();
+  return vm.proxy?.$route || undefined;
+};
+
+export const useRouter = () => {
+  const vm = getCurrentInstance();
+  return vm.proxy?.$router || undefined;
+};
diff --git a/src/stores/courseData.js b/src/stores/courseData.js
index 789efaa2..f466a264 100644
--- a/src/stores/courseData.js
+++ b/src/stores/courseData.js
@@ -1,14 +1,12 @@
+import { defineStore, acceptHMRUpdate } from "pinia";
 import axios from "axios";
 import moment from "moment";
 import Vue from "vue";
-import Vuex from "vuex";
-
-Vue.use(Vuex);
 
 const DATE_FORMAT = "YYYY-MM-DDTHH:mm:ss.SSS000Z";
 
-const getDefaultState = () => {
-  return {
+const useCourseDataStore = defineStore("courseData", {
+  state: () => ({
     versionNumber: "1.0.0", // change when making backwards-incompatible changes
     currentSemester: 1,
     activeRoad: "$defaultroad$",
@@ -50,60 +48,97 @@ const getDefaultState = () => {
     loadedSubjects: false,
     roadsToMigrate: [],
     isDarkMode: JSON.parse(localStorage.courseRoadStore ?? "{}").isDarkMode,
-  };
-};
-
-const store = new Vuex.Store({
-  strict: process.env.NODE_ENV !== "production",
-  state: getDefaultState(),
+  }),
   getters: {
-    userYear(state) {
+    userYear: (state) => {
       return Math.floor((state.currentSemester - 1) / 3);
     },
-    hideIAP: (state) => {
-      return state.hideIAP;
-    },
   },
-  mutations: {
-    resetState(state) {
-      Object.assign(state, getDefaultState());
+  actions: {
+    getMatchingAttributes(gir, hass, ci) {
+      const matchingClasses = this.subjectsInfo.filter(function (subject) {
+        if (gir !== undefined && subject.gir_attribute !== gir) {
+          return false;
+        }
+        if (hass !== undefined && subject.hass_attribute !== hass) {
+          return false;
+        }
+        return !(ci !== undefined && subject.communication_requirement !== ci);
+      });
+
+      const totalObject = matchingClasses.reduce(
+        function (accumObject, nextClass) {
+          return {
+            offered_spring:
+              accumObject.offered_spring || nextClass.offered_spring,
+            offered_summer:
+              accumObject.offered_summer || nextClass.offered_summer,
+            offered_IAP: accumObject.offered_IAP || nextClass.offered_IAP,
+            offered_fall: accumObject.offered_fall || nextClass.offered_fall,
+            in_class_hours:
+              accumObject.in_class_hours +
+              (nextClass.in_class_hours !== undefined
+                ? nextClass.in_class_hours
+                : 0),
+            out_of_class_hours:
+              accumObject.out_of_class_hours +
+              (nextClass.out_of_class_hours !== undefined
+                ? nextClass.out_of_class_hours
+                : 0),
+          };
+        },
+        {
+          offered_spring: false,
+          offered_summer: false,
+          offered_IAP: false,
+          offered_fall: false,
+          in_class_hours: 0,
+          out_of_class_hours: 0,
+        },
+      );
+      totalObject.in_class_hours /= matchingClasses.length;
+      totalObject.out_of_class_hours /= matchingClasses.length;
+      return totalObject;
+    },
+    resetState() {
+      this.$reset();
     },
-    addClass(state, newClass) {
-      state.roads[state.activeRoad].contents.selectedSubjects[
+    addClass(newClass) {
+      this.roads[this.activeRoad].contents.selectedSubjects[
         newClass.semester
       ].push(newClass);
-      state.roads[state.activeRoad].changed = moment().format(DATE_FORMAT);
+      this.roads[this.activeRoad].changed = moment().format(DATE_FORMAT);
     },
-    addFromCard(state, classItem) {
-      state.addingFromCard = true;
-      state.itemAdding = classItem;
+    addFromCard(classItem) {
+      this.addingFromCard = true;
+      this.itemAdding = classItem;
     },
-    addReq(state, event) {
-      state.roads[state.activeRoad].contents.coursesOfStudy.push(event);
-      state.roads[state.activeRoad].changed = moment().format(DATE_FORMAT);
-      state.fulfillmentNeeded = event;
+    addReq(event) {
+      this.roads[this.activeRoad].contents.coursesOfStudy.push(event);
+      this.roads[this.activeRoad].changed = moment().format(DATE_FORMAT);
+      this.fulfillmentNeeded = event;
     },
-    migrateOldSubjects(state, roadID) {
+    migrateOldSubjects(roadID) {
       for (let i = 0; i < 16; i++) {
         for (
           let j = 0;
-          j < state.roads[roadID].contents.selectedSubjects[i].length;
+          j < this.roads[roadID].contents.selectedSubjects[i].length;
           j++
         ) {
-          const subject = state.roads[roadID].contents.selectedSubjects[i][j];
+          const subject = this.roads[roadID].contents.selectedSubjects[i][j];
 
-          const subjectIndex = state.subjectsIndex[subject.subject_id];
-          const genericIndex = state.genericIndex[subject.subject_id];
+          const subjectIndex = this.subjectsIndex[subject.subject_id];
+          const genericIndex = this.genericIndex[subject.subject_id];
 
           const notInCatalog =
             subjectIndex === undefined && genericIndex === undefined;
           const isHistorical =
             subjectIndex !== undefined &&
-            state.subjectsInfo[subjectIndex].is_historical;
+            this.subjectsInfo[subjectIndex].is_historical;
 
           if (notInCatalog || isHistorical) {
             // Look for subject with old ID
-            const oldSubjects = state.subjectsInfo.filter((subj) => {
+            const oldSubjects = this.subjectsInfo.filter((subj) => {
               return subj.old_id === subject.subject_id;
             });
 
@@ -117,48 +152,44 @@ const store = new Vuex.Store({
         }
       }
     },
-    allowCookies(state) {
-      state.cookiesAllowed = true;
+    allowCookies() {
+      this.cookiesAllowed = true;
     },
-    cancelAddFromCard(state) {
-      state.addingFromCard = false;
-      state.itemAdding = undefined;
+    cancelAddFromCard() {
+      this.addingFromCard = false;
+      this.itemAdding = undefined;
     },
-    cancelEditCustomClass(state) {
-      state.customClassEditing = undefined;
+    cancelEditCustomClass() {
+      this.customClassEditing = undefined;
     },
-    clearClassInfoStack(state) {
-      state.classInfoStack = [];
+    clearClassInfoStack() {
+      this.classInfoStack = [];
     },
-    disallowCookies(state) {
-      state.cookiesAllowed = false;
+    disallowCookies() {
+      this.cookiesAllowed = false;
     },
-    deleteRoad(state, id) {
-      state.ignoreRoadChanges = true;
-      Vue.delete(state.roads, id);
+    deleteRoad(id) {
+      this.ignoreRoadChanges = true;
+      Vue.delete(this.roads, id);
     },
-    dragStartClass(state, event) {
+    dragStartClass(event) {
       let classInfo = event.classInfo;
       if (classInfo === undefined) {
-        if (event.basicClass.subject_id in state.subjectsIndex) {
+        if (event.basicClass.subject_id in this.subjectsIndex) {
           classInfo =
-            state.subjectsInfo[
-              state.subjectsIndex[event.basicClass.subject_id]
-            ];
-        } else if (event.basicClass.subject_id in state.genericIndex) {
+            this.subjectsInfo[this.subjectsIndex[event.basicClass.subject_id]];
+        } else if (event.basicClass.subject_id in this.genericIndex) {
           classInfo =
-            state.genericCourses[
-              state.genericIndex[event.basicClass.subject_id]
-            ];
+            this.genericCourses[this.genericIndex[event.basicClass.subject_id]];
         }
       }
-      state.itemAdding = classInfo;
-      state.addingFromCard = false;
+      this.itemAdding = classInfo;
+      this.addingFromCard = false;
     },
-    editCustomClass(state, classItem) {
-      state.customClassEditing = classItem;
+    editCustomClass(classItem) {
+      this.customClassEditing = classItem;
     },
-    finishEditCustomClass(state, newClass) {
+    finishEditCustomClass(newClass) {
       for (const attr of [
         "subject_id",
         "title",
@@ -171,50 +202,48 @@ const store = new Vuex.Store({
         "offered_spring",
         "offered_summer",
       ]) {
-        state.customClassEditing[attr] = newClass[attr];
+        this.customClassEditing[attr] = newClass[attr];
       }
-      state.customClassEditing.units = newClass.total_units;
-      state.customClassEditing = undefined;
+      this.customClassEditing.units = newClass.total_units;
+      this.customClassEditing = undefined;
     },
-    moveClass(state, { currentClass, classIndex, semester }) {
-      state.roads[state.activeRoad].contents.selectedSubjects[
+    moveClass({ currentClass, classIndex, semester }) {
+      this.roads[this.activeRoad].contents.selectedSubjects[
         currentClass.semester
       ].splice(classIndex, 1);
       currentClass.semester = semester;
-      state.roads[state.activeRoad].contents.selectedSubjects[semester].push(
+      this.roads[this.activeRoad].contents.selectedSubjects[semester].push(
         currentClass,
       );
-      state.roads[state.activeRoad].changed = moment().format(DATE_FORMAT);
+      this.roads[this.activeRoad].changed = moment().format(DATE_FORMAT);
     },
-    overrideWarnings(state, payload) {
-      const classIndex = state.roads[
-        state.activeRoad
-      ].contents.selectedSubjects[payload.classInfo.semester].indexOf(
-        payload.classInfo,
-      );
-      state.roads[state.activeRoad].contents.selectedSubjects[
+    overrideWarnings(payload) {
+      const classIndex = this.roads[this.activeRoad].contents.selectedSubjects[
+        payload.classInfo.semester
+      ].indexOf(payload.classInfo);
+      this.roads[this.activeRoad].contents.selectedSubjects[
         payload.classInfo.semester
       ][classIndex].overrideWarnings = payload.override;
     },
-    setPASubstitutions(state, { uniqueKey, newReqs }) {
+    setPASubstitutions({ uniqueKey, newReqs }) {
       Vue.set(
-        state.roads[state.activeRoad].contents.progressAssertions,
+        this.roads[this.activeRoad].contents.progressAssertions,
         uniqueKey,
         { substitutions: newReqs },
       );
       Vue.set(
-        state.roads[state.activeRoad],
+        this.roads[this.activeRoad],
         "changed",
         moment().format(DATE_FORMAT),
       );
     },
-    setPAIgnore(state, { uniqueKey, isIgnored }) {
+    setPAIgnore({ uniqueKey, isIgnored }) {
       const progressAssertion =
-        state.roads[state.activeRoad].contents.progressAssertions[uniqueKey];
+        this.roads[this.activeRoad].contents.progressAssertions[uniqueKey];
       if (isIgnored === true) {
         if (progressAssertion === undefined) {
           Vue.set(
-            state.roads[state.activeRoad].contents.progressAssertions,
+            this.roads[this.activeRoad].contents.progressAssertions,
             uniqueKey,
             { ignore: isIgnored },
           );
@@ -223,28 +252,28 @@ const store = new Vuex.Store({
         }
       } else {
         if (progressAssertion.substitutions === undefined) {
-          this.commit("removeProgressAssertion", uniqueKey);
+          this.removeProgressAssertion(uniqueKey);
         } else {
           Vue.delete(progressAssertion, "ignore");
         }
       }
       Vue.set(
-        state.roads[state.activeRoad],
+        this.roads[this.activeRoad],
         "changed",
         moment().format(DATE_FORMAT),
       );
     },
-    setUnretrieved(state, roadIDs) {
-      state.unretrieved = roadIDs;
+    setUnretrieved(roadIDs) {
+      this.unretrieved = roadIDs;
     },
-    setRetrieved(state, roadID) {
+    setRetrieved(roadID) {
       // Remove from unretrieved list when a road is retrieved
-      const roadIDIndex = state.unretrieved.indexOf(roadID);
+      const roadIDIndex = this.unretrieved.indexOf(roadID);
       if (roadIDIndex >= 0) {
-        state.unretrieved.splice(roadIDIndex, 1);
+        this.unretrieved.splice(roadIDIndex, 1);
       }
     },
-    parseGenericCourses(state) {
+    parseGenericCourses() {
       const girAttributes = {
         PHY1: ["Physics 1 GIR", "p1"],
         PHY2: ["Physics 2 GIR", "p2"],
@@ -276,7 +305,11 @@ const store = new Vuex.Store({
       const baseurl =
         "http://student.mit.edu/catalog/search.cgi?search=&style=verbatim&when=*&termleng=4&days_offered=*&start_time=*&duration=*&total_units=*";
       for (const gir in girAttributes) {
-        const offeredGir = getMatchingAttributes(gir, undefined, undefined);
+        const offeredGir = this.getMatchingAttributes(
+          gir,
+          undefined,
+          undefined,
+        );
         genericCourses.push(
           Object.assign({}, baseGeneric, offeredGir, {
             gir_attribute: gir,
@@ -287,7 +320,11 @@ const store = new Vuex.Store({
         );
       }
       for (const hass in hassAttributes) {
-        const offeredHass = getMatchingAttributes(undefined, hass, undefined);
+        const offeredHass = this.getMatchingAttributes(
+          undefined,
+          hass,
+          undefined,
+        );
         genericCourses.push(
           Object.assign({}, baseGeneric, offeredHass, {
             hass_attribute: hass,
@@ -296,7 +333,11 @@ const store = new Vuex.Store({
             url: baseurl + "&cred=" + hassAttributes[hass][1] + "&commun_int=*",
           }),
         );
-        const offeredHassCI = getMatchingAttributes(undefined, hass, "CI-H");
+        const offeredHassCI = this.getMatchingAttributes(
+          undefined,
+          hass,
+          "CI-H",
+        );
         genericCourses.push(
           Object.assign({}, baseGeneric, offeredHassCI, {
             hass_attribute: hass,
@@ -313,7 +354,7 @@ const store = new Vuex.Store({
         );
       }
       for (const ci in ciAttributes) {
-        const offeredCI = getMatchingAttributes(undefined, undefined, ci);
+        const offeredCI = this.getMatchingAttributes(undefined, undefined, ci);
         genericCourses.push(
           Object.assign({}, baseGeneric, offeredCI, {
             communication_requirement: ci,
@@ -324,10 +365,10 @@ const store = new Vuex.Store({
           }),
         );
       }
-      state.genericCourses = genericCourses;
+      this.genericCourses = genericCourses;
     },
-    parseGenericIndex(state) {
-      state.genericIndex = state.genericCourses.reduce(function (
+    parseGenericIndex() {
+      this.genericIndex = this.genericCourses.reduce(function (
         obj,
         item,
         index,
@@ -336,8 +377,8 @@ const store = new Vuex.Store({
         return obj;
       }, {});
     },
-    parseSubjectsIndex(state) {
-      state.subjectsIndex = state.subjectsInfo.reduce(function (
+    parseSubjectsIndex() {
+      this.subjectsIndex = this.subjectsInfo.reduce(function (
         obj,
         item,
         index,
@@ -346,179 +387,174 @@ const store = new Vuex.Store({
         return obj;
       }, {});
     },
-    popClassStack(state) {
-      state.classInfoStack.pop();
+    popClassStack() {
+      this.classInfoStack.pop();
     },
-    pushClassStack(state, id) {
-      if (id in state.subjectsIndex || id in state.genericIndex) {
+    pushClassStack(id) {
+      if (id in this.subjectsIndex || id in this.genericIndex) {
         if (
-          state.classInfoStack.length === 0 ||
-          id !== state.classInfoStack[state.classInfoStack.length - 1]
+          this.classInfoStack.length === 0 ||
+          id !== this.classInfoStack[this.classInfoStack.length - 1]
         ) {
           // we don't want to push to the stack if we click the same class over and over again
-          state.classInfoStack.push(id);
+          this.classInfoStack.push(id);
         }
       }
     },
-    removeClass(state, { classInfo, classIndex }) {
-      state.roads[state.activeRoad].contents.selectedSubjects[
+    removeClass({ classInfo, classIndex }) {
+      this.roads[this.activeRoad].contents.selectedSubjects[
         classInfo.semester
       ].splice(classIndex, 1);
-      state.roads[state.activeRoad].changed = moment().format(DATE_FORMAT);
+      this.roads[this.activeRoad].changed = moment().format(DATE_FORMAT);
     },
-    removeReq(state, event) {
+    removeReq(event) {
       const reqIndex =
-        state.roads[state.activeRoad].contents.coursesOfStudy.indexOf(event);
+        this.roads[this.activeRoad].contents.coursesOfStudy.indexOf(event);
       if (reqIndex === -1) {
         console.log(
           "Attempted to remove a requirement not in the requirements list.",
         );
       } else {
-        state.roads[state.activeRoad].contents.coursesOfStudy.splice(
-          reqIndex,
-          1,
-        );
-        state.roads[state.activeRoad].changed = moment().format(DATE_FORMAT);
-        state.fulfillmentNeeded = "none";
+        this.roads[this.activeRoad].contents.coursesOfStudy.splice(reqIndex, 1);
+        this.roads[this.activeRoad].changed = moment().format(DATE_FORMAT);
+        this.fulfillmentNeeded = "none";
       }
     },
-    removeProgressAssertion(state, uniqueKey) {
+    removeProgressAssertion(uniqueKey) {
       Vue.delete(
-        state.roads[state.activeRoad].contents.progressAssertions,
+        this.roads[this.activeRoad].contents.progressAssertions,
         uniqueKey,
       );
       Vue.set(
-        state.roads[state.activeRoad],
+        this.roads[this.activeRoad],
         "changed",
         moment().format(DATE_FORMAT),
       );
     },
-    resetID(state, { oldid, newid }) {
+    resetID({ oldid, newid }) {
       newid = newid.toString();
-      Vue.set(state.roads, newid, state.roads[oldid]);
-      if (state.activeRoad === oldid) {
-        state.activeRoad = newid;
+      Vue.set(this.roads, newid, this.roads[oldid]);
+      if (this.activeRoad === oldid) {
+        this.activeRoad = newid;
       }
-      Vue.delete(state.roads, oldid);
-      state.ignoreRoadChanges = true;
-      state.fulfillmentNeeded = "none";
-      const migrationIndex = state.roadsToMigrate.indexOf(oldid);
+      Vue.delete(this.roads, oldid);
+      this.ignoreRoadChanges = true;
+      this.fulfillmentNeeded = "none";
+      const migrationIndex = this.roadsToMigrate.indexOf(oldid);
       if (migrationIndex >= 0) {
-        state.roadsToMigrate.splice(migrationIndex, 1, newid);
+        this.roadsToMigrate.splice(migrationIndex, 1, newid);
       }
     },
-    setActiveRoad(state, activeRoad) {
-      state.activeRoad = activeRoad;
+    setActiveRoad(activeRoad) {
+      this.activeRoad = activeRoad;
     },
-    setFullSubjectsInfoLoaded(state, isFull) {
-      state.fullSubjectsInfoLoaded = isFull;
+    setFullSubjectsInfoLoaded(isFull) {
+      this.fullSubjectsInfoLoaded = isFull;
     },
-    setLoggedIn(state, newLoggedIn) {
-      state.loggedIn = newLoggedIn;
+    setLoggedIn(newLoggedIn) {
+      this.loggedIn = newLoggedIn;
     },
-    setHideIAP: (state, value) => {
-      state.hideIAP = value;
+    setHideIAP(value) {
+      this.hideIAP = value;
       localStorage.hideIAP = value;
     },
-    setRoadProp(state, { id, prop, value, ignoreSet }) {
+    setRoadProp({ id, prop, value, ignoreSet }) {
       if (ignoreSet) {
-        state.ignoreRoadChanges = true;
+        this.ignoreRoadChanges = true;
       }
       if (prop !== "contents") {
-        state.fulfillmentNeeded = "none";
+        this.fulfillmentNeeded = "none";
       }
-      Vue.set(state.roads[id], prop, value);
+      Vue.set(this.roads[id], prop, value);
     },
-    setRoad(state, { id, road, ignoreSet }) {
+    setRoad({ id, road, ignoreSet }) {
       if (ignoreSet) {
-        state.ignoreRoadChanges = true;
+        this.ignoreRoadChanges = true;
       }
-      if (state.activeRoad !== id) {
-        state.fulfillmentNeeded = "none";
+      if (this.activeRoad !== id) {
+        this.fulfillmentNeeded = "none";
       }
-      Vue.set(state.roads, id, road);
+      Vue.set(this.roads, id, road);
     },
-    setRoads(state, roads) {
-      state.roads = roads;
+    setRoads(roads) {
+      this.roads = roads;
     },
-    setRoadName(state, { id, name }) {
-      state.roads[id].name = name;
-      state.roads[id].changed = moment().format(DATE_FORMAT);
+    setRoadName({ id, name }) {
+      this.roads[id].name = name;
+      this.roads[id].changed = moment().format(DATE_FORMAT);
     },
-    setSubjectsInfo(state, data) {
-      state.subjectsInfo = data;
+    setSubjectsInfo(data) {
+      this.subjectsInfo = data;
     },
-    setCurrentSemester(state, sem) {
-      state.currentSemester = Math.max(1, sem);
+    setCurrentSemester(sem) {
+      this.currentSemester = Math.max(1, sem);
     },
-    updateProgress(state, progress) {
+    updateProgress(progress) {
       Vue.set(
-        state.roads[state.activeRoad].contents.progressOverrides,
+        this.roads[this.activeRoad].contents.progressOverrides,
         progress.listID,
         progress.progress,
       );
-      state.roads[state.activeRoad].changed = moment().format(DATE_FORMAT);
+      this.roads[this.activeRoad].changed = moment().format(DATE_FORMAT);
     },
-    setFromLocalStorage(state, localStore) {
-      store.replaceState(localStore);
+    setFromLocalStorage(localStore) {
+      this.$patch(localStore);
     },
-    updateRoad(state, id, road) {
-      Object.assign(state.roads[id], road);
+    updateRoad(id, road) {
+      Object.assign(this.roads[id], road);
     },
-    watchRoadChanges(state) {
-      state.ignoreRoadChanges = false;
+    watchRoadChanges() {
+      this.ignoreRoadChanges = false;
     },
     // Reset fulfillment needed to default of all
-    resetFulfillmentNeeded(state) {
-      state.fulfillmentNeeded = "all";
+    resetFulfillmentNeeded() {
+      this.fulfillmentNeeded = "all";
     },
-    setLoadSubjectsPromise(state, promise) {
-      state.loadSubjectsPromise = promise;
+    setLoadSubjectsPromise(promise) {
+      this.loadSubjectsPromise = promise;
     },
-    setSubjectsLoaded(state) {
-      state.subjectsLoaded = true;
+    setSubjectsLoaded() {
+      this.subjectsLoaded = true;
     },
-    queueRoadMigration(state, roadID) {
-      state.roadsToMigrate.push(roadID);
+    queueRoadMigration(roadID) {
+      this.roadsToMigrate.push(roadID);
     },
-    clearMigrationQueue(state) {
-      state.roadsToMigrate = [];
+    clearMigrationQueue() {
+      this.roadsToMigrate = [];
     },
-    changeTheme(state) {
-      state.isDarkMode = !state.isDarkMode;
+    changeTheme() {
+      this.isDarkMode = !this.isDarkMode;
     },
-  },
-  actions: {
-    async loadAllSubjects({ commit, state }) {
+    async loadAllSubjects() {
       const promise = axios.get(
         import.meta.env.VITE_FIREROAD_URL + "/courses/all?full=true",
       );
-      commit("setLoadSubjectsPromise", promise);
+      this.setLoadSubjectsPromise(promise);
       const response = await promise;
-      commit("setSubjectsLoaded");
-      commit("setSubjectsInfo", response.data);
-      commit("setFullSubjectsInfoLoaded", true);
-      commit("parseGenericCourses");
-      commit("parseGenericIndex");
-      commit("parseSubjectsIndex");
-      for (const roadID of state.roadsToMigrate) {
-        commit("migrateOldSubjects", roadID);
+      this.setSubjectsLoaded();
+      this.setSubjectsInfo(response.data);
+      this.setFullSubjectsInfoLoaded(true);
+      this.parseGenericCourses();
+      this.parseGenericIndex();
+      this.parseSubjectsIndex();
+      for (const roadID of this.roadsToMigrate) {
+        this.migrateOldSubjects(roadID);
       }
-      commit("clearMigrationQueue");
+      this.clearMigrationQueue();
     },
-    addAtPlaceholder({ commit, state }, index) {
+    addAtPlaceholder(index) {
       let newClass = {};
-      if (state.itemAdding.public === false) {
+      if (this.itemAdding.public === false) {
         // Adding custom class
         newClass = {
           overrideWarnings: false,
           semester: index,
-          title: state.itemAdding.title,
-          subject_id: state.itemAdding.subject_id,
-          units: state.itemAdding.total_units,
-          in_class_hours: state.itemAdding.in_class_hours,
-          out_of_class_hours: state.itemAdding.out_of_class_hours,
-          custom_color: state.itemAdding.custom_color,
+          title: this.itemAdding.title,
+          subject_id: this.itemAdding.subject_id,
+          units: this.itemAdding.total_units,
+          in_class_hours: this.itemAdding.in_class_hours,
+          out_of_class_hours: this.itemAdding.out_of_class_hours,
+          custom_color: this.itemAdding.custom_color,
           public: false,
         };
       } else {
@@ -526,74 +562,34 @@ const store = new Vuex.Store({
         newClass = {
           overrideWarnings: false,
           semester: index,
-          title: state.itemAdding.title,
-          subject_id: state.itemAdding.subject_id,
-          units: state.itemAdding.total_units,
+          title: this.itemAdding.title,
+          subject_id: this.itemAdding.subject_id,
+          units: this.itemAdding.total_units,
         };
       }
-      commit("addClass", newClass);
-      commit("cancelAddFromCard");
+      this.addClass(newClass);
+      this.cancelAddFromCard();
     },
-    async waitLoadSubjects({ dispatch, state }) {
-      if (state.loadSubjectsPromise !== undefined) {
-        return state.loadSubjectsPromise;
+    async waitLoadSubjects() {
+      if (this.loadSubjectsPromise !== undefined) {
+        return this.loadSubjectsPromise;
       } else {
-        return dispatch("loadAllSubjects");
+        return this.loadAllSubjects();
       }
     },
-    waitAndMigrateOldSubjects({ dispatch, commit, state }, roadID) {
-      if (state.subjectsLoaded) {
-        commit("migrateOldSubjects", roadID);
+    waitAndMigrateOldSubjects(roadID) {
+      if (this.subjectsLoaded) {
+        this.migrateOldSubjects(roadID);
       } else {
-        commit("queueRoadMigration", roadID);
-        dispatch("waitLoadSubjects");
+        this.queueRoadMigration(roadID);
+        this.waitLoadSubjects();
       }
     },
   },
 });
 
-function getMatchingAttributes(gir, hass, ci) {
-  const matchingClasses = store.state.subjectsInfo.filter(function (subject) {
-    if (gir !== undefined && subject.gir_attribute !== gir) {
-      return false;
-    }
-    if (hass !== undefined && subject.hass_attribute !== hass) {
-      return false;
-    }
-    return !(ci !== undefined && subject.communication_requirement !== ci);
-  });
-
-  const totalObject = matchingClasses.reduce(
-    function (accumObject, nextClass) {
-      return {
-        offered_spring: accumObject.offered_spring || nextClass.offered_spring,
-        offered_summer: accumObject.offered_summer || nextClass.offered_summer,
-        offered_IAP: accumObject.offered_IAP || nextClass.offered_IAP,
-        offered_fall: accumObject.offered_fall || nextClass.offered_fall,
-        in_class_hours:
-          accumObject.in_class_hours +
-          (nextClass.in_class_hours !== undefined
-            ? nextClass.in_class_hours
-            : 0),
-        out_of_class_hours:
-          accumObject.out_of_class_hours +
-          (nextClass.out_of_class_hours !== undefined
-            ? nextClass.out_of_class_hours
-            : 0),
-      };
-    },
-    {
-      offered_spring: false,
-      offered_summer: false,
-      offered_IAP: false,
-      offered_fall: false,
-      in_class_hours: 0,
-      out_of_class_hours: 0,
-    },
-  );
-  totalObject.in_class_hours /= matchingClasses.length;
-  totalObject.out_of_class_hours /= matchingClasses.length;
-  return totalObject;
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useCourseDataStore, import.meta.hot));
 }
 
-export default store;
+export default useCourseDataStore;
diff --git a/vite.config.ts b/vite.config.ts
index f2db5b58..cc168716 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,6 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue2";
-import path from "path";
+// import path from "path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -9,11 +9,11 @@ export default defineConfig({
   },
   plugins: [
     vue({
-      resolve: {
-        alias: {
-          "@": path.resolve(__dirname, "./src"),
-        },
-      },
+      // resolve: {
+      //   alias: {
+      //     "@": path.resolve(__dirname, "./src"),
+      //   },
+      // },
     }),
   ],
 });