Передать значение js переменной в css без наследования?

Question

[Dutymy]

Здравствуйте, когда в vue 3 мы хотим передать значение переменной js в css то используем к примеру

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

а потом в scss background: v-bind(var)
в итоге vue за нас подставляет css переменной в названии которой id переменной который обеспечивает неповторение такой переменной

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

Могу ли я использовать чтото подобное в директиве к примеру

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

так чтоб к названию переменной доставлялся id и чтоб ее можно было получить к примеру v-bind:mydir(var);
Существует ли такое))