diff --git a/packages/hoppscotch-app/package.json b/packages/hoppscotch-app/package.json
index 6bc503fe6..e8fda461c 100644
--- a/packages/hoppscotch-app/package.json
+++ b/packages/hoppscotch-app/package.json
@@ -136,6 +136,7 @@
     "@types/splitpanes": "^2.2.1",
     "@types/uuid": "^8.3.3",
     "@urql/devtools": "^2.0.3",
+    "@vue/composition-api": "^1.4.1",
     "@vue/runtime-dom": "^3.2.26",
     "@vue/test-utils": "^1.3.0",
     "babel-core": "^7.0.0-bridge.0",
diff --git a/packages/hoppscotch-app/vue2-shim.d.ts b/packages/hoppscotch-app/vue2-shim.d.ts
new file mode 100644
index 000000000..43b634e13
--- /dev/null
+++ b/packages/hoppscotch-app/vue2-shim.d.ts
@@ -0,0 +1,11 @@
+// workaround for Volar to infer the ref type in <template>
+// https://github.com/johnsoncodehk/volar/issues/404
+declare module "@vue/runtime-dom" {
+  export * from "@vue/runtime-dom/dist/runtime-dom"
+  export {
+    defineComponent,
+    PropType,
+    ObjectDirective,
+    FunctionDirective,
+  } from "@vue/composition-api"
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ee5b8d5c6..59a08b9ee 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -105,6 +105,7 @@ importers:
       '@urql/devtools': ^2.0.3
       '@urql/exchange-auth': ^0.1.7
       '@urql/exchange-graphcache': ^4.3.6
+      '@vue/composition-api': ^1.4.1
       '@vue/runtime-dom': ^3.2.26
       '@vue/test-utils': ^1.3.0
       acorn: ^8.6.0
@@ -269,6 +270,7 @@ importers:
       '@types/splitpanes': 2.2.1
       '@types/uuid': 8.3.3
       '@urql/devtools': 2.0.3_@urql+core@2.3.6+graphql@15.7.2
+      '@vue/composition-api': 1.4.1
       '@vue/runtime-dom': 3.2.26
       '@vue/test-utils': 1.3.0
       babel-core: 7.0.0-bridge.0_@babel+core@7.16.5
@@ -5225,7 +5227,6 @@ packages:
       vue: '>= 2.5 < 3'
     dependencies:
       tslib: 2.3.1
-    dev: false
 
   /@vue/reactivity/3.2.26:
     resolution: {integrity: sha512-h38bxCZLW6oFJVDlCcAiUKFnXI8xP8d+eO0pcDxx+7dQfSPje2AO6M9S9QO6MrxQB7fGP0DH0dYQ8ksf6hrXKQ==}