<template>
    <div class="binav" ref="binav">   

        <div class="nav-content" ref="content">
            <component :is="item" v-for="(item, index) in slotItems" :class="getClass(index)" :key="index" />
        </div>  

    </div>
</template>

<script setup>

const slots = useSlots()
const slotItems = ref([])
const content = ref(null)
const binav = ref(null)

onMounted(() => {
    slotItems.value = slots.default ? slots.default() : []

    const contentWidth = getComputedStyle(binav.value).getPropertyValue('--content-width')
    content.value.style.maxWidth = contentWidth  
})

function getClass(index) {
    return {
        'left': index === 0,
        'right': index === 1,
    }
}

</script>

<style scoped lang="sass">
.binav
    display: flex
    align-items: center
    user-select: none
    width: 100%
    
    .nav-content
        display: flex
        justify-content: space-between
        align-items: center

        // custom
        max-width: 100%
        width: 100%
        margin-inline: auto

        .left
            justify-content: flex-start
                
        .right
            justify-content: flex-end
</style>

Here I have a custom navigation component. It splits the content into two divs, left and right. It when mounting it checks for custom CSS tags and uses them to center align the nav. Though when I make changes to the custom CSS tags it doesnt trigger the Vue hot reload. I have tried adding watchers on various parts of the nav ref but nothing I can find works. I have many components that use this functionality and want them to trigger hot reloads like traditional CSS.

I know this is possible but I’m not all that familiar with Vue’s reactivity system under the hood. I think there is some proxy I can watch somewhere but don’t know what it is? Anyone know how to do this?

I have tried adding watchers and using the ‘change’ event listener on the binav reference I have set up.