How to configure vue application properly to use decorator pattern?

Question

I'm trying to use a decorator pattern for convenience in Vue.

Here is my babel.config.cjs:

module.exports = {
    presets: ["@babel/preset-env"],
    plugins: [
        ["@babel/plugin-proposal-decorators", { version: "legacy" }],
        ["@babel/plugin-proposal-class-properties", { loose: true }]
    ]
};

And here is the vite.config.ts:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'
import babel from 'vite-plugin-babel';

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    vueDevTools(),
    babel({
      babelConfig: {
        babelrc: false,
        configFile: false,
        presets: [
          ["@babel/preset-env", { loose: true }],
        ],
        plugins: [
          ["@babel/plugin-proposal-decorators", { version: "legacy" }],
          ["@babel/plugin-proposal-class-properties", { loose: true }],
        ],
      },
    }),

  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

After configuring all these, when I try to do this inside a IDBOperations.ts file:

import { DataClass, KeyPath } from 'idb-ts/lib';

@DataClass()
export class User {
  @KeyPath()
  name: string;
  age: number;
  cell?: string;
  address: string;

  constructor(name: string, age: number, address: string, cell?: string) {
    this.name = name;
    this.age = age;
    this.address = address;
    this.cell = cell;
  }
}

But I am getting Uncaught SyntaxError: Invalid or unexpected token (at IDBOperations.ts:2:1)

I'm using vue of version ^3.5.13.

How can I configure my vue application properly to use these plugin with decorator?

Here is my full code: https://github.com/maifeeulasad/idb-ts/tree/41c98a3ab455aa7cd9830360058151b9325ea919/examples/vue