I have a component with a specific set of starting data:

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

        }

}

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.

I know I can create a method to reset the data and just manually set all of the data properties back to their original:

reset: function (){

    this.modalBodyDisplay = 'getUserInput';

    this.submitButtonText = 'Lookup';

    this.addressToConfirm = null;

    this.bestViewedByTheseBounds = null;

    this.location = {

        name: null,

        address: null,

        position: null

    };

}

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.

The solution that I thought would work would be to grab the initial data properties in a ready method and then use that saved data to reset the components:

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;

    }

}

But the initialDataConfiguration object is changing along with the data (which makes sense because in the read method our initialDataConfiguration is getting the scope of the data function.

Is there a way of grabbing the initial configuration data without inheriting the scope?

Am I overthinking this and there's a better/easier way of doing this?

Is hardcoding the initial data the only option?