Vue/Nuxt not updating component style that is based on computed property on change unless I interact with the component (even by right clicking)

Question

video of the issue: https://www.youtube.com/embed/vQVgV89ze1g

Those little breadcrumbs are categories, black background with white text denotes that a category (or a child of this category) is currently active.

here's a minimal version:

<template>
    <div class="nav-item" :class="{ active }">
        {{ category.name }}
    </div>
</template>

<script lang="ts">
// eslint-disable-next-line import/named
import Vue, { PropType } from 'vue'

export default Vue.extend({
    computed: {
        /**
         * finds if there is a taxon in this taxon's children with the code of
         * current taxon_code route parameter. if there is it means this current taxon is a parent of it.
         */
        active: {
            cache: false,
            get () {
                const currentTaxonCode = this.$route.params.taxon_code

                if (currentTaxonCode) {
                    const result = this.$syliusHelper.taxonHasChildWithCode(this.taxon, currentTaxonCode)
    
                    return result
                }

                return false
            }
        }
    }
})
</script>

<style lang="scss">
.nav-item {
    background-color: white;
    color: black;
    
    &.active {
        background-color: black;
        color: white;
    }
}
</style> 

I also tried changing it into a regular method from computed property - result is same. This only happens when I navigate from one of the children to a top-level category. It doesn't happen when I navigate from top-level category to another top-level category.

update: the issue is only there when using chromium browser, I will update if I find what the root cause is