Vue.js issue with typescript - alias has no error in code but when running shows an error that can't resolve alias

I have created the most basic app to test this issue, not sure if I haven't configured something right, but the issue is that importing a typescript file into my .vue component will create no error and the compiler can find it, however when typing npm run serve an error will appear saying Can't resolve '@logic/enemy-repository' in '~\enemytest\src\views. Have recreated the app many times with diffrent configurations but still the same issue. Any ideas?

This is all being done in VS Code, Vue.js 3 and on windows.
Just to note:

1. I'm referencing like so import EnemyRepository from '@logic/enemy-repository'

2. Doing relative referencing of the file causes no issue such as import EnemyRepository from '../logic/enemy-repository'

3. Doing the import from the route absolutely also works import EnemyRepository from '@/logic/enemy-repository'

4. Because of this the issue is most likely to do with the tsconfig.json file. My paths and baseurl are set up like so...

    "baseUrl": ".",
    "paths": {
       "@/*": [
          "src/*"
       ],
       "@logic/*": ["src/logic/*"],
   
    },
   

Steps to recreate:

1. vue create enemytest
2. Manually select features
3. Babel, Typescript, Router, vuex, linter/formatter selected.
4. 3.x
5. USe class-style component syntax
6. Use babel alongside typescript
7. Use history mode
8. ESLint with error prevention only
9. Lint on save
10. In dedicated config file
11. Open in vs code.
12. Create a new file in folder structure /src/loci/enemy-repository.ts and export method.
13. Import repository into HomeView.vue.
14. In tsconfig.json add a path new item to paths "@logic/": ["src/logic/"],
15. Type in console npm run serve
16. Error shows in terminal 'Module not found: Error: Can't resolve '@logic/enemy-repository' in '~\enemytest\src\views''

Have attached a repo here GitHub Repo

• for @vue/cli projects:

// vue.config.js

const path = require('path');
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        "@logic": path.resolve(__dirname, 'src/logic/'),
        "@": path.resolve(__dirname, 'src/')
      }
    }
  }
}

• for vite projects: (resolve.alias)

// vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')

export default defineConfig({
  resolve:{
    alias:{
      '@logic': path.resolve(__dirname, './src/logic')
      '@' : path.resolve(__dirname, './src')
    },
  },
  plugins: [vue()]
})