vue.js reset data

Resetting the data of a Vue component to its original state

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <input v-model="name" type="text">
  <input v-model="year" type="text">
  <button @click="reset">Click to reset</button>
</div>

CSS

body {
    margin: 20px;
}

input {
    padding: 6px 12px;
    border: 1px solid #ccc;
}

JavaScript

const Example = Vue.extend({
    data: () => ({
        name: 'Creator',
        year: 0,
    }),
    methods: {
        reset () {
            Object.assign(this.$data, this.$options.data.call(this));
        }
    }
});

new Example({
	  el: '#app',
    mounted () {
  	    setTimeout(() => this.year = 2001, 1000);
    }
});