Why doesn't the data get updated in Vue Dev Tools?

Question

I want someone to explain why this would not work in Vue.

HTML

<div id="app">
  <button v-on:click="isActive = !isActive">Click me</button>
</div>

JS

vueApp = new Vue({
  el: '#app',
data: {
        isActive: false
      }
});

Expected click behaviour: Vue Dev Tools - data: isActive equals true

Actual click behaviour: data: Vue Dev Tools - isActive equals false

But this does

HTML

<div id="app">
  <button v-on:click="isActive = !isActive">Click me</button>
  <p v-bind:class="{ active : isActive }">Some text</p>
</div>

JS

vueApp = new Vue({
  el: '#app',
data: {
        isActive: false
      }
});

Expected click behaviour: Vue Dev Tools - data: isActive equals true, and p has active class.

Actual click behaviour: Vue Dev Tools - data: isActive equals true, and p has active class.

My gripe is, I expected Vue to be able to manipulate the data directly, not via another element on the page.

Answer 1

As posted by @Phil in the comments, there is an issue for this, https://github.com/vuejs/vue-devtools/issues/41#issuecomment-162675083.

It seems that without anything to react to on the page, the data will not get updated in Vue Dev Tools. However you can see the change if you refresh via Vue Dev Tools so it must be working.

We just can't see the change in real time on Vue Dev Tools.