title: Debugging Vue in VScode and Chrome, unbound breakpoint
body: <p>I'm trying to debug a Vue website I'm writing in VSCode and Chrome.
  When I put a breakpoint in the <code>data() { return {...} }</code> function it stops on it, but if I try to put it in a method in a Vue file or a JS service, once I launch Chrome through the debug config the breakpoints become unbound. Does anyone have any ideas about how to keep the breakpoints bound?
  This is my config file:</p>
  
  <pre><code>"version": "0.2.0",
      "configurations": [
          {
              "name": "Launch Chrome",
              "request": "launch",
              "type": "pwa-chrome",
              "url": "http://localhost:8080",
              "webRoot": "${workspaceFolder}/client/meet-for-lunch/src",
              "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
              }
          },
          {
              "type": "node",
              "request": "launch",
              "name": "Debug server",
              "runtimeExecutable": "nodemon",
              "program": "${workspaceFolder}/server/bin/www",
              "restart": true,
              "console": "integratedTerminal",
              "internalConsoleOptions": "neverOpen",
              "skipFiles": [
                  "&lt;node_internals&gt;/**"
              ]
          }
  
      ]
  }
  </code></pre>
  
  <p>I'm including the debug config for the server because in works.</p>
  
  <p>Here is an example of a method I'm trying to debug (from the Vue file), I put a break point at <code>this.error = null</code> . The method runs normally so I expect it to stop at the breakpoint :</p>
  
  <pre><code>        methods: {
              async login() {
                  try {
                      this.error = null;
                      const response = await AuthenticationService.login({
                          email: this.email,
                          password: this.password
                      })
                      this.$store.dispatch('setToken', response.data.token)
                      this.$store.dispatch('setUser', response.data.user)
  
                  }
                  catch (err) {
                      console.log(`An error has occured: ${JSON.stringify(err.response)}`)
                      this.error = err.response.data.error
                  }
              }
          } 
  </code></pre>
  
  <p>I'm also trying to debug my service:</p>
  
  <pre><code>login(credentials) {
          return Api().post('/login', credentials)
      }
  </code></pre>
  
  <p>The Api object just creates the Axios request</p>
  
  <p>Thanks,</p>
  
  <p>Ben</p>