Why can't I access my dynamically inserted attribute in my Object via Vue.js?

I have a data method thats setup like this:

data () {
     return {
          live_count: null,
          queue: null,
     }
}

In my mounted method I retrieve data for my queue attribute. The data structure of my queue is there are objects inside it, and each object has an array of objects. (look at screenshot below)

Now after my retrieve is completed I periodically check if some timestamps are greater than 1 hour ago and set either true/false on a new attribute like so:

axios
.get(`/my-queue`)
    .then(response => {
        this.queue = response.data.queue
    })
    .catch(error => {
        console.log(error)
        this.errored = true
    })
    .finally(() => {
        this.loading = false;
        this._timer = setInterval(() => {
            console.log('check queue rows');
            const anHourAgo = Date.now() - (60 * 60 * 1000)
            for (const [lane_id, items] of Object.entries(this.queue)) {
                console.log('lane id: ' + lane_id);
                for(const item of items) {
                    item.past_grace = item.queue_entry_time_ms > anHourAgo
                }
            }
        }, 1000)
    });

In my Vue.js component when I iterate over my queue object I can read/diplay the items from the queue fine, e.g. queue_entry_time_ms, but when I print out past_grace nothing is shown.

Here is what my code looks like:

<template v-for="(lane, lane_id) in queue">
    <template v-for="(item, index) in lane">
        {{ item.queue_entry_time_ms }} <!-- this prints fine -->
        {{ item.past_grace }} <!-- this doesnt -->
    </template>
</template>

In the Vue.js debugger I can see the attribute is set like below:

Is there something I am doing wrong?