How to make css variable reactive and dependent on Vue js variable?

Question

Vue.js

Hello, while styling a linear gradient, I want to change the fill tones using a variable example

--litters-range: 25%;
background: linear-gradient(
          to right,
          white var(--litters-range),
          rgba(87, 87, 87, 0.46) var(--litters-range)
        );

How can I compose a computed property that will change the css variable depending on the Vue js variable

Answer 1

Option 1:

<template>
  <div :style="{ '--litters-range': myComputedProperty }"></div>
</template>

Option 2:

<style>
  div {
    background: linear-gradient(
        to right,
        white v-bind(myComputedProperty),
        rgba(87, 87, 87, 0.46) v-bind(myComputedProperty)
    );
  }
</style>

https://github.com/vuejs/rfcs/pull/231