title: vue js array reset to initial data
body: <p>currently i am trying to do a reset to initial data that is being loaded. Any help is appreciated.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="app"&gt;
      &lt;input v-model="name" type="text"&gt;
      &lt;input v-model="year" type="text"&gt;
      &lt;div v-for="group in groups"&gt;
          &lt;input v-model="group.group_name" type="text"&gt;
          &lt;input v-model="group.remarks" type="text"&gt;
      &lt;/div&gt;
      &lt;button @click="reset"&gt;Click to reset&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>vue js:</p>
  
  <pre><code>const groups = [
      {
          group_name: 'group1 name',
          remarks: 'group1 remarks'
      },
      {
          group_name: 'group2 name',
          remarks: 'group2 remarks'
      }
  ];
  
  const Example = Vue.extend({
      data() {
          return{
              name: 'Creator',
              year: 0,
              groups: groups,
              group: {
                  group_name: '',
                  remarks: ''
              }
          }
      },
      methods: {
          reset () {
              Object.assign(this.$data, this.$options.data.call(this));
          }
      }
  });
  
  new Example({
        el: '#app',
      mounted () {
          setTimeout(() =&gt; this.year = 2001, 1000);
      }
  });
  </code></pre>
  
  <p>when the button triggers the reset function, only the name and year gets reset. how do i get the "group in groups" input to reset as well?</p>