Vue 实时显示输入的字数

最近做项目需要查看用户输入的字数的长度，之前原生写过一个：

<template>
<textarea v-model="userinput"  placeholder="请输入您要表达的情感" maxlength="240" @input="descInput"></textarea>
<span>{{remnant}}/240</span>
</template>
<script>
export default {
    data() {
        return {
          userinput: '' // 客户输入的内容
        }，
        methods:{
            descInput() {
                let txtVal = this.userinput.length;
                this.remnant = 240 - txtVal;
            }
        }，
        watch:{
            userinput(curVal, oldVal){
                if (curVal.length >= 240) {
                    this.remnant = 0；
                    this.userobjet = curVal.substring(0,240)；
                }
            }
       }
    }
</script>

下面是原生的写法，这个代码有很大的问题就是：假如用户在输入状态，计时器会一直运行，时间久了会跑死代码，所以不提倡

$scope.checknum = function () {
    var nMax = 240;
    var textDom = document.getElementById("textarea");
     var len;
    $scope.Timer = $interval(function () {
    len = textDom.value.length;
         if (len > nMax) {
        textDom.value = textDom.value.substring(0, nMax);
        return false;
         }
         console.log('获取焦点事件');
         $("#now-num").text(len);
    }, 400);
 }
$scope.cancelTimer = function () {
    console.log('失去焦点事件');
    $interval.cancel($scope.Timer);
}