Problem with TypeScript

[lkurylo]

I have a problem with typescript and vuetify to get to work together.

In tsconfig.json I have:

"strict": true, 
"noImplicitThis": true,   
"types":["vuetify"],
"typeRoots": [
  "./node_modules/@types",
  "./node_modules/vuetify/types"
],

In component:

computed: {
        setMaxHeight():string {
            switch (this.$vuetify.breakpoint.name) {
                case 'xs':
                case 'sm': return '56px';
                case 'md':
                case 'lg':
                case 'xl': return '64px'
            }
            // return "56px";
        }
    }

During compilation I got error:

TS2339: Property 'breakpoint' does not exist on type '(() => any) | ComputedOptions<any>'.
  Property 'breakpoint' does not exist on type '() => any'.

In method:

 methods: {
        isXs(): boolean {
            return this.$vuetify.breakpoint.xsOnly;
        },
}

I got

TS2339: Property '$vuetify' does not exist on type '{ isXs(): any; }'.

There is no error in VSCode. Intellisense is working, I can check types by mouse hover on vuetify elements.

If I comment the vuetify path in computed section and leave the method uncommented, then compilation errors are gone.

This Vue component is created by Vue.extend and project is compiled by webpack 4.
Don't know if this is important, but this class is places in *.ts file but imported in sfc component.

Webpack config:

	rules: [
			{
				test: /\.m?js$/,
				exclude: /(node_modules|bower_components)/,
				use: {
					loader: "babel-loader",
					options: {
						presets: ["@babel/preset-env"],
					},
				},
			},

			{
				test: /\.ts$/,
				//loader: 'babel-loader',
				exclude: /node_modules/,
				//	include: /Scripts/,
				use: {
					loader: "ts-loader",
				}
			},
			{
				test: /\.vue$/,
				loader: "vue-loader",
				options: {
					prettify: false,
					compilerOptions: {
						modules: [
							{
								preTransformNode(astEl) {
									var attrsName = ["data-testid"];
									if (
										process.env.NODE_ENV === "production" &&
										!process.env.NODE_TEST
									) {
										const { attrsMap, attrsList } = astEl;
										for (const a of attrsName) {
											if (attrsMap[a]) {
												delete attrsMap[a];
												const index =
													attrsList.findIndex(
														(x) => x.name == a
													);
												attrsList.splice(index, 1);
											}
										}
									}
									return astEl;
								},
							},
						],
					},
				},
			},
			// this will apply to both plain `.ts` files
			// AND `<script>` blocks in `.vue` files
			{
				test: /\.ts$/,
				//loader: 'babel-loader',
				exclude: /node_modules/,
				//	include: /Scripts/,
				use: {
					loader: "ts-loader",
				},
			},
			// this will apply to both plain `.css` files
			// AND `<style>` blocks in `.vue` files
			{
				test: /\.css$/,
				use: ["vue-style-loader", "css-loader"],
			},
			{
				test: /\.s(c|a)ss$/,
				use: [
					"vue-style-loader",
					"css-loader",
					{
						loader: "sass-loader",
						options: {
							//sass requires fiber installation but scss not
							implementation: require("sass"),
							fiber: require("fibers"),
							//fiber: false,
							//indentedSyntax: true // optional
						},
					},
				],
			},
			{
				test: /\.styl$/,
				loader: ["vue-style-loader", "css-loader", "stylus-loader"],
			},
			{
				test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
				loader: "url-loader?limit=100000",
				options: {
					name: "./[name].[ext]?[hash]",
				},
			},
			{
				test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
				loader: "file-loader",
				//query: {
				//  name: '[name].[ext]?[hash]'
				//}
				options: {
					name: "[name].[ext]?[hash]",
					//outputPath: '/Scripts/bundle/',
					publicPath: "/dist",

					postTransformPublicPath: (p) => {
						//console.log('postTransformPublicPath2', p, arguments.length);
						return 'test';//`__webpack_public_path__ + ${p}`;
					},
				},
			},
		],

I'm not an author of most of this webpack config, but except the vuetify part, other things are working. Can't find any clue how to fix this.

Packages:
"vuetify": "^2.2.22",
"vue": "^2.6.11",
"webpack": "^4.42.1",
"vue-loader": "^15.9.1",
"ts-loader": "^8.2.0",
"typescript": "^4.5.4",

NodeJS v8.12.0