title: Proper way to re-initialize the data in VueJs 2.0
body: <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>