'Why vue computed property doesn't become reaective?

Some part of my script setup:

    const storyVideo = ref("storyVideo")
    const topBar = computed(() => {
        return 'background-position: ' + (storyVideo?.value?.currentTime / store.instagram.story[store
            .currentStory].duration) * 100 + '% 0;'
    })

storyVideo is a video element with ref="storyVideo" and store points to Pinia store

I assigned it to an element using :style="topBar"

The element style is always background-position: 0% 0; but the variables used in the function change

I tried to log what is returned in this function using a @click and console.log and everything looks properly in logs:

background-position: 9.07100199071002% 0;

Solution 1:^[1]

Looks like your trying to access the element too early, check the documentation https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs

Note that you can only access the ref after the component is mounted. If you try to access input in a template expression, it will be null on the first render. This is because the element doesn't exist until after the first render!

If you are trying to watch the changes of a template ref, make sure to account for the case where the ref has null value:

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	REEL

'Why vue computed property doesn't become reaective?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]