Vue Animated integer/float component

AnimatedInteger.vue

<template>
  <span>{{ tweeningValue }}</span>
</template>

<script>
  import TWEEN from 'tween.js';

  export default {
    name: 'animated-integer',
    props: {
      value: {
        required: true,
      },
    },
    data() {
      return {
        tweeningValue: 0,
      };
    },
    watch: {
      value(newValue, oldValue) {
        this.tween(oldValue, newValue);
      },
    },
    mounted() {
      this.tween(0, this.value);
    },
    methods: {
      tween(startValue, endValue) {
        const vm = this;
        let animationFrame;

        function animate(time) {
          animationFrame = requestAnimationFrame(animate);
          TWEEN.update(time);
        }

        const t = new TWEEN.Tween({ x: startValue })
          .to({ x: endValue }, 100)
          .onUpdate(function _() {
            vm.tweeningValue = parseFloat(this.x.toFixed(2));
          })
          .onComplete(() => {
            cancelAnimationFrame(animationFrame);
          });

        t.start();
        animationFrame = requestAnimationFrame(animate);
      },
    },
  };
</script>