vue3中有一个方法，在css中使用js里定义的变量

此方法是使用data(){} 中定义的变量，使用setup(){}中的变量会报错，此种方法，还没找出原因，欢迎评论提出

<template>

    <div class="a-div">
      vue3在css中使用js的变量
    </div>

</template>

<script>

export default {
  data() {
    return {
      color: "red",
      font: {
        size: "16px",
        color: "green",
      },
    };
  },
  setup() {

  },
};
</script>

<style  lang="scss" scoped>
.a-div {
  width: 200px;
  height: 200px;
  background: v-bind(color);
  font-size: v-bind("font.size");
  color: v-bind("font.color");
}
</style>

使用setup(){}中的变量   使用defineComponent却可以  具体原因还在研究

<template>
  <div class="a-div">
    vue3在css中使用js的变量
  </div>
  <div class="b-div"></div>
</template>

<script>
import { defineComponent, ref } from "@vue/runtime-core";

export default defineComponent({
  data() {
    return {
      color: "red",
      font: {
        size: "20px",
        color: "green",
      },
    };
  },
  setup() {
    let back = ref("#ddd999");
    return {
      back,
    };
  },
});
</script>

<style  lang="scss" scoped>
.a-div {
  width: 200px;
  height: 200px;
  background: v-bind(color);
  font-size: v-bind("font.size");
  color: v-bind("font.color");
}
.b-div {
  width: 200px;
  height: 200px;
  background: v-bind(back);
}
</style>

欢迎指出问题的所在