Pass value of js variable to css without inheritance?

Question

Vue.js

Hello, when in vue 3 we want to pass the value of the js variable to css, we use for example

data() {
return {
var:"red",
}
}

and then in scss background: v-bind(var)
, as a result, vue substitutes for us the css variable in the name of which is the id of the variable, which ensures that such a variable does not repeat

style attribute {
    --b6cbff56-var: red;
}

Can I use something like this in a directive for example

directives: {
    var: {
     mounted(el) {
        el.style.setProperty("--var", "red");
      },
    },
  },

so that the id is delivered to the variable name and that it can be obtained, for example, v-bind:mydir(var);
Does such a thing exist?)