title: Updating an item in an array updates them all
body: <p>I'm working on an application using vuejs with vuex which uses projects, with each project having one or more jobs. </p>
  
  <p>I can add, delete and update the jobs. The adding and deleting is working perfect, but the updating is not.</p>
  
  <p>The state in the vuex dev tools:</p>
  
  <p><a href="https://i.stack.imgur.com/UfeFS.png" rel="noreferrer"><img src="https://i.stack.imgur.com/UfeFS.png" alt="projects"></a></p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="job-compact row" v-for="(job, index) in project.jobs"&gt;
          &lt;div class="col-md-6"&gt;
              &lt;div class="form-group" :class="{'has-error' : errors.has('jobs.' + index + '.function')}"&gt;
                  &lt;input type="text" name="jobs[function][]" class="form-control" v-model="job.function" @change="updateJobValue(index, 'function', $event.target.value)"/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4"&gt;
              &lt;div class="form-group" :class="{'has-error' : errors.has('jobs.' + index + '.profiles')}"&gt;
                  &lt;input type="number" name="jobs[profiles][]" class="form-control" v-model="job.profiles" @change="updateJobValue(index, 'profiles', $event.target.value)"/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
              &lt;button v-if="index == 0" class="btn btn-success btn-sm" @click="addJob"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt;&lt;/button&gt;
              &lt;button v-if="index &gt; 0" class="btn btn-danger btn-sm" @click="deleteJob(index);"&gt;&lt;i class="fa fa-minus"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>As you can see, I have a <code>v-for</code> that is showing all my jobs. When editing a value inside my jobs, I use the <code>@change</code> event to update my value. And, at the bottom, I have two buttons to add and remove a job row.</p>
  
  <p><a href="https://i.stack.imgur.com/ifZlp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ifZlp.png" alt="enter image description here"></a></p>
  
  <p>My stores are divided into modules. The main store looks like this:</p>
  
  <pre><code>import Vue from 'vue'
  import Vuex from 'vuex'
  
  Vue.use(Vuex);
  
  const state = {};
  
  const getters = {};
  
  const mutations = {};
  
  const actions = {};
  
  //Separate Module States
  import jobCreator from './modules/job-creator/store';
  
  export default new Vuex.Store({
      modules: {
          jobCreator: jobCreator
      },
      state,
      actions,
      mutations,
      getters
  });
  </code></pre>
  
  <p>The module store for this specific problem:</p>
  
  <pre><code>import store from './../../store'
  
  const state = {
      project: {
          title: null,
          description: null,
          jobs: []
      },
      defaultJob: {
          function: '',
          title: '',
          description: '',
          profiles: 1,
          location_id: '',
          category_id: '',
          budget: '',
      },
  };
  
  const getters = {}
  
  const mutations = {
  
      addJob(state, job) {
          state.project.jobs.push(job);
      },
      deleteJob(state, index) {
          state.project.jobs.splice(index, 1);
      },
      updateJobValue(state, params) {
          Object.assign(state.project.jobs[params.jobIndex], {
              [params.field]: params.value
          });
      }
  };
  
  const actions = {
      addJob: function (context) {
          context.commit('addJob', state.defaultJob);
      },
      deleteJob: function (context, index) {
          context.commit('deleteJob', index);
      },
      updateJobValue: function (context, params) {
          context.commit('updateJobValue', params);
      },
  };
  
  const module = {
      state,
      getters,
      mutations,
      actions
  };
  
  export default module;
  </code></pre>
  
  <p>The project state is mapped to a computed property of my vue instance:</p>
  
  <pre><code>computed: {
         ...mapState({
             project: state =&gt; state.jobCreator.project,
         }),
  }
  </code></pre>
  
  <p>The problem is the following: In the image of the application, you can see that I entered "vin" in one of the fields, but all of the fields are updating.</p>
  
  <p><a href="https://i.stack.imgur.com/U1hyt.png" rel="noreferrer"><img src="https://i.stack.imgur.com/U1hyt.png" alt="enter image description here"></a></p>
  
  <p>So, all of the <code>function</code> fields of <strong>all</strong> the jobs have been updated to my last entry, instead of only the one I want.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>PS:</p>
  
  <p>I also tried the following in my mutation function:</p>
  
  <pre><code>updateJobValue(state, params) {
      var job = state.project.jobs[params.jobIndex];
      job[params.field] = params.value;
  
      Vue.set(state.project.jobs, params.jobIndex, job);
  }
  </code></pre>
  
  <p>But it's giving me the same result.</p>
  
  <p>UPDATE: As requested, I created a <a href="https://jsfiddle.net/7waqoLxn/24/" rel="noreferrer">jsFiddle</a> to show my problem</p>