TypeScript编译未识别Vue组件方法及$auth等原型属性问题求助

抱歉，这个问题可能会有点模糊，主要是因为我实在不知道接下来该往哪个方向排查了。我参照相关教程进行开发，几乎到最后一步前所有功能都正常运行，现在遇到了如下报错：

ERROR in /home/aron/code/cx/client/src/views/EventSingle.vue(44,10):
44:10 Property 'getEventData' does not exist on type '{ name: string; data(): { event: {}; }; created(): void; methods: { getEventData(): Promise<void>; }; }'.
    42 |   },
    43 |   created() {
  > 44 |     this.getEventData(); // NEW - call getEventData() when the instance is created
       |          ^
    45 |   },
    46 | methods: {
    47 |   async getEventData() {
ERROR in /home/aron/code/cx/client/src/views/EventSingle.vue(49,36):
49:36 Property '$auth' does not exist on type '{ getEventData(): Promise<void>; }'.
    47 |   async getEventData() {
    48 |     // Get the access token from the auth wrapper
  > 49 |     const accessToken = await this.$auth.getTokenSilently()
       |                                    ^
    50 | 
    51 |     // Use the eventService to call the getEventSingle method
    52 |     EventService.getEventSingle(this.$route.params.id, accessToken)
ERROR in /home/aron/code/cx/client/src/views/EventSingle.vue(52,38):
52:38 Property '$route' does not exist on type '{ getEventData(): Promise<void>; }'.
    50 | 
    51 |     // Use the eventService to call the getEventSingle method
  > 52 |     EventService.getEventSingle(this.$route.params.id, accessToken)
       |                                      ^
    53 |     .then(
    54 |       (event => {
    55 |         this.$set(this, "event", event);
ERROR in /home/aron/code/cx/client/src/views/EventSingle.vue(55,14):
55:14 Property '$set' does not exist on type '{ getEventData(): Promise<void>; }'.
    53 |     .then(
    54 |       (event => {
  > 55 |         this.$set(this, "event", event);
       |              ^
    56 |       }).bind(this)
    57 |     );
    58 |   }

我的tsconfig.json配置如下：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "noImplicitAny": false,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "sourceMap": true,
    "baseUrl": ".",
    "resolveJsonModule": true,
    "types": [
      "webpack-env",
      "jest"
    ],
    "typeRoots": ["./@types", "./node_modules/@types"],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost","es2015", "es2016", "es2018.promise"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

我对TypeScript、JavaScript等技术不太熟悉，已经尝试了多种方案排查问题，仍未解决。我猜测问题原因是Auth0插件没有正确扩展Vue对象原型，可能和教程发布后框架版本迭代有关。请问有没有人知道该怎么解决？如果需要更多信息我可以随时补充，谢谢！

问题更新 #

使用Vue.extend包装组件导出后，4个报错已经解决了3个，修改后的代码如下：

import EventService from '../services/EventService.js';
import Vue from 'vue';
          
export default Vue.extend({
  name: 'EventSingle',
  data() {
    // NEW - initialize the event object
    return {
      event: {}
    }
  },
  created() {
    this.getEventData(); // NEW - call getEventData() when the instance is created
  },
  methods: {
    async getEventData() {
      // Get the access token from the auth wrapper
      const accessToken = await this.$auth.getTokenSilently()

      // Use the eventService to call the getEventSingle method
      EventService.getEventSingle(this.$route.params.id, accessToken)
      .then(
        (event => {
          this.$set(this, "event", event);
        }).bind(this)
      );
    }
  }
});

现在仅剩如下报错：

ERROR in /home/aron/code/cx/client/src/views/EventSingle.vue(51,38):
51:38 Property '$auth' does not exist on type 'CombinedVueInstance<Vue, { event: {}; }, { getEventData(): Promise<void>; }, unknown, Readonly<Record<never, any>>>'.
    49 |     async getEventData() {
    50 |       // Get the access token from the auth wrapper
  > 51 |       const accessToken = await this.$auth.getTokenSilently()
       |                                      ^
    52 | 
    53 |       // Use the eventService to call the getEventSingle method
    54 |       EventService.getEventSingle(this.$route.params.id, accessToken)

内容的提问来源于stack exchange，提问作者aronchick