vue的js变量没传到html,Vue.js 似乎没有在变量更改时更新 DOM

我相当确定这是一个非常简单的问题，但我花了大约 3 个小时试图弄清楚它无济于事。如果我在 Vue 对象内绑定一个变量，即data: {x: a}其中 a 是某个变量，然后我更改 的值a，我的印象是它也会更改 的值data.x，不是吗？

我目前正在尝试一个v-if/v-else链，其中 if 语句涉及不等式，但即使在它应该评估为 之后true，显示的内容也不会改变。我制作了一些示例代码和一个 JSFiddle 来配合它。

Unlocked

Available

Unavailable

{{a}}

和JS：

var x = {

unlocked: false,

a: 0,

b: 10,

}

new Vue({

el: "#app",

data: {

unlocked: x.unlocked,

a: x.a,

b: x.b

},

});

function y() {

x.a++;

console.log(x.a);

}

var z = setInterval(y, 250);

https://jsfiddle.net/ny5phzqe/

它增加变量，但文本和显示的按钮都不会改变。我是否从根本上误解了 Vue？