Error using Rollup.js with Vue 3 and TypeScript: TS2345 - Argument not assignable to 'ComponentOptions', computed property types are incompatible

Question

I'm creating a component library for my project and decided to use the Rollup.js library. However, I'm facing some issues during the build process.

I've tried various configurations in both the rollup.config.js and tsconfig.json files to attempt to work around the issue, but it persists. All of my Vue components are using

Below, in the package.json file, I added the build command.

   {
 "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "build:rollup": "rollup -c",
    "preview": "vite preview"
  },
}

However, when I run this command, the following error occurs:

    src/main.ts → dist/bundle.js...
[!] (plugin rpt2) Error: src/main.ts:8:24 - error TS2345: Argument of type 'typeof import("C:/Users/user1/OneDrive/\u00C1folder/company/project-design-system/project.design-system.package/node_modules/vue/dist/vue")' is not assignable to parameter of type 'Component<any, any, any, ComputedOptions, MethodOptions, {}, any>'.
  Type 'typeof import("C:/Users/user1/OneDrive/\u00C1folder/company/project-design-system/project.design-system.package/node_modules/vue/dist/vue")' is not assignable to type 'ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, any>'.
    Type 'typeof import("C:/Users/user1/OneDrive/\u00C1folder/company/project-design-system/project.design-system.package/node_modules/vue/dist/vue")' is not assignable to type 'ComponentOptionsBase<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, any, {}, string, {}>'.
      Types of property 'computed' are incompatible.
        Type '{ <T>(getter: ComputedGetter<T>, debugOptions?: DebuggerOptions | undefined): ComputedRef<T>; <T>(options: WritableComputedOptions<T>, debugOptions?: DebuggerOptions | undefined): WritableComputedRef<...>; }' is not assignable to type 'ComputedOptions'.
          Index signature for type 'string' is missing in type '{ <T>(getter: ComputedGetter<T>, debugOptions?: DebuggerOptions | undefined): ComputedRef<T>; <T>(options: WritableComputedOptions<T>, debugOptions?: DebuggerOptions | undefined): WritableComputedRef<...>; }'.

8 const app = createApp( App );
                         ~~~

src/main.ts

I tried to configure my rollup.config and tsconfig.json as follows, but the error persists.

rollup.js

import typescript from 'rollup-plugin-typescript2';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/main.ts',
  output: {
    file: 'dist/bundle.js',
    format: 'esm',
    sourcemap: true,
  },
  plugins: [
    typescript( {
      tsconfig: 'tsconfig.json',
    } ),
    terser(),
  ],
};

tsconfig.json

{
  "compilerOptions": {
    "declaration": true,
    "outDir": "./dist",
    "allowJs": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "noImplicitAny": false,
    "target": "esnext",
    "downlevelIteration": true,
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "src/*": ["src/*"],
      "@/*": ["src/*"],
      "@/assets/icons/*": ["src/assets/icons/*"]
    },    
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "src/types/**/*.ts", 
    "tests/**/*.ts",
    "tests/**/*.tsx",
  ],
  "exclude": ["node_modules"],
  "external": ["vue"],
}