Vue.js progress bar with values from API call - vue.js

Question

I've got a simple component that pulls data from an API and I would like to add a progress bar that indicates the next data refresh. The API calls are done with a 10 seconds interval and data itself is usually refreshed every minute.
The value for the progress bar is based on date: 2018-12-04T16:10:09.508367Z where I retrieve seconds usingmoment library: moment().diff(2018-12-04T16:10:09.508367Z, 'seconds')
Because this can be a random value the steps for the progress bar are not equal and they don't start from a full bar.
I was wondering if there is a way to improve this?
This is my pseudo code on codesandbox to illustrate that.
<template>
<b-container fluid>
<b-row>
<b-col md="12" class="p-0 fixed-top">
<b-progress
:value="progressCounter"
:max="progressMax"
height="5px"
variant="warning"
>
</b-progress>
</b-col>
</b-row>
<b-row>
<b-col md="12" class="">
{{ progressMax }} / {{ progressCounter }}
</b-col>
</b-row>
</b-container>
</template>
<script>
export default {
name: "ProgressBar",
data() {
return {
progressCounter: 60,
progressMax: 60,
interval: null,
refresh: 10000,
time: 0
};
},
methods: {
getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
},
progress() {
/*
this.time is just a pseudo code here, the real progressCounter is recived from
an API call and seconds are calculated by deducting time from now:
this.progressCounter = 60 - moment().diff(created, 'seconds')
"created" comes from an API call and it's refreshed (~) every minute
*/
if (this.time <= 10) {
this.time = this.getRandomInt(40, 59);
} else {
this.time -= 10;
}
this.progressCounter = this.time;
console.log(
`this.time: ${this.time}, this.progressCounter: ${this.progressCounter}`
);
}
},
mounted() {
this.interval = setInterval(
function() {
this.progress();
}.bind(this),
this.refresh
);
},
beforeDestroy() {
clearInterval(this.interval);
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>