title: Updates to object inside array do not trigger updates
body: <p>In my root Vue instance, I have an array of objects with some data, which I use to render a set of components. These components have a watcher on the object of data provided to them, which is supposed to make an asynchronous call every time the object is updated.</p>
  
  <p>The problem is that when I update a property of one of the objects in my array, the watcher is not called. It shouldn't fall into any of Vue's caveats because a) I'm not adding a new property, just updating an existing one and b) I'm not mutating the array itself in any way. So why is this happening? And how do I fix it?</p>
  
  <p>My main Vue instance:</p>
  
  <pre><code>let content = new Vue({
      el: '#content',
      data: {
          testData: [
              { name: 'test1', params: {
                  testParam: 1
              } },
              { name: 'test2', params: {
                  testParam: 1
              } },
              { name: 'test3', params: {
                  testParam: 1
              } }
          ]
      }
  });
  </code></pre>
  
  <p>The code which I use to render my components:</p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;div v-for="item in testData"&gt;
          &lt;test-component v-bind="item"&gt;&lt;/test-component&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my component:</p>
  
  <pre><code>Vue.component('test-component', {
      props: {
          name: {
              type: String,
              required: true
          },
          params: {
              type: Object,
              required: true
          }
      },
      data: function() {
          return { asyncResult: 0 };
      },
      watch: {
          params: function(newParams, oldParams) {
              // I use a custom function to compare objects, but that's not the issue since it isn't even being called.
  
              console.log(newParams);
  
              if(!this.compareObjs(newParams, oldParams)) {
                  // My async call, which mutates asyncResult
              }
          }
      },
      template: `
          &lt;span&gt;{{ asyncResult }}&lt;/span&gt;
      `
  });
  </code></pre>
  
  <p>My goal is to mutate the properties of the <code>params</code> property of a given object and trigger the watcher to rerender the corresponding component, but when I try to mutate it directly it doesn't work.</p>
  
  <p>Example (and the way I'd like my component to work):</p>
  
  <pre><code>content.testData[2].params.testParam = 5;
  </code></pre>
  
  <p>Unfortunately, it doesn't. Using <code>Vue.set</code> doesn't work either:</p>
  
  <pre><code>Vue.set(content.testData[2].params, 'testParam', 5);
  </code></pre>
  
  <p>The only thing I found which does work is to assign a new object entirely (which is not something I'd like to do every time I have to mutate a property):</p>
  
  <pre><code>content.testData[2].params = Object.assign({}, content.testData[2].params, { testParam: 5 });
  </code></pre>
  
  <p>I also tried using a deep watcher, as suggested in a similar question, but it didn't work in my case. When I use the deep watcher the function <em>is</em> called, but both <code>newParams</code> and <code>oldParams</code> are always the same object, no matter which value I set to my property.</p>
  
  <p>Is there a solution to this that will allow me to mutate the array items just by setting a property? That would be the most desirable outcome.</p>