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

I have the following code with a simple working Vue.js application. But the Vue.js devtools is not responding. It was working well a few days ago, now it's not working anymore what could possibly be going wrong? when I go to webstore, it says it is already added.

let data = {
  message: 'Hello World'
}

new Vue({
  el: '#application',
  data: data
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.js"></script>
<div class="container">
  <div id="application">
    <input type="text" v-model="message">
    <p>The value of the input is: {{ message }}</p>
  </div>
</div>

Solution

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