Given the code below, I have a squiggle line underneath $router which says Property '$router' does not exist on type 'App'

  async handleUserActions(item: TODO) {
    this.menuItem = item.title;
    if (item.title === 'Logout') {
      await userModule.logout();
    }
    this.$router.push(item.link);
  }

I read this answer but it doesn't seem to work. I already have a file called shims-vue.d.ts in the project that looks like this by default:

declare module "*.vue" { import Vue from "vue"; export default Vue; }

I am not sure how I should add the code suggested in the linked SO question above. I currently have it configured like this, which is taken from the most popular answer on the linked question:

import VueRouter, { Route } from 'vue-router'

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
  interface Vue {
    $router: VueRouter
  }
}

But in this case the line import Vue from "vue"; has a red squiggle line below "vue" which says Cannot find module 'vue' or its corresponding type declarations when hovered.

Not sure what is going on here. I know that an app can run with some of these warnings, but I am having some issues with the router and think this may be causing the problem.

Any help much appreciated.