【报Bug】在css中用v-bind绑定变量控制字体大小，使用rpx单位改变不生效

示例代码：

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title">{{title}}</text>  
        </view>  
        <button type="default" @click="fnChange">点击事件</button>  
    </view>  
</template>  

<script setup>  
    // vue 3.2版本以后ref数据绑定,在script标签中使用setup语法糖  
    import { ref } from 'vue'  
    let obj = ref({name:'李雷'})  
    let title = ref('韩梅梅')  
    //css中绑定变量  
    let color = ref('#ffc300')  
    let fontsize = ref('24rpx')  
    let height = ref('100rpx')  
    //事件  
    const fnChange = () => {  
        //修改或者获取ref绑定的值都要使用(.value)  
        title.value = obj.value.name  
        //改变css绑定的变量值  
        color.value = '#999'  
        fontsize.value = '36rpx'  
        height.value = '300rpx'  
        //调用方法  
        fnClose()  
    }  
    const fnClose = () => {  
        console.log('close')  
    }  
</script>  

<style lang="scss">  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
        height: v-bind(height);  
    }  

    .title {  
        font-size: v-bind(fontsize);  
        /**vue3.2之后可以绑定变量*/  
        color: v-bind(color);  
        margin-bottom:30rpx;  
    }  
</style>

操作步骤：

点击后字体大小没变化

预期结果：

使用rpx单位扔可以生效

实际结果：

使用rpx单位动态改变不生效