Vuetify component not loading completely in vue 3 webpack

I have a legacy vue project built with Webpack, which recently migrated to vue 3. I’m trying to add Vuetify to it following the official documentation. But only a few components are working and most of the components are not working at all. It works for v-btn but throws the following error when I try to use v-text-field

Can anyone point me in the right direction, what I’m doing wrong here?

package.json

"@vue/compat": "^3.2.39",
"@vue/compiler-sfc": "^3.2.39",
"vue": "^3.4.37",
"vuetify": "^3.6.14",
"vuex": "^4.0.2",
"webpack-plugin-vuetify": "^3.0.3",
"vue-loader": "^17.0.1",
"webpack": "^5.93.0",
"webpack-cli": "^4.10.0",
"webpack-manifest-plugin": "^5.0.0",
"webpack-merge": "^5.8.0"

webpack plugin

plugins: [
 new CleanWebpackPlugin(),
 new VueLoaderPlugin(),
 new VuetifyPlugin({ autoImport: true }),
 new MiniCssExtractPlugin({
    filename: '[name].[contenthash].bundle.css',
    chunkFilename: '[name].[contenthash].bundle.css',
    rtlEnabled: true,
 }),
 new WebpackManifestPlugin(),
 new ESLintPlugin(),
 new Webpack.DefinePlugin({ __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: true }),
],

index.js

import vueAdmin from './plugins/app';
import { createVuetify } from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

const vuetify = createVuetify({});

const adminElement = document.querySelector('.vue-admin');
vueAdmin.use(vuetify);
vueAdmin.use(store);
vueAdmin.use(router);
vueAdmin.mount(adminElement);