vue-template-loader breaks vuetify components - vue.js

Question

I'm using vue-template-loader to load html files in .ts files using decorators, before I use it vuetify was working fine, but after I installed it I got these error messages
[Vue warn]: Unknown custom element: <v-img> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
[Vue warn]: Unknown custom element: <v-spacer> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
[Vue warn]: Unknown custom element: <v-btn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Basically: it says that vuetify is not in your app
vuetify.ts
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
// Locals
import ar from 'vuetify/src/locale/ar';
import en from 'vuetify/src/locale/en';
Vue.use(Vuetify);
export default new Vuetify({
rtl: true,
lang: {
locales: { ar, en },
current: 'ar',
}
});
vue.config.js
const { defineConfig } = require('#vue/cli-service');
module.exports = defineConfig({
transpileDependencies: ['vuetify'],
configureWebpack: {
module: {
rules: [
{
test: /.html$/,
loader: 'vue-template-loader',
exclude: /index.html/,
},
],
}
},
});
package.json
{
"dependencies": {
"core-js": "^3.8.3",
"moment": "^2.29.3",
"register-service-worker": "^1.7.2",
"vue": "^2.6.14",
"vue-class-component": "^7.2.3",
"vue-i18n": "^8.27.1",
"vue-property-decorator": "^9.1.2",
"vue-router": "^3.5.1",
"vuetify": "^2.6.0",
},
"devDependencies": {
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-e2e-cypress": "~5.0.0",
"#vue/cli-plugin-pwa": "~5.0.0",
"#vue/cli-plugin-router": "~5.0.0",
"#vue/cli-plugin-typescript": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"jest": "^27.0.5",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"typescript": "~4.5.5",
"vue-cli-plugin-vuetify": "~2.5.0",
"vue-template-loader": "^1.1.0",
"vuetify-loader": "^1.7.0"
}
}