title: Vue JS - Modifying object in for loop not updating live
body: <p>So I have a loop of objects and I want to set flags on them so that I can change their "state" to "being edited" "newly created" etc and show the proper fields depending on the state. Here is my code:</p>
  
  <pre><code>&lt;tr v-for="application in editForm.applicationsSelected" :key="application.id"&gt;
      &lt;!-- Name --&gt;
      &lt;td style="vertical-align: middle;" v-if="!application.fresh"&gt;
          {{ application.name }}
      &lt;/td&gt;
      &lt;td style="vertical-align: middle;" v-if="application.fresh"&gt;
          &lt;select class="form-control" name="application_id" v-model="application.id"&gt;
              &lt;option value="" selected disabled&gt;Select One&lt;/option&gt;
              &lt;option v-for="application in applications" v-bind:value="application.id"&gt;{{ application.name }}&lt;/option&gt;
          &lt;/select&gt;
      &lt;/td&gt;
  
      &lt;!-- Appliction User ID --&gt;
      &lt;td style="vertical-align: middle;"  v-if="!application.isEditing &amp;&amp; !application.fresh"&gt;
          {{ application.pivot.application_user_id }}
      &lt;/td&gt;
      &lt;td style="vertical-align: middle;"  v-if="application.isEditing || application.fresh"&gt;
          &lt;input type="text" class="form-control" id="application_user_id" v-model="application.pivot.application_user_id" /&gt;
      &lt;/td&gt;
  
      &lt;!-- Edit User Application --&gt;
      &lt;td style="vertical-align: middle;" v-if="application.isEditing"&gt;
          &lt;a class="action-link" @click="updateUserApplication(application, editForm.id)"&gt;
              Save
          &lt;/a&gt;
      &lt;/td&gt;
      &lt;td style="vertical-align: middle;" v-if="application.fresh"&gt;
          &lt;a class="action-link" @click="attachUserApplication(application, editForm.id)"&gt;
              Save
          &lt;/a&gt;
      &lt;/td&gt;
      &lt;td style="vertical-align: middle;" v-if="!isEditing &amp;&amp; !application.fresh"&gt;
          &lt;a class="action-link" @click="application.isEditing = true"&gt;
              Edit
          &lt;/a&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>The important part is the edit button on the bottom. I want to set the objects "isEditing" flag to true and then show the input fields for that row. However, its simply not working. It will change the state of the application but not update the code till i close the modal and open it back up again (which forces a refresh of the application objects).</p>
  
  <p>Also I plan on changing this to one property that takes on string "states" instead of changing multiple flags, however, for now I can't get the basic step down. Why is it that changing application.isEditing to true on click isn't switching which fields i see?</p>