Rerender list in vue.js 2 - vue.js

Question

I use moment.js to display how many time has passed from some event.
I have a list (rendered using vue.js)
event 3, 5 seconds ago
event 2, 1 minute ago
event 1, 5 minutes ago
The problem is: list is not updated frequently (new items are added, for example, every 2 minutes).
I want to update n (seconds|minutes) ago strings.
Should I do simple loop using setInterval?
for(let i = 0; i < this.list.length; i++) {
let item = this.list[i];
item.created_at_diff = moment(item.created_at).fromNow();
this.$set(this.list, i, item);
}
or there is a better approach?

Answer 1

Here is how I would do such a thing, tell me if I am wrong:
First, I would create a component that will make the timer:
let Timer = Vue.extend({
template: '#timer',
props: ['timestamp'],
data () {
return {
formatted: ''
}
},
methods: {
format () {
let self = this
this.formatted = moment().to(moment(this.timestamp,'X'))
// Uncomment this line to see that reactivity works
// this.formatted = moment().format('X')
setTimeout(() => {
self.format()
},500)
}
},
created () {
this.format()
}
})
The timer takes one property, a UNIX timestamp in seconds. The component contains one method called format() that will update the only data formatted of the component. The method is recursive and calls itself every 500ms (with the setTimeout()), you can make this number bigger if you want.
Here is a jsFiddle I made if you want to test it:
https://jsfiddle.net/54qhk08h/