In Vue 3 we can use reactive values in our <style> block just like we can in the <template> block:

<style scoped>
  .button {
    color: v-bind(buttonColor);
  }
</style>

Behind the scenes, Vue uses CSS computed properties (aka CSS variables) scoped to each component.

The CSS remains static, but we can dynamically update the CSS variables whenever the reactive value changes.

More info can be found in the docs.