Unbound breakpoints after launching vue app in nested directory structure

Question

I'm new to Vue.js. I followed a tutorial on building a Vue project with a Django backend. I'm currently stuck with trying to debug the Vue side of things. I've followed the official debugging recipe and set up the necessary files, however, my project has a nested directory structure Vue in frontend/ and Django in backend/. My launch.json looks like this:

.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "WSL Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/frontend",
            "sourceMapPathOverrides": {
                "webpack:///./src/*": "${webRoot}/src/*",
                "webpack:///src/*": "${webRoot}/src/*"
            }
            
        
        },
        {
            "name": "Python: d-commerce",
            "type": "python",
            "request": "launch",
            "program": "${workspaceFolder}/backend/manage.py",
            "args": [
                "runserver"
            ],
            "django": true,
            "justMyCode": true
        },
    ]
}

frontend/vue.config.js:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    devtool: 'source-map',
  }
})

What I'm seeing in vscode:

1. We couldn't find a corresponding source location, and didn't find any source with the name CheckOut.vue.
2. Make sure your build tool is set up to create sourcemaps.

What I expect:

1. to see bound breakpoints after starting my Vue app.
2. be able to start debugging and stop pulling my hair out.