update DOM only after submit form vue.js - vue.js

Question

I have a form with two checkboxes. each of them are related to an object to change its props 'is_active' on true or false. on click, DOM updates immediatly : if checked, object appears and if not, disappears. on submit, object is persisted in database.
<form #submit.prevent="submit()">
<div v-for="(checker_website, index) in website.checkers" :key="index">
<input type="checkbox" class="mr-2" :id="index" :true-value="1" :false-value="0" v-model="website.checkers[index].is_active">
<label :for="index">{{checker_website.checker.name}}</label>
</div>
<div class="text-right mt-5">
<button class="save flex font-semibold py-2 px-4 rounded">Enregistrer</button>
</div>
</form>
submit() {
axios.post('/app/store',{websites: this.websites})
},
also, I have a {{total}} prop which is updated after any change on checkbox. it is calculated this way :
computed: {
total() {
let total = 0;
this.websites.forEach(website => {
website.checkers.forEach(checker => {
if (checker.is_active === 1 && checker.checker.status === 1) {
total += checker.checker.price
}
})
})
return total
}
},
and displayed like this :
<span class="p-6">
Total mensuel : {{total}}€/HT
</span>
what I want is to update DOM right after the submit and I find no way to do that. any help will be very appreciated !

Answer 1

One solution is to convert the total computed prop into a data property that gets updated on submit:
export default {
data() {
return {
total: 0,
}
},
computed: {
// total() {⋯} // now a data property
},
methods: {
submit() {
this.total = this.getTotal()
},
getTotal() {
let total = 0
this.websites.forEach(website => {
website.checkers.forEach(checker => {
if (checker.is_active === 1 && checker.checker.status === 1) {
total += checker.checker.price
}
})
})
return total
},
},
}
demo