Is there a proper way of resetting a component's initial data in vuejs?

extract the initial data into a function outside of the component use that function to set the initial data in the component re-use that function to reset the state when needed.

// outside of the component: function initialState (){ return { modalBodyDisplay: 'getUserInput', submitButtonText: 'Lookup', addressToConfirm: null, bestViewedByTheseBounds: null, location:{ name: null, address: null, position: null } } } //inside of the component: data: function (){ return initialState(); } methods:{ resetWindow: function (){ Object.assign(this.$data, initialState()); } }

Caution, Object.assign(this.$data, this.$options.data()) does not bind the context into data().

So use this:

Object.assign(this.$data, this.$options.data.apply(this))

cc this answer was originally here

To reset component data in a current component instance you can try this:

Object.assign(this.$data, this.$options.data())

Privately I have abstract modal component which utilizes slots to fill various parts of the dialog. When customized modal wraps that abstract modal the data referred in slots belongs to parent component scope. Here is option of the abstract modal which resets data every time the customized modal is shown (ES2015 code):

watch: {
    show (value) { // this is prop's watch
      if(value) {
        Object.assign(this.$parent.$data, this.$parent.$options.data())
      }
    }
}

You can fine tune your modal implementation of course - above may be also executed in some cancel hook.

Bear in mind that mutation of $parent options from child is not recommended, however I think it may be justified if parent component is just customizing the abstract modal and nothing more.

If you are annoyed by the warnings, this is a different method:

const initialData = () => ({}) export default { data() { return initialData(); }, methods: { resetData(){ const data = initialData() Object.keys(data).forEach(k => this[k] = data[k]) } } }

No need to mess with $data.

I had to reset the data to original state inside of a child component, this is what worked for me:

Parent component, calling child component's method:

<button @click="$refs.childComponent.clearAllData()">Clear All</button >
       
<child-component ref='childComponent></child-component>

Child component:

defining data in an outside function, referencing data object by the defined function defining the clearallData() method that is to be called upon by the parent component

function initialState() {
  return { 
    someDataParameters : '',
    someMoreDataParameters: ''
  }
}

export default {
   data() {
    return initialState();
  },
methods: {
  clearAllData() {
    Object.assign(this.$data, initialState());
},

There are three ways to reset component state:

Define key attribute and change that Define v-if attribute and switch it to false to unmount the component from DOM and then after nextTick switch it back to true Reference internal method of component that will do the reset

Personally, I think the first option is the clearest one because you control the component only via Props in a declarative way. You can use destroyed hook to detect when the component got unmount and clear anything you need to.

The only advance of third approach is, you can do a partial state reset, where your method only resets some parts of the state but preserves others.

Here is an example with all the options and how to use them: https://jsbin.com/yutejoreki/edit?html,js,output