title: What is the correct pattern to mutate the state represented by an array?
body: <p>What is the correct pattern to mutate the state represented by an array?</p>
  <p>In a standard example for Vuex 4:
  <a href="https://github.com/vuejs/vuex/blob/4.0/examples/composition/todomvc/store/mutations.js#L20" rel="nofollow noreferrer">VUEX4 GitHub example1</a></p>
  <p>It is proposed to delete an array element and insert a new one.</p>
  <pre><code> state.todos.splice(index, 1, {
        ...todo,
        text,
        done,
      });
  </code></pre>
  <p>Is this the standard pattern for changing the store array for Vuex 4, Vue 3?</p>
  <p>Another example directly modifies an object field in an array:
  <a href="https://github.com/vuejs/vuex/blob/4.0/examples/composition/shopping-cart/store/modules/cart.js#L73" rel="nofollow noreferrer">VUEX4 GitHub example2</a></p>
  <pre><code>   const cartItem = state.items.find(item =&gt; item.id === id)
     cartItem.quantity++
  </code></pre>
  <p><strong>What's the right way</strong> to mutate the state's array in Vuex 4 without reactivity lost?
  Is it possible to direct array's item modification by index as example2?
  Is VUEX4 have reactivity - or reactivity is the only component's property?</p>