vue js数组重置为初始数据

Question

当前，我正在尝试对正在加载的初始数据进行重置。任何帮助表示赞赏。

html：

<div id="app">
    <input v-model="name" type="text">
    <input v-model="year" type="text">
    <div v-for="group in groups">
        <input v-model="group.group_name" type="text">
        <input v-model="group.remarks" type="text">
    </div>
    <button @click="reset">Click to reset</button>
</div>

vue js：

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(() => this.year = 2001, 1000);
    }
});

当按钮触发重置功能时，仅名称和年份被重置。我该如何重设“分组分组”输入？

Answer 1

更改重置功能添加组对象

const Example = Vue.extend({
                data() {
                    return{
                        name: 'Creator',
                        year: 0,
                        groups: groups

                    }
                },
                methods: {
                    reset () {
                        this.groups =  [
                            {
                                group_name: '',
                                remarks: ''
                            }
                        ]
                    }
                }
            });