title: Vuex add new array property to an object and push elements to that object inside mutation in a reactive manner
body: <p>According to the <a href="https://vuex.vuejs.org/guide/mutations.html#mutations-follow-vue-s-reactivity-rules" rel="nofollow noreferrer">Official docs</a>, vuex <strong>mutations</strong> has some limitation in reactivity.</p>
  
  <p>When <strong>adding a new property to an object</strong> we have to do,</p>
  
  <pre><code>Vue.set(obj, 'newProp', 123)
  </code></pre>
  
  <p>This is fine. But how do we add new <strong>array</strong> property and <strong>push</strong> elements to that without breaking the reactivity?</p>
  
  <p>This is what I have done up to now. This is working fine but the problem is this is not reactive. <code>Getters</code> can't recognize the changes happen to the state.</p>
  
  <pre><code>set_add_ons(state, payload) {
          try {
  
              if (!state.tour_plan[state.tour_plan.length - 1].add_ons) {
                  state.tour_plan[state.tour_plan.length - 1].add_ons = [];
              }
              state.tour_plan[state.tour_plan.length - 1].add_ons.push(payload);
  
  
          } catch (error) {
              console.log("ERR", error)
          }
      },
  </code></pre>
  
  <p>How do I convert this to a code which is reactive?</p>