vue使用computed动态改变style

<template>
  <div class="boxWrapper" :style="styleVar">
	  <view class="smallBox" @click="click">
		  123
	  </view>
  </div>
</template>
<script>
export default {
  props: {
    background: {
      type: String,
      default: 'green',
    },
  },
  computed: {
    styleVar() {
      return {
        '--box-background': this.background
      }
    }
  },
  data(){
	  return{
	  }
  },
  onLoad() {
  	
  },
  methods:{
	  click(){
		  this.background='red'
	  }
  }
  
}
</script>
<style scoped>
.boxWrapper {
	background-color:var(--box-background);
    height: 100px;
}

.smallBox{
	background-color: #007AFF;
	height: 50px;
	width: 50px;
}
</style>

点击123