title: Is there a proper way of resetting a component's initial data in vuejs?
body: <p>I have a component with a specific set of starting data:</p>
  
  <pre><code>data: function (){
      return {
          modalBodyDisplay: 'getUserInput', // possible values: 'getUserInput', 'confirmGeocodedValue'
          submitButtonText: 'Lookup', // possible values 'Lookup', 'Yes'
          addressToConfirm: null,
          bestViewedByTheseBounds: null,
          location:{
              name: null,
              address: null,
              position: null
          }
  }
  </code></pre>
  
  <p>This is data for a modal window, so when it shows I want it to start with this data. If the user cancels from the window I want to reset all of the data to this. </p>
  
  <p>I know I can create a method to reset the data and just manually set all of the data properties back to their original:</p>
  
  <pre><code>reset: function (){
      this.modalBodyDisplay = 'getUserInput';
      this.submitButtonText = 'Lookup';
      this.addressToConfirm = null;
      this.bestViewedByTheseBounds = null;
      this.location = {
          name: null,
          address: null,
          position: null
      };
  }
  </code></pre>
  
  <p>But this seems really sloppy. It means that if I ever make a change to the component's data properties I'll need to make sure I remember to update the reset method's structure. That's not absolutely horrible since it's a small modular component, but it makes the optimization portion of my brain scream. </p>
  
  <p>The solution that I thought would work would be to grab the initial data properties in a <code>ready</code> method and then use that saved data to reset the components:</p>
  
  <pre><code>data: function (){
      return {
          modalBodyDisplay: 'getUserInput', 
          submitButtonText: 'Lookup', 
          addressToConfirm: null,
          bestViewedByTheseBounds: null,
          location:{
              name: null,
              address: null,
              position: null
          },
          // new property for holding the initial component configuration
          initialDataConfiguration: null
      }
  },
  ready: function (){
      // grabbing this here so that we can reset the data when we close the window.
      this.initialDataConfiguration = this.$data;
  },
  methods:{
      resetWindow: function (){
          // set the data for the component back to the original configuration
          this.$data = this.initialDataConfiguration;
      }
  }
  </code></pre>
  
  <p>But the <code>initialDataConfiguration</code> object is changing along with the data (which makes sense because in the read method our <code>initialDataConfiguration</code> is getting the scope of the data function. </p>
  
  <p>Is there a way of grabbing the initial configuration data without inheriting the scope? </p>
  
  <p>Am I overthinking this and there's a better/easier way of doing this? </p>
  
  <p>Is hardcoding the initial data the only option?</p>