Cannot set breakpoint in .vue file with async method
No idea why it does not work in this specific case, but as a means of last resort, you can add a line debugger; before if... - is will make any DevTools (at least any current one, incl. IE11) stop there. You code would then look something like this:
// ... debugger; if (valid) { // ...
This is likely because of the Babel polyfills Vue CLI is configured to use by default which generated source maps don't seem to work well with.
Specifically this polyfill for async methods will cause issues with debugging:https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator
You can avoid these polyfills by adding this in your .browserslistrc
[development]last 1 chrome versionlast 1 firefox versionThe @vue/babel-preset-app Babel preset automatically determines which polyfills to use based on which browsers you are targeting in .browserslistrc. So to disable the problematic polyfill we target only browsers that natively support async/await in development (eg: the latest versions of Chrome and Firefox).