自定义组件问题

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>简易数字输入框组件</title>
</head>
<body>
    <div id="app">
        <input-number v-model="value" :max="20" :min="0"></input-number>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
<script src="index.js"></script>
</html>

function isValueNumber (value) {
    return (/(^-?[0-9] + \.{1}\d + $) | (^-?[1-9][0-9] * $) | (^-?0{1}$)/).test(value + '');
}
 
Vue.component('input-number', {
    template: '\
    <div class="input-number">\
    <input\
        type="text"\
        :value="currentValue"\
        @change="handleChange">\
        <button \
        @click="handleDown"\
        :disabled="currentValue <= min">-</button>\
        <button \
        @click="handleUp"\
        :disabled="currentValue >= max">+</button>\
    </div>',
 
    props: {
        max: {
            type: Number,
            default: Infinity
        },
        min: {
            type: Number,
            default: Infinity
        },
        value: {
            type: Number,
            default: 0
        }
    },
 
    data() {
        return{
            currentValue: this.value
        }
    },
 
    watch: {
        currentValue: function(val) {
            this.$emit('input', val);
            this.$emit('on-change', val);
        },
        value: function(val) {
            this.updateValue(val);
        }
    },
 
    methods: {
        handleDown: function() {
            if(this.currentValue <= this.min) return;
            this.currentValue -= 1;
        },
        handleUp: function() {
            if(this.currentValue >= this.max) return;
            this.currentValue += 1;
        },
        updateValue: function(val) {
            if(val > this.max) val = this.max;
            if(val < this.min) val = this.min;
            this.currentValue = val; 
        },
        handleChange: function(event) {
            var val = event.target.value.trim();
            var max = this.max;
            var min = this.min;
            if(isValueNumber(val)) {
                val = Number(val);
                this.currentValue = val;
                if(val > max) {
                    this.currentValue = max;
                }else if(val < min) {
                    this.currentValue = min;
                }
            } else {
                event.target.value = this.currentValue;
            }
        }
    },
    mounted() {
            this.updateValue(this.value);
        }
});
 
var app = new Vue({
    el: '#app',
    data: {
        value: 5
    }
})