title: Vue add property to data root level and make it reactive
body: <p>Consider below code:</p>
  
  <pre class="lang-js prettyprint-override"><code>let myData = {
      a: 1
  }
  
  const app = new Vue({
      data: myData
  });
  </code></pre>
  
  <p>As Vue docs says when we try to add a property like below, the new property isn't reactive:</p>
  
  <pre class="lang-js prettyprint-override"><code>myData.b = 12;
  console.log(app.b); // undefined
  </code></pre>
  
  <p>Vue docs suggests using <code>Vue.set</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>Vue.set(myData, 'b', 12);
  console.log(app.b); // still undefined
  </code></pre>
  
  <p>Vue docs says <code>Vue.set</code> adds a property to a reactive object!</p>
  
  <p>But I want to add <code>b</code> to the data's root level. I don't know how to make <code>b</code> reactive.</p>