vue输入一位数字转汉字

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
<div id="app">
    <div class="container">
        <div class="row">
            <div class="col-md-12" style="padding:50px 200px;">
                    <input type="number" value="" id="inputVal" v-model="message" placeholder="输入数字" class="form-control" style="margin-bottom:30px;">
                    <p>当前输入内容为：{{ chinese }}</p>
            </div>
        </div>
    </div>

</div>
   
<script>
    var vm = new Vue({
        el : "#app",
        data : {
            message : "",
            chinese : ''
        
        },
        methods : {
            toChinese : function(values){
                let chin_list=['一','二','三','四','五','六','七','八','九','十'];//所有的数值对应的汉字
                let sn = parseInt(values);
                this.chinese = chin_list[sn-1];
            }
        },
        watch : {
            message(newVal,oldVal){
                console.log(newVal)
                var reg = /^\d{1}$/;
                if(!reg.test(newVal)){
                    if(newVal == ''){
                        this.message = '';
                        return;
                    }
                    this.message = oldVal
                }else{
                    this.toChinese(newVal)
                }
            }
        }
    })
</script>