title: Vue.js does not seem to be updating the DOM on a variable change
body: <p>I am fairly certain this is an extremely simple problem, but I have spent around 3 hours attempting to figure it out to no avail. If I bind a variable inside of a Vue object, i.e. <code>data: {x: a}</code> where a is some variable, and then I change the value of <code>a</code>, I was under the impression that it would change the value of <code>data.x</code> as well, no? </p>
  
  <p>I'm currently attempting a <code>v-if</code>/<code>v-else</code> chain, with the if statement involving an inequality, but even after it should evaluate to <code>true</code>, what is displayed does not change. I made some sample code, and a JSFiddle to go with it.</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;button v-if="unlocked"&gt;
      Unlocked
    &lt;/button&gt;
    &lt;button v-else-if="a &gt;= b"&gt;
      Available
    &lt;/button&gt;
    &lt;button v-else&gt;
      Unavailable
    &lt;/button&gt;
    &lt;span&gt;{{a}}&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the JS:</p>
  
  <pre><code>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);
  </code></pre>
  
  <p><a href="https://jsfiddle.net/ny5phzqe/" rel="nofollow noreferrer">https://jsfiddle.net/ny5phzqe/</a></p>
  
  <p>It increments the variable, but neither the text nor the displayed button change. Have I fundamentally misunderstood something about Vue?</p>