Vue update a div by id

@tkd5041

might be worth posting more of your vue component as it would be clearer whats going on.

so I have a list if items that are being bid on. if someone bids on an item I want to update that item with the current bid and bidder...

I render that in this code. so each item gets a unique item id and ref based on the item number. so id="item48" ref="item48", id="item49 etc... I just want to update that specific item.

I load the template during a Blade @foreach loop...

<template>
    
        <div v-if="item.current_bid == 0" :id="'item'+item.id" :refs="'item'+item.id">
            <div>
                <b>Minimum Bid: </b><span class="text-danger mr-2 float-right">${{ item.initial_bid }}.00</span>
            </div>
        </div>
        <div v-else :id="'item'+item.id" :refs="'item'+item.id">
            <div>
                <b>Bidder: </b><span class="text-muted mr-2 float-right"><mark> {{ item.username }} </mark></span>
            </div>
            <div>
                <b>Current Bid: </b><span class="text-success mr-2 float-right">${{item.current_bid }}.00</span>
            </div>
            <div>
                <b>Minimum Next Bid: </b><span class="text-danger mr-2 float-right">${{ item.current_bid + item.increment }}.00</span>
            </div>
        </div>
   
</template>
 <script>
 export default({
    props: {
        item: {
        type: Object,
        default: [],
        },
     },
 })
 </script>

that renders the code I have above.

update equals a string that contains "Bidder: bidder... etc.. I want to update that specific item information.

I also have another template that loads the latest bids in a column. It has a listen event. When that is triggered i call an axios get to get the new information on that specific item, I then want to use that information to update the item on the page by the item id:

<template>
    <div class="current-bids">
        <LatestBids :bids="bids" />
    </div>
</template>
<script>
import LatestBids from './LatestBids';

import Toaster from 'v-toaster'
import 'v-toaster/dist/v-toaster.css'
Vue.use(Toaster, {timeout: 5000})

export default {
    data() {
        return {
            bids: [],
            item: [],
        };
    },
    mounted() {
        axios.get('/bids')
        .then((response) => {
            this.bids = response.data;
        //console.log(response);
        });
        window.Echo.channel('bids')
            .listen('NewBid', (e) => {
                // update latest bids
                this.bids = e.bids;

                // notify everyone of new bid
                this.$toaster.info(e.bids[0].username+' has bid $'+e.bids[0].current_bid+'.00 on item: '+e.bids[0].title+'`!');
                
                // get data on item so we can update the item to the new bidder information
                axios.get('/item/'+e.bids[0].item_id)
                    .then ((response) => {
                        var id = response.data.id;
                        var update = response.data.update;
                        console.log(id, update);
                        this.$refs.id.innerHTML = update;
                    });
            });
    },
    components: {
        LatestBids
    }
}
</script>

when that runs I get the error above.

How do I specify the one item I want to update?

When I use the $refs.id it does not define id... whereas when I get the data back on my console log it shows for example, item48.

I hardcoded in this.$refs.item48.html = update and it didn't replace the element. I also tried this.refs.item48.html and innerHTML etc and its not updating.