multiple dynamic countdown timers vue js on laravel - vuejs2

Question

I would like to have a countdown timer for each of my auction items, these auctions can and will be loaded dynamically.
Ideally {{ auction.total_bids }} would be the countdown, this will need to be reset to a value i can set on a click event.
My code so far, is as followed:
<template>
<div>
<h1>Live Auctions</h1>
<ul class="row">
<li class="col-lg-4" v-for="(auction, key, index) in auctions" :key="auction.id">
<span>{{ auction.name }} ({{ auction.id }})</span><br />
<span ref="bitTime">{{ auction.bid_time }}</span><br />
<span ref="totalBids">{{ auction.total_bids }}</span><br />
<span ref="user">{{ auction.username }}</span><br />
<button ref="newBid" #click="bidOnThis(auction.id, key)">Bid on this item</button>
</li>
</ul>
</div>
</template>
<script>
export default {
props : {
date : {
type: Number,
coerce: str => Math.trunc(Date.parse(str) / 1000)
}
},
data() {
return {
auctions: [],
newBid: '',
totalBids: '',
user: []
};
},
created() {
axios.get('/auctions').then(result => {
this.auctions = result.data
});
axios.get('/getuser').then(result => {
this.user = result.data;
});
window.Echo.channel('auction').listen('AuctionUpdated', ({ auction, username, key }) => {
this.$refs.totalBids[key].innerHTML = parseInt(this.$refs.totalBids[key].innerHTML) + 1 ;
this.$refs.user[key].innerHTML = username ;
});
},
methods: {
bidOnThis(id, key) {
axios.post('/auctions', { id: id, key: key });
this.$refs.totalBids[key].innerHTML = parseInt(this.$refs.totalBids[key].innerHTML) + 1 ;
this.$refs.user[key].innerHTML = this.user.username ;
}
}
};