title: Correct way to save changes to backend API with Axios and Vue
body: <p>I have a Vue app with a few form fields and would like to save all changes to a backend database via a REST API using Axios in real-time when a user changes something, without the user having to click a save button.</p>
  
  <p>I have two questions related to this:</p>
  
  <p><strong>#1: What event should I listen to make my send my API calls?</strong></p>
  
  <p>Would it make sense to use a v-on:change binding or does it fire too frequently (on every keystroke)?</p>
  
  <pre><code>&lt;input type="text" v-model="userName" v-on:change="signalChange"&gt;
  
  methods:{
       signalChange: function(evt){
          axios.put(this.getRootURL + 'app/save.php', {
          recordId: this.$route.params.recordid,
          userName: this.userName
        }).then(response =&gt; {
          console.log("Change saved...")
        }).catch(e =&gt; {
          console.log("Error... ")
      }
  }
  </code></pre>
  
  <p><strong>#2: Should I somehow queue changes to make sure the last change is saved last?</strong></p>
  
  <p>Let's say that I have a toggle button to enable or disable a user. Axios is asynchronous so if they user quickly hits the toggle button back/forth many times it might be that the last change is not saved last on the server if there is latency, etc. Then the UI and backend will be out of sync.</p>
  
  <p>Should I develop my own Sync utility that saves my changes into a queue array and waits each change to be completed before sending the next change to the server? Are there any existing libraries or code templates for this?</p>
  
  <p>Thanks!</p>