Why is Vue.js Chrome Devtools not detecting Vue.js?
One alternative is to set up a local web server, as the OP already stated.
The other - which IMHO is faster and less harassing - is letting the extension have access to file URLs, which is disabled by default.
Simply go to chrome://extensions and leave the "Allow access to file URLs" box checked for Vue.js devtools.
Sources:
https://github.com/vuejs/vue-devtools#common-problems-and-how-to-fix
http://codersdeck.com/vue-js-2-setting-vue-devtools/
I tried all of the ways presented in answers here, but none of them worked for me (neither for chrome nor for firefox).
Finally I found an answer: If you still have this problem, you can try to uninstall the current version of Vue extension and install beta version: https://v3.vuejs.org/guide/migration/introduction.html#devtools-extension
Remember to restart your browser afterwards.
UPDATE: 2021 May 30,
If you are using Vue 3, old dev tools versions won't work, so just use the new beta version.
https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg