uniapp textarea 字数显示问题

效果：

代码:

<template>
    <view style="padding:0 30rpx;">
        <view class="title">
            订单备注
        </view>
        <view class="bgc">
            <textarea class="p-20" placeholder="在此输入订单信息"  placeholder-class="placeholder" maxlength="200" @input = "submit" v-model="name" />
            <view class="num"><text style="color: #FB231F;">{{remnant}}</text>/200</view>
        </view>
        <view class="submit">
            确认
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                name:'',
                remnant:0
            }
        },
        methods: {
            submit(e){
                this.remnant = e.detail.value.length
            }
        }
    }
</script>

<style lang="scss" scoped>
    page {
        background-color: #fff;
    }
    .title {
        padding: 30rpx 0;
        color: #333;
        font-size: 40rpx;
        font-weight: bold;
    }
    .bgc {
        width: 690rpx;
        height: 382rpx;
        padding: 30rpx;
        background: #F9F9FB;
        opacity: 1;
        border-radius: 24rpx;
    }
    .placeholder {
        font-size: 32rpx;
        color: #C4C4C4;
    }
    .num {
        font-size: 32rpx;
        color: #aaa;
        display: flex;
        justify-content: flex-end;
    }
    .submit {
        color: #fff;
        font-size: 32rpx;
        text-align: center;
        width: 530rpx;
        line-height: 88rpx;
        background: linear-gradient(93deg, #F97C55 0%, #F44545 100%);
        opacity: 1;
        border-radius: 44rpx;
        margin: 90rpx auto;
    }
</style>