title: VueJS - how to delay data item updating?
body: <p>Not sure how to title this question, but here's my situation: I have an array of objects. Among other fields, the objects have a <code>date_beginning</code> and a <code>date_ending</code> field. In presenting my array of objects, I break them into two groups -- first group has a value in <em>only</em> the <code>date_beginning</code> while the second group has a value in <em>both</em> the <code>date_beginning</code> <strong>and</strong> the <code>date_ending</code> fields. </p>
  
  <p>Something like:</p>
  
  <pre><code>// Only date_beginning present
  Object 1
  Object 2
  Object 3
  
  // Has both date_beginning and date_ending
  Object 4
  Object 5
  Object 6
  Object 7
  </code></pre>
  
  <p>Now, I have an <code>Edit</code> button on each array item that, when clicked, will present a form for the user to edit <em>both</em> dates. The user edits the dates, then hits <code>SAVE</code> and the app will issue a <code>PATCH</code> request to the backend server to update the record in the database.</p>
  
  <p><strong>Here's my problem:</strong></p>
  
  <p>If a user enters a date in the <code>date_ending</code> in any object in the first group, as soon as the user finishes entering the date, the object is <em>immediately</em> moved to the second list. I understand this is VueJS "doing its job". But, the problem this creates is that the user hasn't had a chance to click "Save" which means it hasn't been saved to the backend, and further the object they just edited is now in a different list, so they have to go find it again to continue editing the object and to click Save. </p>
  
  <p>Hopefully that makes sense. So I'm trying to figure out a better way to somehow delay the update to the object itself, or hide this update from VueJS somehow so that the object doesn't get auto-sorted into the second list.</p>
  
  <p>Any ideas?</p>