Reset a const variable to its default value in vue - vue.js

Question

How can I reset the value of my constant variable in vue? Here is what I meant:
data(){
const _hdrList = [
{
label: 'start_time',
value: 'start_time'
},
{
label: 'name',
value: 'name'
},
{
label: 'another',
value: 'another'
},
];
const _cboList = [
{start_time:''},
{name:''},
{another:''},
];
return{
hdrList:_hdrList,
headercbo:_cboList,
columns:[],
}
}
After that, I access it using the following:
<tr>
<th v-for="(col, index) in columns" :key="index.id">
<ui-select
:options="hdrList"
v-model="headercbo[index][hdrList[index]['label']]"
></ui-select>
</th>
</tr>
The output of this one is like this:
And when I click the clear button, this combo lists are not reverting back to default which it displays an empty or no selected value. Here's how I do it.
clearFields(){
this.columns = [];
this.headercbo = [];
}
But this one does not clear the fields, they still have the previous selected value with them. How can I totally clear them up and set backs to default.

Answer 1

Move the constant out of data.
During reset, you've reassign the default headercbo value with the constant value.
const _hdrList = [
{
label: 'start_time',
value: 'start_time'
},
{
label: 'name',
value: 'name'
},
{
label: 'another',
value: 'another'
},
];
const _cboList = [
{start_time:''},
{name:''},
{another:''},
];
export default {
data(){
return{
hdrList:_hdrList,
headercbo:_cboList,
columns:[],
}
},
clearFields() {
this.columns = [];
this.headercbo = _cboList;
}
}

Answer 2

Put what you have in your data function into a method named initialData, then use that function in your data function and in your clearFields method.
data() {
return this.initialData();
},
methods: {
initialData() {
const _hdrList = [{
label: 'start_time',
value: 'start_time'
},
{
label: 'name',
value: 'name'
},
{
label: 'another',
value: 'another'
},
];
const _cboList = [{
start_time: ''
},
{
name: ''
},
{
another: ''
},
];
return {
hdrList: _hdrList,
headercbo: _cboList,
columns: [1,2],
}
},
clearFields() {
this.columns = [];
this.headercbo = this.initialData().headercbo;
}
}