vue-tsc --build v. 2.1.x breaks on vue 2.7 with component based syntax (using vue-class-component)

[chessydk-vertica]

Vue - Official extension or vue-tsc version

2.1.x

VSCode version

1.93.1

Vue version

2.7.16

TypeScript version

5.4.5

System Info

Window 11, node 20.14.0, npm 10.7.0

package.json dependencies

"dependencies": {
    "@adyen/adyen-web": "^5.32.0",
    "@dotlottie/player-component": "^2.7.12",
    "@google/maps": "^1.1.3",
    "@growthbook/growthbook": "^0.31.0",
    "@juggle/resize-observer": "^3.4.0",
    "@lottiefiles/lottie-interactivity": "^1.6.2",
    "@mparticle/cli": "^1.0.6",
    "@mparticle/web-google-analytics-kit": "^2.1.12",
    "@mparticle/web-google-tag-manager-kit": "^2.0.3",
    "@mparticle/web-sdk": "^2.15.0",
    "animate.css": "^3.7.2",
    "axios": "^0.21.1",
    "babel-eslint": "^10.1.0",
    "body-scroll-lock": "^4.0.0-beta.0",
    "canvas-confetti": "^1.4.0",
    "cash-dom": "^6.0.2",
    "core-js": "^3.26.1",
    "dompurify": "^3.0.4",
    "flickity": "^2.3.0",
    "flickity-imagesloaded": "^2.0.0",
    "generate-confetti": "^1.0.0",
    "gmap-vue": "^3.5.4",
    "gsap": "^3.11.3",
    "http-status-codes": "^2.2.0",
    "isotope-layout": "^3.0.6",
    "js-cookie": "^2.2.1",
    "jsnlog": "^2.30.0",
    "libphonenumber-js": "^1.10.56",
    "lodash-es": "^4.17.21",
    "mailcheck": "^1.1.1",
    "mailcheck-vue": "^1.0.4",
    "masonry-layout": "^4.2.2",
    "portal-vue": "^2.1.7",
    "querystring": "^0.2.1",
    "stacktrace-js": "^2.0.2",
    "stickyfilljs": "^2.1.0",
    "v-click-outside": "^3.2.0",
    "v-tooltip": "^2.1.3",
    "vee-validate": "^2.2.15",
    "vue": "^2.7.14",
    "vue-class-component": "^7.2.6",
    "vue-parallax-js": "^0.2.3",
    "vue-property-decorator": "^9.1.2",
    "vue-router": "^3.6.5",
    "vue-slider-component": "^3.2.14",
    "vue-vimeo-player": "^0.2.2",
    "vue-youtube": "^1.4.0"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.8.0",
    "@tsconfig/node20": "^20.1.4",
    "@types/flickity": "^2.2.11",
    "@types/isotope-layout": "^3.0.9",
    "@types/js-cookie": "^3.0.2",
    "@types/lodash": "^4.14.172",
    "@types/lodash-es": "^4.17.6",
    "@types/masonry-layout": "^4.2.4",
    "@types/mparticle__web-sdk": "^2.18.0",
    "@types/node": "^20.12.5",
    "@vitejs/plugin-vue2": "^2.3.1",
    "@vue/eslint-config-typescript": "^13.0.0",
    "@vue/tsconfig": "^0.5.1",
    "autoprefixer": "^10.4.20",
    "babel-plugin-lodash": "^3.3.4",
    "browserslist-ga-export": "^4.0.1",
    "csstype": "^3.1.3",
    "eslint": "^8.57.0",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-vue": "^9.23.0",
    "google-maps-api-typings": "^1.0.5",
    "less": "^4.2.0",
    "node-fetch": "^3.3.0",
    "npm-run-all2": "^6.1.2",
    "postcss": "^8.4.45",
    "postcss-color-mod-function": "^3.0.3",
    "qrcode-terminal": "^0.12.0",
    "tailwindcss": "^3.4.10",
    "typescript": "~5.4.0",
    "vite": "^5.2.8",
    "vue-svgicon": "^3.2.9",
    "vue-tsc": "~2.1.0"
  },

Steps to reproduce

Run vue-tsc --build

What is expected?

No errors

What is actually happening?

A lot of errors are generated, all of the form:
error TS2339: Property 'TopicNavigation' does not exist on type 'Required<{} & __VLS_WithComponent<"TopicsSearchControl", this, "TopicsSearchControl", "TopicsSearchControl", "TopicsSearchControl"> & __VLS_WithComponent<"TopicNavigat...

The error occurs in .vue files with component syntax (like below). Error is raised for all components used in the template of that vue file.

@component({
components: {
NextPageLink,
TopicsSearchControl,
TopicNavigation
}
})
export default class TopicsSearch extends Vue {

Link to minimal reproduction

No response

Any additional comments?

No response

[KazariEX]

Duplicate of #4841