How to calculate result from dynamic fields - vuejs2

Question

I am trying to calculate a difference between dynamic fields and then add all of the differences. I am using date fields as I need to record the difference between each group of dates and then result would be total number of years. I am providing an example as below
<div id="app">
<form action="">
<div class="group" v-for="(group,id) in groups" :key="id">
<input type="text" v-model="group.from">
<input type="text" v-model="group.till">
<button #click="removeGroup(id)">Remove</button>
</div>
</form>
<button #click="addGroup">add</button>
<h2>Results</h2>
{{ result }}
<pre>{{ $data }}</pre>
So, the idea is that I should be able to calculate the difference between "from" field and "till" field in the groups array but at the same time result should reflect the sum of all differences. I tried with watch but in actual form there are a lot of fields and I might be over thinking. would appreciate some help. here is the vue code
var vm = new Vue({
data: {
groups: [
{
from: '',
till: ''
}
],
},
computed: {
result() {
return 0
}
},
methods: {
addGroup: function () {
var additional = {
from: '',
till: ''
}
this.groups.push(additional)
},
removeGroup: function (id) {
var index = this.groups[id]
this.groups.splice(index, 1)
},
}
}).$mount('#app')

Answer 1

Just use a computed property. Because of groups reactivity any reference to this.groups would trigger an update:
import moment from 'moment'
...
// assuming your date is a string
computed: {
result() {
return this.groups.reduce((group, total) => {
return total + moment(group.from).diff(group.till, 'years')
}, 0)
}
},
Update
Now that I know you're working with dates, I'd suggest a library like moment or fecha. Here's how to calculate differences with moment