Can't v-bind a style property to a ref in vuejs 3 SFC

Question

https://vuejs.org/api/sfc-css-features.html#v-bind-in-css

Adjusting the slider should change the image opacity but it doesn't.

What am I missing?

If I use an inline style :style="'opacity:'+o" it works fine.

<script setup>
import { ref } from 'vue'

const o = ref(0.5)
</script>

<template>
  Opacity : {{o}}
  <input type="range" min="0" max="1" step = "0.01" v-model="o">
  <br>
  <img width="500" src= "https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/SMPTE_Color_Bars_16x9.svg/1920px-SMPTE_Color_Bars_16x9.svg.png">
</template>

<style>
  img {
    opacity: v-bind('o.value'));
  }
</style>

SFC Playground example

Answer 1

This works:

  opacity: v-bind(o);

I had an extra close-parenthesis that caused the problem.