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

The error seems to be related to the way you export and import default values in your code. According to some vite issues and discussions, you may encounter this error if you have multiple default exports in your module, or if you import a default export without braces. For example, if you have a file like this:

// file A.ts
export default class MyClass {
//Some code
} 

export default function MyFunction() {
// some code
}

And then you import it like this:

// file B.ts
import MyClass from './A.ts'

You may get the error A module cannot have multiple default exports.ts(2528), because you have two default exports in file A.ts, and you are not using braces to import the default export in file B.ts.