Multiple Default Exports error for Vue+Vite

I am working with Vue and using Vite and typescript. I have come across this problem that i get this error that says ```A module cannot have multiple default exports.ts(2528)``.

<script setup lang="ts">
import { defineCustomElements } from "@esri/calcite-components/dist/loader";
import Search from "@arcgis/core/widgets/Search";

defineCustomElements();

export default {
  mounted() {
    const search = new Search({
      container: this.$refs.search as HTMLElement,
    });
  },
};
</script>

<template>
  <div class="search-container" ref="search"></div>
</template>

<style scoped>
.search-container {
  width: 100%;
}
</style>

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import copy from "rollup-plugin-copy";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    copy({
      // copy over the arcgis cores assets
      targets: [
        {
          src: "node_modules/@arcgis/core/assets/",
          dest: "public/",
        },
      ],
    }),
  ],
});

How can i correctly use the export default in my vue code? a simple example other than my code which works for vue+vite+typescript would also be helpful for my udnerstanding

I have also tried using a keyword for my export but that also did not work. I also tried restarting and dsiabling the typescript servcie in my VScode. Here is my vue code and the config ts file.

If you use <script setup> you don't need to export it. because It is already exported by vue3. just remove the export default {} and try

  onMounted(() => {
    // your code here
  });

Reference doc: https://vuejs.org/api/composition-api-lifecycle.html#onmounted