Understand needed update to webRoot or sourceMapPathOverrides

The Debug Diagnostics is trying its best to help me with the below error message; but I'm still not sure how to work out the required updates.

What does it mean by; "couldn't find a corresponding source location"?
I think its because it can't find the source maps?

What path is it looking for the corresponding "source location" on?
How am I supposed to read the red/ green and not highlighted part of the other files with the same name message?
Is the red, parts of the path it was looking for that don't match the paths of the other files with the same names?

I tried updating webRoot and sourceMapPathOverrides; but the error message didn't change.

My launch.json is as below.

 {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      }

Start with the reported launch.json configuration and the Debug Diagnostics output, focusing on webRoot and sourceMapPathOverrides. Trace how the debugger resolves source locations and presents same-name files, then document what the paths mean and what a successful configuration should show.