Vue animated number component

animated-number.component.js

Vue.component('animated-number', {
    name:     'animated-number',
    template: '<span :class="[classes]">{{ displayNumber }}</span>',
    props:    {
        number: {
            type:    Number,
            default: 0
        },
        speed: {
            type:    Number,
            default: 10
        },
        classes: {
            type:    String,
            default: ''
        }
    },

    data: function() {
        return {
            displayNumber: 0,
            interval:      false
        };
    },

    ready:function(){
        this.displayNumber = this.number ? this.number : 0;
    },

    watch: {
        number: function(){

            clearInterval(this.interval);

            if(this.number === this.displayNumber){
                return;
            }

            this.interval = window.setInterval(function(){
                if(this.displayNumber !== this.number){
                    var change = (this.number - this.displayNumber) / 10;

                    change = change >= 0 ? Math.ceil(change) : Math.floor(change);
                    this.displayNumber = this.displayNumber + change;
                }
            }.bind(this), this.speed);
        }
    }
});