diff --git a/packages/hoppscotch-app/components/smart/Checkbox.vue b/packages/hoppscotch-app/components/smart/Checkbox.vue
index 88a7301ce..7a749d229 100644
--- a/packages/hoppscotch-app/components/smart/Checkbox.vue
+++ b/packages/hoppscotch-app/components/smart/Checkbox.vue
@@ -28,17 +28,15 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
-
-export default defineComponent({
-  props: {
-    on: {
-      type: Boolean,
-      default: false,
-    },
-  },
-})
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    on: Boolean
+  }>(),
+  {
+    on: false,
+  }
+)
 </script>
 
 <style scoped lang="scss">
diff --git a/packages/hoppscotch-app/components/smart/Toggle.vue b/packages/hoppscotch-app/components/smart/Toggle.vue
index f5de70ae8..15babc158 100644
--- a/packages/hoppscotch-app/components/smart/Toggle.vue
+++ b/packages/hoppscotch-app/components/smart/Toggle.vue
@@ -12,17 +12,15 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
-
-export default defineComponent({
-  props: {
-    on: {
-      type: Boolean,
-      default: false,
-    },
-  },
-})
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    on: Boolean
+  }>(),
+  {
+    on: false,
+  }
+)
 </script>
 
 <style scoped lang="scss">