Vue Router $route does not exist when compiling in Vue 3, TypeScript with Webpack Encore

Question

I've been trying to get vue-router $route setup within my shims.vue.d.ts file to allow for $route to not throw an error on this scope. this.$route.params.paymentId keeps coming back with type error TS2339: Property '$route' does not exist on type 'void'.

I am using <script setup lang="ts">. In other defined components(https://vuejs.org/guide/typescript/overview.html#definecomponent) I have, it references and builds fine. I just can't seem to figure out how get it working with Vue3 <script setup lang="ts">.

Below is my current shims.vue.d.ts and structure after trying to define in numerous ways. I have enabled .enableTypeScriptLoader() in webpack.config.js

// myComponent.vue

<script setup lang="ts">
import { computed, onMounted } from "vue";

const paymentId = this.$route.params.paymentId;

</script>

declare module '*.vue' {
    import { ComponentOptions } from 'vue'
    const ComponentOptions: ComponentOptions
    export default ComponentOptions
}


declare module 'vue/types/vue' {
    import type {Router, RouteLocationNormalized } from "vue-router";

    interface Vue {
        $router: Router,
        $route: RouteLocationNormalized
    }
}

// tsconfig.json

{
  "compilerOptions": {
    "declaration": true,
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es5",
    "skipLibCheck": true,
    "sourceMap": true,
    "declarationMap": true,
    "strict": true
  },
  "exclude": [
    "./node_modules"
  ],
  "include": ["**/*.ts","/**/*.tx","**/*.vue"]
}

Answer 1

I forgot that this isn't a thing anymore with Composition API. After updating the script setup all works fine.

import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()