diff --git a/components/app/GitHubStarButton.vue b/components/app/GitHubStarButton.vue
index 75d02a7b8..6d299d5fb 100644
--- a/components/app/GitHubStarButton.vue
+++ b/components/app/GitHubStarButton.vue
@@ -19,9 +19,10 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import GithubButton from "vue-github-button"
 
-export default {
+export default defineComponent({
   components: {
     GithubButton,
   },
@@ -31,5 +32,5 @@ export default {
       default: undefined,
     },
   },
-}
+})
 </script>
diff --git a/components/app/Search.vue b/components/app/Search.vue
index 0b5f2d51b..60dafe5e0 100644
--- a/components/app/Search.vue
+++ b/components/app/Search.vue
@@ -75,10 +75,11 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { invokeAction } from "~/helpers/actions"
 import { spotlight } from "~/helpers/shortcuts"
 
-export default {
+export default defineComponent({
   props: {
     show: Boolean,
   },
@@ -107,7 +108,7 @@ export default {
       invokeAction(command, "path_from_invokeAction")
     },
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/app/Section.vue b/components/app/Section.vue
index a2694ca81..acebbb27f 100644
--- a/components/app/Section.vue
+++ b/components/app/Section.vue
@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     label: {
       type: String,
diff --git a/components/app/Share.vue b/components/app/Share.vue
index 89bd9a4b4..1fc86f343 100644
--- a/components/app/Share.vue
+++ b/components/app/Share.vue
@@ -35,8 +35,10 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
-export default {
+
+export default defineComponent({
   props: {
     show: Boolean,
   },
@@ -95,7 +97,7 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue
index 635952d4d..f3649d0d6 100644
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -81,9 +81,10 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import shortcuts from "~/helpers/shortcuts"
 
-export default {
+export default defineComponent({
   props: {
     show: Boolean,
   },
@@ -103,7 +104,7 @@ export default {
       this.$emit("close")
     },
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/app/SlideOver.vue b/components/app/SlideOver.vue
index d2c46bae2..07ce3e3d4 100644
--- a/components/app/SlideOver.vue
+++ b/components/app/SlideOver.vue
@@ -35,7 +35,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     show: {
       type: Boolean,
@@ -64,5 +66,5 @@ export default {
       this.$emit("close")
     },
   },
-}
+})
 </script>
diff --git a/components/app/Support.vue b/components/app/Support.vue
index 1123095cf..a517eaf2e 100644
--- a/components/app/Support.vue
+++ b/components/app/Support.vue
@@ -74,10 +74,11 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { invokeAction } from "~/helpers/actions"
 import { showChat } from "~/helpers/support"
 
-export default {
+export default defineComponent({
   props: {
     show: Boolean,
   },
@@ -92,5 +93,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>
diff --git a/components/collections/Add.vue b/components/collections/Add.vue
index 9fe0707e1..66bdc871c 100644
--- a/components/collections/Add.vue
+++ b/components/collections/Add.vue
@@ -32,7 +32,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     show: Boolean,
   },
@@ -57,5 +59,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>
diff --git a/components/collections/AddFolder.vue b/components/collections/AddFolder.vue
index 7288d4b02..a093e5fe6 100644
--- a/components/collections/AddFolder.vue
+++ b/components/collections/AddFolder.vue
@@ -33,7 +33,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     show: Boolean,
     folder: { type: Object, default: () => {} },
@@ -65,5 +67,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>
diff --git a/components/collections/Edit.vue b/components/collections/Edit.vue
index 7cd0b0b53..fedf56d41 100644
--- a/components/collections/Edit.vue
+++ b/components/collections/Edit.vue
@@ -32,7 +32,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     show: Boolean,
     placeholderCollName: { type: String, default: null },
@@ -58,5 +60,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>
diff --git a/components/collections/EditFolder.vue b/components/collections/EditFolder.vue
index 0f32e1b3c..96409cb1b 100644
--- a/components/collections/EditFolder.vue
+++ b/components/collections/EditFolder.vue
@@ -33,7 +33,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     show: Boolean,
   },
@@ -58,5 +60,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>
diff --git a/components/collections/EditRequest.vue b/components/collections/EditRequest.vue
index ea13e7f4f..7f82aac3b 100644
--- a/components/collections/EditRequest.vue
+++ b/components/collections/EditRequest.vue
@@ -29,7 +29,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     show: Boolean,
     placeholderReqName: { type: String, default: null },
@@ -57,5 +59,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>
diff --git a/components/collections/graphql/Add.vue b/components/collections/graphql/Add.vue
index 07801de8f..2c6f74fbd 100644
--- a/components/collections/graphql/Add.vue
+++ b/components/collections/graphql/Add.vue
@@ -32,10 +32,10 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 import { addGraphqlCollection } from "~/newstore/collections"
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     show: Boolean,
   },
diff --git a/components/collections/graphql/AddFolder.vue b/components/collections/graphql/AddFolder.vue
index f8ace472a..5982c6d2e 100644
--- a/components/collections/graphql/AddFolder.vue
+++ b/components/collections/graphql/AddFolder.vue
@@ -33,9 +33,9 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     show: Boolean,
     folderPath: { type: String, default: null },
diff --git a/components/collections/graphql/Collection.vue b/components/collections/graphql/Collection.vue
index 1393a70d9..81d89eb6d 100644
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -153,13 +153,13 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 import {
   removeGraphqlCollection,
   moveGraphqlRequest,
 } from "~/newstore/collections"
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     picked: { type: Object, default: null },
     // Whether the viewing context is related to picking (activates 'select' events)
diff --git a/components/collections/graphql/Edit.vue b/components/collections/graphql/Edit.vue
index c3242a346..eb84632b6 100644
--- a/components/collections/graphql/Edit.vue
+++ b/components/collections/graphql/Edit.vue
@@ -32,10 +32,10 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 import { editGraphqlCollection } from "~/newstore/collections"
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     show: Boolean,
     editingCollection: { type: Object, default: () => {} },
@@ -55,7 +55,7 @@ export default Vue.extend({
         return
       }
       const collectionUpdated = {
-        ...this.$props.editingCollection,
+        ...(this.editingCollection as any),
         name: this.name,
       }
 
diff --git a/components/collections/graphql/EditFolder.vue b/components/collections/graphql/EditFolder.vue
index ca8df47e4..4f1284d20 100644
--- a/components/collections/graphql/EditFolder.vue
+++ b/components/collections/graphql/EditFolder.vue
@@ -33,10 +33,10 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 import { editGraphqlFolder } from "~/newstore/collections"
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     show: Boolean,
     folder: { type: Object, default: () => {} },
@@ -44,7 +44,7 @@ export default Vue.extend({
   },
   data() {
     return {
-      name: null,
+      name: "",
     }
   },
   methods: {
@@ -55,11 +55,14 @@ export default Vue.extend({
         })
         return
       }
-      editGraphqlFolder(this.folderPath, { ...this.folder, name: this.name })
+      editGraphqlFolder(this.folderPath, {
+        ...(this.folder as any),
+        name: this.name,
+      })
       this.hideModal()
     },
     hideModal() {
-      this.name = null
+      this.name = ""
       this.$emit("hide-modal")
     },
   },
diff --git a/components/collections/graphql/EditRequest.vue b/components/collections/graphql/EditRequest.vue
index f93bb1094..84956428d 100644
--- a/components/collections/graphql/EditRequest.vue
+++ b/components/collections/graphql/EditRequest.vue
@@ -29,10 +29,10 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 import { editGraphqlRequest } from "~/newstore/collections"
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     show: Boolean,
     folderPath: { type: String, default: null },
diff --git a/components/collections/graphql/Folder.vue b/components/collections/graphql/Folder.vue
index e00632709..2efa51d5c 100644
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -152,10 +152,10 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 import { removeGraphqlFolder, moveGraphqlRequest } from "~/newstore/collections"
 
-export default Vue.extend({
+export default defineComponent({
   name: "Folder",
   props: {
     picked: { type: Object, default: null },
diff --git a/components/collections/graphql/Request.vue b/components/collections/graphql/Request.vue
index a736eacf2..25e557a56 100644
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -97,11 +97,11 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 import { removeGraphqlRequest } from "~/newstore/collections"
 import { setGQLSession } from "~/newstore/GQLSession"
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     // Whether the object is selected (show the tick mark)
     picked: { type: Object, default: null },
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 1e868591d..5b64fb2a5 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -181,6 +181,8 @@
 import gql from "graphql-tag"
 import cloneDeep from "lodash/cloneDeep"
 import { defineComponent } from "@nuxtjs/composition-api"
+import CollectionsMyCollection from "./my/Collection.vue"
+import CollectionsTeamsCollection from "./teams/Collection.vue"
 import { currentUser$ } from "~/helpers/fb/auth"
 import TeamCollectionAdapter from "~/helpers/teams/TeamCollectionAdapter"
 import * as teamUtils from "~/helpers/teams/utils"
@@ -200,6 +202,10 @@ import {
 } from "~/helpers/utils/composables"
 
 export default defineComponent({
+  components: {
+    CollectionsMyCollection,
+    CollectionsTeamsCollection,
+  },
   props: {
     doc: Boolean,
     selected: { type: Array, default: () => [] },
diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue
index b8af7928f..595ca329c 100644
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -178,9 +178,10 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { moveRESTRequest } from "~/newstore/collections"
 
-export default {
+export default defineComponent({
   props: {
     collectionIndex: { type: Number, default: null },
     collection: { type: Object, default: () => {} },
@@ -247,5 +248,5 @@ export default {
       moveRESTRequest(folderPath, requestIndex, this.collectionIndex.toString())
     },
   },
-}
+})
 </script>
diff --git a/components/collections/my/Folder.vue b/components/collections/my/Folder.vue
index 2548f75ca..1fe472aaa 100644
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -161,13 +161,14 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import {
   removeRESTFolder,
   removeRESTRequest,
   moveRESTRequest,
 } from "~/newstore/collections"
 
-export default {
+export default defineComponent({
   name: "Folder",
   props: {
     folder: { type: Object, default: () => {} },
@@ -252,5 +253,5 @@ export default {
       removeRESTRequest(this.folderPath, requestIndex)
     },
   },
-}
+})
 </script>
diff --git a/components/collections/teams/Collection.vue b/components/collections/teams/Collection.vue
index 5a0655a42..33e5969d3 100644
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -107,7 +107,7 @@
     <div v-if="showChildren || isFiltered">
       <CollectionsTeamsFolder
         v-for="(folder, index) in collection.children"
-        :key="`folder-${folder}`"
+        :key="`folder-${index}`"
         class="border-l border-dividerLight ml-6"
         :folder="folder"
         :folder-index="index"
@@ -174,7 +174,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     collectionIndex: { type: Number, default: null },
     collection: { type: Object, default: () => {} },
@@ -251,5 +253,5 @@ export default {
       })
     },
   },
-}
+})
 </script>
diff --git a/components/collections/teams/Folder.vue b/components/collections/teams/Folder.vue
index bb926c67a..8ddb47ce5 100644
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -156,9 +156,10 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import * as teamUtils from "~/helpers/teams/utils"
 
-export default {
+export default defineComponent({
   name: "Folder",
   props: {
     folder: { type: Object, default: () => {} },
@@ -246,5 +247,5 @@ export default {
       })
     },
   },
-}
+})
 </script>
diff --git a/components/docs/Collection.vue b/components/docs/Collection.vue
index 8885e6711..46fdb57bf 100644
--- a/components/docs/Collection.vue
+++ b/components/docs/Collection.vue
@@ -21,11 +21,13 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     collection: { type: Object, default: () => {} },
   },
-}
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/components/docs/Folder.vue b/components/docs/Folder.vue
index b2f1b6143..6462a4714 100644
--- a/components/docs/Folder.vue
+++ b/components/docs/Folder.vue
@@ -17,11 +17,13 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     folder: { type: Object, default: () => {} },
   },
-}
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/components/docs/Request.vue b/components/docs/Request.vue
index 0c46e1cf6..a28b0d955 100644
--- a/components/docs/Request.vue
+++ b/components/docs/Request.vue
@@ -111,11 +111,13 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     request: { type: Object, default: () => {} },
   },
-}
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/components/environments/Add.vue b/components/environments/Add.vue
index ba21f1afa..989709afb 100644
--- a/components/environments/Add.vue
+++ b/components/environments/Add.vue
@@ -32,10 +32,10 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 import { createEnvironment } from "~/newstore/environments"
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     show: Boolean,
   },
diff --git a/components/environments/Environment.vue b/components/environments/Environment.vue
index b355b0280..b6cb2c840 100644
--- a/components/environments/Environment.vue
+++ b/components/environments/Environment.vue
@@ -61,11 +61,10 @@
 </template>
 
 <script lang="ts">
-import { PropType } from "@nuxtjs/composition-api"
-import Vue from "vue"
+import { defineComponent, PropType } from "@nuxtjs/composition-api"
 import { deleteEnvironment } from "~/newstore/environments"
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     environment: { type: Object, default: () => {} },
     environmentIndex: {
diff --git a/components/firebase/Login.vue b/components/firebase/Login.vue
index d16ccc791..5323a1f49 100644
--- a/components/firebase/Login.vue
+++ b/components/firebase/Login.vue
@@ -119,6 +119,7 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { applySetting } from "~/newstore/settings"
 import {
   signInUserWithGoogle,
@@ -132,7 +133,7 @@ import {
 import { setLocalConfig } from "~/newstore/localpersistence"
 import { useStreamSubscriber } from "~/helpers/utils/composables"
 
-export default {
+export default defineComponent({
   props: {
     show: Boolean,
   },
@@ -358,5 +359,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>
diff --git a/components/firebase/Logout.vue b/components/firebase/Logout.vue
index 641ac568c..cef28f798 100644
--- a/components/firebase/Logout.vue
+++ b/components/firebase/Logout.vue
@@ -18,10 +18,10 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 import { signOutUser } from "~/helpers/fb/auth"
 
-export default Vue.extend({
+export default defineComponent({
   data() {
     return {
       confirmLogout: false,
diff --git a/components/graphql/Field.vue b/components/graphql/Field.vue
index eadcbd4eb..55c8268a6 100644
--- a/components/graphql/Field.vue
+++ b/components/graphql/Field.vue
@@ -64,7 +64,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     gqlField: { type: Object, default: () => {} },
     jumpTypeCallback: { type: Function, default: () => {} },
@@ -79,7 +81,7 @@ export default {
       return this.gqlField.args || []
     },
   },
-}
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/components/graphql/QueryEditor.vue b/components/graphql/QueryEditor.vue
index 438b5ae2a..b48aa743a 100644
--- a/components/graphql/QueryEditor.vue
+++ b/components/graphql/QueryEditor.vue
@@ -11,10 +11,11 @@ import "ace-builds/src-noconflict/ext-language_tools"
 import "ace-builds/src-noconflict/mode-graphqlschema"
 import * as gql from "graphql"
 import { getAutocompleteSuggestions } from "graphql-language-service-interface"
+import { defineComponent } from "@nuxtjs/composition-api"
 import { defineGQLLanguageMode } from "~/helpers/syntax/gqlQueryLangMode"
 import debounce from "~/helpers/utils/debounce"
 
-export default {
+export default defineComponent({
   props: {
     value: {
       type: String,
@@ -237,7 +238,7 @@ export default {
       }
     }, 2000),
   },
-}
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/components/graphql/Type.vue b/components/graphql/Type.vue
index d23ebfba1..910d39752 100644
--- a/components/graphql/Type.vue
+++ b/components/graphql/Type.vue
@@ -56,13 +56,14 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import {
   GraphQLEnumType,
   GraphQLInputObjectType,
   GraphQLInterfaceType,
 } from "graphql"
 
-export default {
+export default defineComponent({
   props: {
     // eslint-disable-next-line vue/require-default-prop, vue/require-prop-types
     gqlType: {},
@@ -96,7 +97,7 @@ export default {
       return !!this.highlightedFields.find(({ name }) => name === field.name)
     },
   },
-}
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/components/graphql/TypeLink.vue b/components/graphql/TypeLink.vue
index 4e9dab2ce..6c0c39d2b 100644
--- a/components/graphql/TypeLink.vue
+++ b/components/graphql/TypeLink.vue
@@ -8,9 +8,10 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { GraphQLScalarType } from "graphql"
 
-export default {
+export default defineComponent({
   props: {
     // eslint-disable-next-line vue/require-default-prop
     gqlType: null,
@@ -39,5 +40,5 @@ export default {
       return t
     },
   },
-}
+})
 </script>
diff --git a/components/http/ResponseMeta.vue b/components/http/ResponseMeta.vue
index 0801d3892..cffc606ee 100644
--- a/components/http/ResponseMeta.vue
+++ b/components/http/ResponseMeta.vue
@@ -103,10 +103,11 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import findStatusGroup from "~/helpers/findStatusGroup"
 import { getPlatformSpecialKey } from "~/helpers/platformutils"
 
-export default {
+export default defineComponent({
   props: {
     response: {
       type: Object,
@@ -121,7 +122,7 @@ export default {
   methods: {
     getSpecialKey: getPlatformSpecialKey,
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/landing/CTA.vue b/components/landing/CTA.vue
index a98de4bde..bba23b1c0 100644
--- a/components/landing/CTA.vue
+++ b/components/landing/CTA.vue
@@ -37,7 +37,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   data() {
     return {
       ctas: [
@@ -74,5 +76,5 @@ export default {
       ],
     }
   },
-}
+})
 </script>
diff --git a/components/landing/Features.vue b/components/landing/Features.vue
index d422531d0..e42f302af 100644
--- a/components/landing/Features.vue
+++ b/components/landing/Features.vue
@@ -30,7 +30,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   data() {
     return {
       features: [
@@ -79,5 +81,5 @@ export default {
       ],
     }
   },
-}
+})
 </script>
diff --git a/components/landing/Footer.vue b/components/landing/Footer.vue
index 06821208f..d380f29a8 100644
--- a/components/landing/Footer.vue
+++ b/components/landing/Footer.vue
@@ -62,7 +62,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   data() {
     return {
       navigation: {
@@ -151,7 +153,7 @@ export default {
       },
     }
   },
-}
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/components/landing/Hero.vue b/components/landing/Hero.vue
index 435bf8645..67c527895 100644
--- a/components/landing/Hero.vue
+++ b/components/landing/Hero.vue
@@ -59,11 +59,13 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   data() {
     return {
       showLogin: false,
     }
   },
-}
+})
 </script>
diff --git a/components/landing/Stats.vue b/components/landing/Stats.vue
index ed604e167..25d845be3 100644
--- a/components/landing/Stats.vue
+++ b/components/landing/Stats.vue
@@ -13,7 +13,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   data() {
     return {
       stats: [
@@ -23,5 +25,5 @@ export default {
       ],
     }
   },
-}
+})
 </script>
diff --git a/components/landing/Users.vue b/components/landing/Users.vue
index 0ecb420ad..8b8f3dfec 100644
--- a/components/landing/Users.vue
+++ b/components/landing/Users.vue
@@ -21,7 +21,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   data() {
     return {
       users: [
@@ -40,5 +42,5 @@ export default {
       ],
     }
   },
-}
+})
 </script>
diff --git a/components/lenses/HeadersRenderer.vue b/components/lenses/HeadersRenderer.vue
index 24437be2e..3cef24e98 100644
--- a/components/lenses/HeadersRenderer.vue
+++ b/components/lenses/HeadersRenderer.vue
@@ -70,9 +70,10 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 
-export default {
+export default defineComponent({
   props: {
     headers: { type: Array, default: () => [] },
   },
@@ -91,5 +92,5 @@ export default {
       setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },
   },
-}
+})
 </script>
diff --git a/components/lenses/ResponseBodyRenderer.vue b/components/lenses/ResponseBodyRenderer.vue
index 679b58408..36432fc1b 100644
--- a/components/lenses/ResponseBodyRenderer.vue
+++ b/components/lenses/ResponseBodyRenderer.vue
@@ -24,9 +24,10 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { getSuitableLenses, getLensRenderers } from "~/helpers/lenses/lenses"
 
-export default {
+export default defineComponent({
   components: {
     // Lens Renderers
     ...getLensRenderers(),
@@ -46,5 +47,5 @@ export default {
       return getSuitableLenses(this.response)
     },
   },
-}
+})
 </script>
diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index f30f151d3..db26e3750 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -69,10 +69,11 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 
-export default {
+export default defineComponent({
   mixins: [TextContentRendererMixin],
   props: {
     response: { type: Object, default: () => {} },
@@ -136,7 +137,7 @@ export default {
       }
     },
   },
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/lenses/renderers/ImageLensRenderer.vue b/components/lenses/renderers/ImageLensRenderer.vue
index ab6f759d2..874c83261 100644
--- a/components/lenses/renderers/ImageLensRenderer.vue
+++ b/components/lenses/renderers/ImageLensRenderer.vue
@@ -37,7 +37,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     response: { type: Object, default: () => {} },
   },
@@ -111,5 +113,5 @@ export default {
       }, 1000)
     },
   },
-}
+})
 </script>
diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index 5aca7dc53..2851b55e1 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -55,10 +55,11 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 
-export default {
+export default defineComponent({
   mixins: [TextContentRendererMixin],
   props: {
     response: { type: Object, default: () => {} },
@@ -118,5 +119,5 @@ export default {
       setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },
   },
-}
+})
 </script>
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index 20bde60c5..a8e0c73ea 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -54,10 +54,11 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 
-export default {
+export default defineComponent({
   mixins: [TextContentRendererMixin],
   props: {
     response: { type: Object, default: () => {} },
@@ -110,5 +111,5 @@ export default {
       setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },
   },
-}
+})
 </script>
diff --git a/components/lenses/renderers/XMLLensRenderer.vue b/components/lenses/renderers/XMLLensRenderer.vue
index 7f8ebb392..3aa9fd7fe 100644
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -54,10 +54,11 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 
-export default {
+export default defineComponent({
   mixins: [TextContentRendererMixin],
   props: {
     response: { type: Object, default: () => {} },
@@ -109,5 +110,5 @@ export default {
       setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },
   },
-}
+})
 </script>
diff --git a/components/profile/Picture.vue b/components/profile/Picture.vue
index 92b31579b..9c523b71d 100644
--- a/components/profile/Picture.vue
+++ b/components/profile/Picture.vue
@@ -33,7 +33,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     url: {
       type: String,
@@ -54,5 +56,5 @@ export default {
       default: "bg-green-500",
     },
   },
-}
+})
 </script>
diff --git a/components/realtime/Log.vue b/components/realtime/Log.vue
index eb475071c..c4e899d58 100644
--- a/components/realtime/Log.vue
+++ b/components/realtime/Log.vue
@@ -33,9 +33,10 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { getSourcePrefix } from "~/helpers/utils/string"
 
-export default {
+export default defineComponent({
   props: {
     log: { type: Array, default: () => [] },
     title: {
@@ -53,7 +54,7 @@ export default {
   methods: {
     getSourcePrefix,
   },
-}
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/components/realtime/Sse.vue b/components/realtime/Sse.vue
index 1f640ed5a..d99f0e618 100644
--- a/components/realtime/Sse.vue
+++ b/components/realtime/Sse.vue
@@ -85,12 +85,13 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import debounce from "~/helpers/utils/debounce"
 
-export default {
+export default defineComponent({
   components: { Splitpanes, Pane },
   data() {
     return {
@@ -232,5 +233,5 @@ export default {
       this.sse.onclose()
     },
   },
-}
+})
 </script>
diff --git a/components/smart/AceEditor.vue b/components/smart/AceEditor.vue
index 7b57ee27a..299c0f7f6 100644
--- a/components/smart/AceEditor.vue
+++ b/components/smart/AceEditor.vue
@@ -57,11 +57,12 @@
 <script>
 import ace from "ace-builds"
 import "ace-builds/webpack-resolver"
+import { defineComponent } from "@nuxtjs/composition-api"
 import jsonParse from "~/helpers/jsonParse"
 import debounce from "~/helpers/utils/debounce"
 import outline from "~/helpers/outline"
 
-export default {
+export default defineComponent({
   props: {
     provideOutline: {
       type: Boolean,
@@ -265,7 +266,7 @@ export default {
       }
     }),
   },
-}
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/components/smart/Anchor.vue b/components/smart/Anchor.vue
index 431bf3854..90542c029 100644
--- a/components/smart/Anchor.vue
+++ b/components/smart/Anchor.vue
@@ -31,7 +31,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     to: {
       type: String,
@@ -70,5 +72,5 @@ export default {
       default: false,
     },
   },
-}
+})
 </script>
diff --git a/components/smart/AutoComplete.vue b/components/smart/AutoComplete.vue
index fdc27bdcc..f3dea5409 100644
--- a/components/smart/AutoComplete.vue
+++ b/components/smart/AutoComplete.vue
@@ -33,7 +33,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     spellcheck: {
       type: Boolean,
@@ -181,7 +183,7 @@ export default {
       }
     },
   },
-}
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/components/smart/ConfirmModal.vue b/components/smart/ConfirmModal.vue
index b6206bf25..4b9f0f0db 100644
--- a/components/smart/ConfirmModal.vue
+++ b/components/smart/ConfirmModal.vue
@@ -17,7 +17,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     show: Boolean,
     title: { type: String, default: null },
@@ -43,5 +45,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>
diff --git a/components/smart/Icon.vue b/components/smart/Icon.vue
index 17464dabd..26335df8d 100644
--- a/components/smart/Icon.vue
+++ b/components/smart/Icon.vue
@@ -3,7 +3,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     name: {
       type: String,
@@ -15,5 +17,5 @@ export default {
       return require(`~/assets/icons/${this.name}.svg?inline`)
     },
   },
-}
+})
 </script>
diff --git a/components/smart/Intersection.vue b/components/smart/Intersection.vue
index b28909af5..a7a4e3ad3 100644
--- a/components/smart/Intersection.vue
+++ b/components/smart/Intersection.vue
@@ -12,9 +12,9 @@
   ------
   intersecting (entry: IntersectionObserverEntry) -> When the component is intersecting the viewport
 */
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 
-export default Vue.extend({
+export default defineComponent({
   data() {
     return {
       observer: null as IntersectionObserver | null,
diff --git a/components/smart/Item.vue b/components/smart/Item.vue
index a86c89fc1..9d2a6c14f 100644
--- a/components/smart/Item.vue
+++ b/components/smart/Item.vue
@@ -76,7 +76,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     to: {
       type: String,
@@ -135,5 +137,5 @@ export default {
       default: "",
     },
   },
-}
+})
 </script>
diff --git a/components/smart/JsEditor.vue b/components/smart/JsEditor.vue
index 2f7ea4239..f78102525 100644
--- a/components/smart/JsEditor.vue
+++ b/components/smart/JsEditor.vue
@@ -10,6 +10,7 @@ import "ace-builds/webpack-resolver"
 import "ace-builds/src-noconflict/ext-language_tools"
 import "ace-builds/src-noconflict/mode-graphqlschema"
 import * as esprima from "esprima"
+import { defineComponent } from "@nuxtjs/composition-api"
 import debounce from "~/helpers/utils/debounce"
 import {
   getPreRequestScriptCompletions,
@@ -18,7 +19,7 @@ import {
   performTestLinting,
 } from "~/helpers/tern"
 
-export default {
+export default defineComponent({
   props: {
     value: {
       type: String,
@@ -275,7 +276,7 @@ export default {
         })
     }, 2000),
   },
-}
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/components/smart/ProgressRing.vue b/components/smart/ProgressRing.vue
index 1667b0a4a..248f20cc8 100644
--- a/components/smart/ProgressRing.vue
+++ b/components/smart/ProgressRing.vue
@@ -22,7 +22,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     radius: {
       type: Number,
@@ -51,5 +53,5 @@ export default {
       return this.circumference - (this.progress / 100) * this.circumference
     },
   },
-}
+})
 </script>
diff --git a/components/smart/Tab.vue b/components/smart/Tab.vue
index f62a58b5e..e0f44b051 100644
--- a/components/smart/Tab.vue
+++ b/components/smart/Tab.vue
@@ -5,7 +5,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     label: { type: String, default: null },
     info: { type: String, default: null },
@@ -26,5 +28,5 @@ export default {
   mounted() {
     this.active = this.selected
   },
-}
+})
 </script>
diff --git a/components/smart/Tabs.vue b/components/smart/Tabs.vue
index dfe61e697..25d1b4ca8 100644
--- a/components/smart/Tabs.vue
+++ b/components/smart/Tabs.vue
@@ -33,7 +33,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     styles: {
       type: String,
@@ -59,7 +61,7 @@ export default {
       this.$emit("tab-changed", id)
     },
   },
-}
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/components/smart/Toggle.vue b/components/smart/Toggle.vue
index c09620ff7..202aa02d9 100644
--- a/components/smart/Toggle.vue
+++ b/components/smart/Toggle.vue
@@ -13,14 +13,16 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     on: {
       type: Boolean,
       default: false,
     },
   },
-}
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/components/tab/Primary.vue b/components/tab/Primary.vue
index 1ce38bbdd..756b23395 100644
--- a/components/tab/Primary.vue
+++ b/components/tab/Primary.vue
@@ -39,7 +39,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     to: {
       type: String,
@@ -78,5 +80,5 @@ export default {
       default: false,
     },
   },
-}
+})
 </script>
diff --git a/components/tab/Secondary.vue b/components/tab/Secondary.vue
index d4ae4071e..4f28e281f 100644
--- a/components/tab/Secondary.vue
+++ b/components/tab/Secondary.vue
@@ -48,7 +48,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     to: {
       type: String,
@@ -87,5 +89,5 @@ export default {
       default: false,
     },
   },
-}
+})
 </script>
diff --git a/components/teams/Add.vue b/components/teams/Add.vue
index c394fb282..d0de68a6e 100644
--- a/components/teams/Add.vue
+++ b/components/teams/Add.vue
@@ -29,9 +29,10 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import * as teamUtils from "~/helpers/teams/utils"
 
-export default {
+export default defineComponent({
   props: {
     show: Boolean,
   },
@@ -76,5 +77,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>
diff --git a/components/teams/Team.vue b/components/teams/Team.vue
index 353f55f7a..db45eb45a 100644
--- a/components/teams/Team.vue
+++ b/components/teams/Team.vue
@@ -64,9 +64,10 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import * as teamUtils from "~/helpers/teams/utils"
 
-export default {
+export default defineComponent({
   props: {
     team: { type: Object, default: () => {} },
     teamID: { type: String, default: null },
@@ -106,5 +107,5 @@ export default {
         })
     },
   },
-}
+})
 </script>
diff --git a/helpers/fb/history.ts b/helpers/fb/history.ts
index 6ba217f8d..b19f364b6 100644
--- a/helpers/fb/history.ts
+++ b/helpers/fb/history.ts
@@ -5,9 +5,11 @@ import { settingsStore } from "~/newstore/settings"
 import {
   graphqlHistoryStore,
   HISTORY_LIMIT,
+  RESTHistoryEntry,
   restHistoryStore,
   setGraphqlHistoryEntries,
   setRESTHistoryEntries,
+  translateToNewRESTHistory,
 } from "~/newstore/history"
 
 type HistoryFBCollections = "history" | "graphqlHistory"
@@ -167,12 +169,12 @@ export function initHistory() {
         .orderBy("updatedOn", "desc")
         .limit(HISTORY_LIMIT)
         .onSnapshot((historyRef) => {
-          const history: any[] = []
+          const history: RESTHistoryEntry[] = []
 
           historyRef.forEach((doc) => {
             const entry = doc.data()
             entry.id = doc.id
-            history.push(entry)
+            history.push(translateToNewRESTHistory(entry))
           })
 
           loadedRESTHistory = false
diff --git a/helpers/types/HoppRESTRequest.ts b/helpers/types/HoppRESTRequest.ts
index b2338d6f2..e1f55eefb 100644
--- a/helpers/types/HoppRESTRequest.ts
+++ b/helpers/types/HoppRESTRequest.ts
@@ -33,6 +33,7 @@ export type HoppRESTReqBody =
   | HoppRESTReqBodyFormData
   | {
       contentType: null
+      body: null
     }
 
 export interface HoppRESTRequest {
diff --git a/layouts/error.vue b/layouts/error.vue
index 8861efbd2..6df2acca5 100644
--- a/layouts/error.vue
+++ b/layouts/error.vue
@@ -6,7 +6,7 @@
       <ButtonSecondary to="/" icon="home" outline :label="$t('app.home')" />
       <ButtonSecondary
         icon="refresh"
-        :label="$t('reload')"
+        :label="$t('app.reload')"
         outline
         @click.native="reloadApplication"
       />
@@ -15,9 +15,10 @@
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import { initializeFirebase } from "~/helpers/fb"
 
-export default {
+export default defineComponent({
   props: {
     error: {
       type: Object,
@@ -43,7 +44,7 @@ export default {
       window.location.reload()
     },
   },
-}
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/newstore/RESTSession.ts b/newstore/RESTSession.ts
index c974bb8c2..4de60ab08 100644
--- a/newstore/RESTSession.ts
+++ b/newstore/RESTSession.ts
@@ -38,6 +38,7 @@ export const defaultRESTRequest: HoppRESTRequest = {
   testScript: "",
   body: {
     contentType: null,
+    body: null,
   },
 }
 
@@ -224,8 +225,8 @@ const dispatchers = defineDispatchers({
               contentType: newContentType,
               body:
                 newContentType === null
-                  ? undefined
-                  : (curr.request.body as any).body,
+                  ? null
+                  : (curr.request.body as any)?.body ?? "",
             },
           },
         }
diff --git a/pages/enter.vue b/pages/enter.vue
index 22c003340..850dd7cb4 100644
--- a/pages/enter.vue
+++ b/pages/enter.vue
@@ -11,12 +11,12 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 import { initializeFirebase } from "~/helpers/fb"
 import { isSignInWithEmailLink, signInWithEmailLink } from "~/helpers/fb/auth"
 import { getLocalConfig, removeLocalConfig } from "~/newstore/localpersistence"
 
-export default Vue.extend({
+export default defineComponent({
   layout: "empty",
   data() {
     return {
diff --git a/pages/realtime.vue b/pages/realtime.vue
index e8b8c55eb..2b386c7bd 100644
--- a/pages/realtime.vue
+++ b/pages/realtime.vue
@@ -36,11 +36,13 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   head() {
     return {
       title: `${this.$t("navigation.realtime")} • Hoppscotch`,
     }
   },
-}
+})
 </script>