为什么 Vue 开发工具中的数据没有更新？

我希望有人解释一下为什么这在 Vue 中不起作用。

HTML

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

JS

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

预期的点击行为：Vue 开发工具 - 数据：isActive 等于 true

实际点击行为：数据：Vue 开发工具 - isActive 等于 false

但这确实

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
      }
});

预期的点击行为：Vue 开发工具 - 数据：isActive 等于 true，并且 p 具有活动类。

实际点击行为：Vue 开发工具 - 数据：isActive 等于 true，并且 p 具有活动类。

我的抱怨是，我希望 Vue 能够直接操作数据，而不是通过页面上的另一个元素。

正如 @Phil 在评论中发布的那样，存在一个问题，https://github.com/vuejs/vue-devtools/issues/41#issuecomment-162675083 https://github.com/vuejs/vue-devtools/issues/41#issuecomment-162675083.

似乎页面上没有任何反应，数据将不会在 Vue 开发工具中更新。但是，如果您通过 Vue 开发工具刷新，您可以看到更改，因此它一定可以正常工作。

我们只是无法在 Vue Dev Tools 上实时看到变化。