VSCode marking the breakpoints as Unbound Breakpoints ONLY in .vue files in Vue js

Question

Probelm Statement:

I am trying to debug my vue application in VSCode.

The breakpoints are working for js files but in .vue files, they are marked as "Unbound breakpoints" and aren't working, that the debugger is not stopping there.

What I have done:

I have searched a lot of launch.js files settings and followed these two following stackoverflow questions:

Debugger settings for Chrome in VS Code with Vue.js

Debugging Vue in VScode and Chrome, unbound breakpoint

The best solution I found was to have the following launch.json file, but it claims to work for both js and other (including .vue) files, BUT for me it is only working for js files NOT for .vue files:

  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///./src/*": "${webRoot}/*",
      }
    }
  ]
}

Other Variations I have also tried some other variations to above "sourceMapPathOverrides" property of launch.js file.

      "sourceMapPathOverrides": {
         "webpack:///src/*.vue": "${webRoot}/*.vue",
         "webpack:///./src/*.js": "${webRoot}/*.js"
      }

And

      "sourceMapPathOverrides": {
         "webpack:///src/*": "${webRoot}/*",
         "webpack:///./src/*.js": "${webRoot}/*.js"
      }

BUT ALL HAVE NO EFFECT. In each configuration, .js files are working fine with breakpoints but .vue files fiving unbound breakpoints.