Vue で script で算出した数値・文字列を CSS で利用したい

後で修正します。ポイントは CSS変数をDOMに動的に当てる ところです。
ここに気づけずけっこうハマりました。。。

<template>
  <div class="test" :style="styles">
    <input v-model="color" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  data() {
    return {
      color: 'black',
    };
  },
  computed: {
    styles() {
      return {
        '--color': this.color,
      };
    },
  },
});
</script>

<style lang="scss" scoped>
$size: 10px;

.test {
  --color: black;  // ここは必ず指定
  color: var(--color);
  font-size: $font-size; // もちろん SCSS の変数とも併用できます。
}
</style>

Options API だけでなく、 Class API でも動作します。もちろん、 Nuxt でも OK です。
安全性のために、 以下の2点は必ず実施してください。

• デフォルト値の設定（万が一 computed が壊れた等して値が飛んでこなかったら事故に繋がります）
• SASS系なら対象のスコープを限りなく狭めて使う（想定外の影響を避けてください）