Why is Vue.js Chrome Devtools not detecting Vue.js?

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

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-migration.vuejs.org/breaking-changes/introduction.html#devtools-extension

Remember to restart your browser afterwards.

To solve this, simply go to chrome://extensions/, scroll down to the Vue.js devtools and enable the "Allow Access to file URLs" by clicking on its checkbox.

Source: https://github.com/vuejs/vue-devtools/issues/236

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