title: Why an addition of a key does not trigger a watched variable?
body: <p>I have an Object <code>allevents</code> asynchronously updated with keys and values. Whenever <code>allevents</code> is modified I would like to trigger a recalculation function.</p>
  
  <p>To do so, I use the following Vue structure (in a component, all irrelevant elements removed):</p>
  
  <pre><code>export default {
          data: function () {
              return {
                  //
                  allevents: {},
                  events: []
              }
          },
          methods: {
              //
              mqttMessage(topic, message) {
                  const cal = topic.split('/').pop()
                  this.allevents[cal] = JSON.parse(message).filter(x =&gt; true)
                  // following the update above, I was expecting that since 
                  // allevents is watched below, the function would trigger
                  // as a workaround, I added this line below which fixes the issue
                  // but I still would like to understand the lack of trigger
                  this.computeEvents()
              },
              // the function ssupposed to be triggred after a chnage, below
              computeEvents() {
                  this.events = []
                  Object.values(this.allevents).forEach(cal =&gt; cal.forEach(e =&gt; this.events.push(e)))
              }
          },
          watch: {
              // whenever allevents change, run computeEvents() &lt;-- this does not happen
              allevents() { 
                  console.log("events compute triggered")
                  this.computeEvents() 
              }
          },
          mounted() {
              //
          }
  }
  </code></pre>
  
  <p><strong>Even though <code>allevents</code> is modified and is watched, <code>computeEvents()</code> is not started. Why?</strong></p>