Q:

VSCode showing "cannot find module" TS error for .vue import while compiling doesn't

Simply put, vscode is showing this error in a module:

Cannot find module '@/components/SidebarToggleIcon'

But no such error shows up during compilation.
This is a VueJS project and SidebarToggleIcon is a .vue file with TypeScript in the <script lang="ts"> section. This error was showing up before in VSCode and during compilation until I added the @vue/eslint-config-typescript package. Now is just shows up in VSCode.
Sidebar.vue
<script lang="ts">
// [skip other imports]
import SidebarToggleIcon from '@/components/SidebarToggleIcon';

@Component
export default class LayoutSidebar extends Vue {

    get sidebarCollapsed(): boolean {
        return preferenceModule.sidebarCollapsed;
    }
}

</script>

SidebarToggleIcon.vue
<script lang="ts">
import Vue from 'vue';
import { getModule } from 'vuex-module-decorators';
import Component from "vue-class-component";
import PreferencesStore from '@/store/PreferencesStore';

const preferenceModule: PreferencesStore = getModule(PreferencesStore);

@Component
export default class SidebarToggleIcon extends Vue {

    get sidebarCollapsed(): boolean {
        return preferenceModule.sidebarCollapsed;
    }

    toggle(){
        preferenceModule.ToggleSidebar();
    }
}
</script>

Why is this? How do I solve this?
Edit: This is not an issue with the @ alias, those resolve correctly (in the screenshot the line above the error uses it, and I use it else-wear in the project), this error still shows up when using relative paths. My TSConfig has the appropriate "paths": { "@/*": ["src/*"] } item. If this was the issue compiling would also throw this error, which it does not, this is only present in VSCode.

A:

This is because TypeScript does not resolve webpack aliases automatically.
For TS to resolve aliases, they should be added in tsconfig.json under compilerOptions.paths:
{  
  "compilerOptions": {
   "paths": {
     "@/*": [
      "./*"
     ]
    }
  }
}

