vue中css如何使用data中的变量

<template>
    <div class="home" ref="UI">
        <div class="header">hello world</div>
    </div>
</template>
 
<script>
export default {
    data () {
        return {
            color: 'red'
        }
        
    },
    mounted(){
      this.setUI()
    },
    methods:{
        setUI(){
            this.$refs.UI.style.setProperty("--color",this.color);//给变量赋值
        }
    }
}
</script>
<style>
    .home{
 
        .header{
           color: var(--color);  //使用变量
        }
    }
</style>

<template>
    <div class="home" :style="myStyle">
        <div class="header">hello world</div>
    </div>
</template>
 
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
    data () {
        return {
            color: 'red'
        }
        
    },
    computed: {
      myStyle () :object{
        return {
         "--color": this.color,
        }
      }
  },
})
</script>
<style>
    .home{
        .header{
           color: var(--color);  //使用变量
        }
    }
</style>

export default {
	data() {
		return {
			list: []
		}
	},
	methods: {
		init() {
			for(let i = 0; i < 1000; i++) {
				this.list.push({
					key: i,
					name: '张三'
				});
			}
			console.log(this.list);
		}
	},
	created() {
		this.init();
	}
}

const list = [];
for(let i = 0; i < 1000; i++) {
  list.push({
    key: i,
    name: '张三'
  });
}
this.list = list;