title: Behaviour of Vue-observable, when adding properties after creation
body: <p>I'd like to have a little registry in one of my Vue files and decided to use the Vue.observable function Vue provides (yes I could use Vuex, but first I want to try without). Now, when I add properties to my registry after creation (using Vue.set of course), I find that the reactivity of my properties is hard to predict:</p>
  <ol>
  <li>This does work as expected:</li>
  </ol>
  <pre><code>const state = Vue.observable({fromObservable: ''})
  ...
  computed:
    fromObservable: () =&gt; state.fromObservable
  ...
  In mounted:
    state.fromObservable = 'Success'
  </code></pre>
  <ol start="2">
  <li>This sadly does not work. Why?</li>
  </ol>
  <pre><code>const state = Vue.observable({})
  ...
  computed:
    fromObservable: () =&gt; state.fromObservable
  ...
  In mounted:
    Vue.set(state, 'fromObservable', 'Success')
  </code></pre>
  <ol start="3">
  <li>Nested properties work as expected:</li>
  </ol>
  <pre><code>const state = Vue.observable({values: {}})
  ...
  computed:
    fromObservable: () =&gt; state.values.fromObservable
  ...
  In mounted:
    Vue.set(state.values, 'fromObservable', 'Success')
  </code></pre>
  <ol start="4">
  <li>It does not work, if I instantly assign values to a variable. I have no clue, how this is happening:</li>
  </ol>
  <pre><code>const state = Vue.observable({values: {}}).values
  ...
  computed:
    fromObservable: () =&gt; state.fromObservable
  ...
  In mounted:
    Vue.set(state, 'fromObservable', 'Success')
  </code></pre>
  <p>Here is a <a href="https://jsfiddle.net/mdr4hu8p/" rel="nofollow noreferrer">fiddle</a> demonstrating this.</p>
  <p>Please explain to me, how this can be understood, especially case 2 and 4. Thanks in advance for your time.</p>