refactor: migrate more components to setup script + fix a race condition with power search

packages/hoppscotch-app/components/lenses/HeadersRenderer.vue

@@ -69,28 +69,29 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import { ref, useContext } from "@nuxtjs/composition-api"
+import { HoppRESTHeader } from "~/helpers/types/HoppRESTRequest"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 
-export default defineComponent({
-  props: {
-    headers: { type: Array, default: () => [] },
-  },
-  data() {
-    return {
-      copyIcon: "copy",
-    }
-  },
-  methods: {
-    copyHeaders() {
-      copyToClipboard(JSON.stringify(this.headers))
-      this.copyIcon = "check"
-      this.$toast.success(this.$t("state.copied_to_clipboard"), {
-        icon: "content_paste",
-      })
-      setTimeout(() => (this.copyIcon = "copy"), 1000)
-    },
-  },
-})
+const {
+  $toast,
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
+
+const props = defineProps<{
+  headers: Array<HoppRESTHeader>
+}>()
+
+const copyIcon = ref("copy")
+
+const copyHeaders = () => {
+  copyToClipboard(JSON.stringify(props.headers))
+  copyIcon.value = "check"
+  $toast.success(t("state.copied_to_clipboard").toString(), {
+    icon: "content_paste",
+  })
+  setTimeout(() => (copyIcon.value = "copy"), 1000)
+}
 </script>