Debug vue-cli project - no breakpoints, console links to wrong files

Trying to setup vscode to debug a vue project.

I use vue ui because it's actually super convenient.

I have 2 problems:

1. Breakpoints end up Breakpoint set but not yet bound. And obviously not working.
2. File links in the debug console open to src\node_modules\cache-loader\dist\webpack:.... That's not even a valid path - there's no node_modules in src.

I have read this page:
https://vuejs.org/v2/cookbook/debugging-in-vscode.html

I got most of my launch config from there.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "vuejs/chrome: Attach to devtools",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "urlFilter": "http://localhost:8080/*",
            "webRoot": "${workspaceFolder}/src",
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        }
    ]
}