JSConfig Webpack Alias Works with Folders but not Files

Question

I'm currently using VueJS as well as Vetur and VSCode as my IDE. In VueJS, there is a webpack alias setup '@' that redirects to './src'. I've setup a jsconfig.json file with the config;

{
  "target": "es2017",
  "allowSyntheticDefaultImports": false,
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

This works well for the folders however, it doesn't list individual files. For example, it will show folder names in intellisense like 'Components', but it wont list component names like 'Component.vue' once inside the Components folder.

I was wondering if anyone knew why this was happening and if there was perhaps a mistake in my config file?

Thanks!