Proper way to re-initialize the data in VueJs 2.0
<p>I was going through this answer on SO : <a href="https://stackoverflow.com/questions/35604987/is-there-a-proper-way-of-resetting-a-components-initial-data-in-vuejs">Is there a proper way of resetting a component&#39;s initial data in vuejs?</a></p>

<p>However, the current method is not allowed now and VueJS prohibits changing the $data var.</p>

<p>As you can see here in this <a href="https://github.com/vuejs/vue/issues/2873" rel="noreferrer">https://github.com/vuejs/vue/issues/2873</a> ( $data is not allowed to be modified. )</p>

<p>So if I try the above method, I am getting a VueJS warning: </p>

<blockquote>
  <p>[Vue warn]: Avoid replacing instance root $data. Use nested data
  properties instead.</p>
</blockquote>

<p>Here is my JS code, </p>

<pre><code>function initialState () {
        return {
            h2: 0,
            ch4: 0,
            c2h6: 0,
            c2h4: 0,
            c2h2: 0,
            c3h8: 0,
            c3h6: 0,
            co: 0,
            co2: 0,
            o2: 0,
            n2: 0,
            selected: ''
        }
    }
    export default {
        name: 'something',
        data () {
            return initialState() // This is working fine 
        },
        computed: {
            tdcg: function () {
                // some logic here...
            }
        },
        methods: {
            resetFields: function () {
                this.$data = initialState() // --&gt; This is what I want to achieve!
            }
        }
    }
</code></pre>

<p>So what is the correct and the easiest way of re initialising  my data?</p>