"audio.speaker.volume" not showing right value at startup

[mallar-B]

function Volume() {
    const icons = {
        101: "overamplified",
        67: "high",
        34: "medium",
        1: "low",
        0: "muted",
    }

    function getIcon() {
        const icon = audio.speaker.is_muted ? 0 : [101, 67, 34, 1, 0].find(
            threshold => threshold <= audio.speaker.volume * 100)

        return `audio-volume-${icons[icon]}-symbolic`
    }

    const icon = Widget.Icon({
        icon: Utils.watch(getIcon(), audio.speaker, getIcon),
    })

    const volumeLevel = Variable(Math.round(audio.speaker.volume * 100))

    const volumeLabel = Widget.Label({
        label: volumeLevel.bind().as(vol => " " + vol.toString() + "% ")
    })

    const volumeIndicator = Widget.Box({
        children: [icon, volumeLabel,]
    })

    const volumeUp = () =>{
        audio.speaker.volume += 0.03;
        volumeLevel.value = Math.round(audio.speaker.volume * 100);
    }
    const volumeDown = () =>{
        audio.speaker.volume -= 0.03;
        volumeLevel.value = Math.round(audio.speaker.volume * 100);
    }

    return Widget.EventBox({
        class_name: "volume",
        css: "min-width: 180px",
        child: volumeIndicator,
        onScrollUp: volumeUp,
        onScrollDown: volumeDown,
    })
}

this is the volume module, whenever i call the value of audio.speaker.volume it always shows 0 even if change the value of volumeLevel by hardcoding(e.g. volumeLevel.value+=1 results in showing the volumeLevel to 1) but when I scroll up/down on the EventBox it starts showing the real value of the volume

[mallar-B]

I got the solution after reading the documentation more carefully. I should have created a hook as the function will be called at startup