title: Vuejs/Vuex How to remove(filter) an Object inside an Array of Objects in vuex state using mutations
body: <p>I'm try to remove an Object inside my nested(Object-&gt;Array-&gt;Objcet) vuex state.</p>
  <p>The scenario of my application is so:</p>
  <p><strong>1.</strong> I will send the request to the back-end to delete a record and then return a response with just a message. Then commit to vuex state<code>UNASSIGN_COURS_AND_TEACHER_TO_CLASSROOM</code>. Everything here works fine.</p>
  <pre><code>    async unassignCoursandTeacher({ commit }, classroom) {
        let response = await Axios.post(
           &quot;/dashboard/school/unassignCoursandTeacher/&quot; + classroom.id, classroom
        );
        let cls = response.data;
        if (
           response.status == 200 ||
           response.status == 201 ||
           response.status == 204
        ) {
           commit(&quot;UNASSIGN_COURS_AND_TEACHER_TO_CLASSROOM&quot;, cls);
           return cls;
        }
      }
  </code></pre>
  <ol>
  <li><p>Now I want to updated <code>singleClassroom</code> State with the help of mutations. But it doesn't remove the delete item in State. Only if I refresh the page. below is how the mutation is setup.</p>
  <pre><code>`UNASSIGN_COURS_AND_TEACHER_TO_CLASSROOM(state, cls) {
      let cours = state.singleClassroom.courses.filter(c =&gt; c.id != cls);
      state.singleClassroom.courses = cours;
   }`
  </code></pre>
  </li>
  </ol>
  <p>Here is the stricture of my data in vuex state:
  <a href="https://i.stack.imgur.com/ETd1m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ETd1m.png" alt="enter image description here" /></a></p>