title: Resetting to initial data in Vue
body: <p>I've got some form data that I display using a readonly <code>input</code> that is styled to look like plain text. When users click an edit button, they can then edit the inputs and either save or cancel. </p>
  
  <p>My issue is obviously that when a user clicks cancel, the data they entered into the input remains (even though it isn't saved to the DB). I'm trying to figure out a way to reset the input to its initial data. I'm aware of <a href="https://stackoverflow.com/questions/40340561/proper-way-to-re-initialize-the-data-in-vuejs-2-0/40856312#40856312">this answer</a>, but it doesn't seem to work because the data is fetched on creation.</p>
  
  <p><a href="https://jsfiddle.net/z60etaqf/7/" rel="nofollow noreferrer">This fiddle</a> is similar except for the fact that the data in the real app comes from an axios call. The equivalent call is essentially:</p>
  
  <pre><code>  fetch() {
        axios.get(this.endpoint)
          .then(({data}) =&gt; {
            this.name = data.data;
          });
      }
  </code></pre>
  
  <p>Annoyingly, the fiddle actually works. However in my actual implementation it doesn't. The only difference with the app is that the data is an array. </p>
  
  <p>How can I make this work?</p>
  
  <p><a href="https://jsfiddle.net/z60etaqf/21/" rel="nofollow noreferrer">This fiddle</a> represents what my code actually does.</p>