title: Why can't you add a Vue.js reactive property directly to root model?
body: <p>Here is some code that uses <code>$set()</code> to add a new reactive prop to the model. It works fine.</p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="app"&gt;
          &lt;div&gt;
              Prop1: {{ x.prop1 }}
          &lt;/div&gt;
          &lt;div&gt;
              &lt;input type="button" value="Go" @click="go()"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: 'app',
  
          data() {
              return {
                  x: {}
              };
          },
  
          methods: {
              go() {
                  this.$set(this.x, 'prop1', 'yay');
              }
          }
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>Now, if I remove the <code>x</code> root property and try to add <code>prop1</code> directly to the <code>this</code> it doesn't work.</p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="app"&gt;
          &lt;div&gt;
              Prop1: {{ prop1 }}
          &lt;/div&gt;
          &lt;div&gt;
              &lt;input type="button" value="Go" @click="go()"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: 'app',
  
          data() {
              return {
              };
          },
  
          methods: {
              go() {
                  this.$set(this, 'prop1', 'yay');
              }
          }
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>I get that you should do this kind of thing, but I can't figure out why it doesn't work.</p>