title: Array of objects - correct way of updating an object within the Vue.js ecosystem
body: <p>I'm not sure exactly where the issue lies with this, but I'm going to see if anyone can help me understand what is going wrong with my code.</p>
  
  <p>I am utilising the Vuex store, to keep a track of some state that is constantly mutating. I'm doing this as follows:</p>
  
  <pre><code>import Vue from 'vue'
  import Vuex from 'vuex'
  
  Vue.use(Vuex)
  
  export default new Vuex.Store({
    state: {
      id: 0,
      contentBlocks: []
    },
    mutations: {
      addContentBlock(state, contentBlock) {
        contentBlock.id = state.id
        state.contentBlocks.push(contentBlock)
        state.id += 1
      },
      updateContentBlock(state, contentBlock) {
        state.contentBlocks[contentBlock.id] = contentBlock
      },
      removeContentBlock(state, contentBlock) {
        state.contentBlocks.splice(state.contentBlocks.indexOf(contentBlock), 1);
      }
    }
  })
  </code></pre>
  
  <p>Creating and deleting blocks seems to work fine.</p>
  
  <p>However, when updating a block - something is going wrong. The only way I can explain what is going wrong is by showing the log of the contentBlocks instance:</p>
  
  <p><a href="https://i.stack.imgur.com/rSbwP.png" rel="noreferrer"><img src="https://i.stack.imgur.com/rSbwP.png" alt="console.log(this.contentBlocks)"></a></p>
  
  <p>As you can see in the above screenshot, the object instances that has been updated (index 1 in the above example) is not quite correct, it doesn't seem to be an Observer object? </p>
  
  <p>The failing line is:</p>
  
  <pre><code>state.contentBlocks[contentBlock.id] = contentBlock
  </code></pre>
  
  <p>So, I'm wondering...what should this be?</p>
  
  <p><strong>Update</strong>:</p>
  
  <p>On the advise of the below answer I have the following:</p>
  
  <pre><code>updateContentBlock(state, contentBlock) {
    const index = state.contentBlocks.findIndex(block =&gt; block.id === contentBlock.id)
    Vue.set(state.contentBlocks, index, contentBlock)
  },
  removeContentBlock(state, contentBlock) {
    const index = state.contentBlocks.findIndex(block =&gt; block.id === contentBlock.id)
    state.contentBlocks.splice(index, 1, contentBlock)
  }
  </code></pre>
  
  <p>in my store. However, this isn't removing contentBlocks. </p>
  
  <p>I've tried changing the suggested code to:</p>
  
  <pre><code>state.contentBlocks.splice(index, 1)
  </code></pre>
  
  <p>But this is causing some odd behaviour. For example, I have blocks of indices 0, 1 and 2 ... I mutate to remove index 0. All looks good - I have only the contentBlocks at indices 1 and 2 left. Yet they come with the content from 0 and 1 ???</p>