innerWidth is not used for v-if condition

[DevKame]

I have a nav menu that has two buttons for switching items. Those buttons consist of arrow icons provided by fontawesome.

over an innerWidth of 992, the nav is vertical, everything below that makes the na horizontal. So i need an arrow-up for everything over 992 and an arrow-left for below that. I managed to define that as follows:

const smallwindow = computed(() => {
    console.warn("innerWidth:", innerWidth);
    return innerWidth < 992;
});

And within the template it looks like this:

<fa-icon v-if="smallwindow" icon="fa-solid fa-caret-left"></fa-icon>
<fa-icon v-else icon="fa-solid fa-caret-up"></fa-icon>

But no matter the display width, it keeps beeing the caret-up icon. What did i miss?

i also tried to have the innerWidth as a reactive value:

const screenwidth = ref(innerWidth);
const smallwindow = computed(() => {
    console.warn("innerWidth:", screenwidth.value);
    return screenwidth.value < 992;
});

I also tried using a computed property directly for the icon:

const iconvalue = computed(() => {
    let icon: string;
    switch(innerWidth < 992) {
        case true:
            icon = "fa-solid fa-caret-left";
            break;
        case false:
            icon = "fa-solid fa-caret-up";
            break;
    }
    return icon!;
});

with this template: <fa-icon :icon="iconvalue"></fa-icon>

and then it works. but the icon doesnt chagnes dynamicly to changing screensize, i must reload for changes to apply.

[L0st1]

Because innerWidth will not change synchronously when the width decreases. I think IntersectionObserver is a good way, or setInterval.