title: Vuejs2 - How to update the whole object from the server not losing reactivity?
body: <p>I have a list of objects that can be updated from the database.</p>
  <p>So, when I load the list, objects have only id and name.</p>
  <p>When I click on an object I load other fields that can be of any length - that's why I don't load them with the objects in the list.</p>
  <p>I found that when I update an object it can be difficult to keep reactivity <a href="https://v2.vuejs.org/v2/guide/reactivity.html" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/reactivity.html</a> so I need to find some workaround.</p>
  <p>this code works almost okay:</p>
  <pre><code>    axios.get('/api/news', item.id).then(function(response){
          if (response){
              Object.assign(item, response.data.item);
          }
      });
  </code></pre>
  <p>But the problem is the fields that have not been presented from the beginning is <strong>not</strong> 100% reactive anymore. What is going on is a new field has been updated reactively only when I change another, previous one. So, if I show 2 text field with old and new properties, if I change the second property, the field will not be updated until I change the first one.</p>
  <p>I got item object from the component:</p>
  <pre><code>data () {
          return {
              items: [], 
          }
  },
  </code></pre>
  <p>and</p>
  <pre><code>            &lt;div v-for=&quot;item in items&quot; @click=&quot;selectItem(item)&quot; &gt;
                  &lt;span&gt;{{item.name}}&lt;/span&gt;
              &lt;/div&gt;
  </code></pre>
  <p>Then item's been passed to the function selectItem.</p>
  <p>What is the proper pattern to load new fields <em>and</em> keep them reactive? (NB: it's not the case when I can assign field by field - I want to reuse the same code no matter which object it is, so I need so the solution for updating an object at a time without listing all new fields.)</p>
  <p>Note. This code works inside the component.</p>