Docs: broken example in State Transitions (?)

[SHxKM]

Referring to: https://vuejs.org/v2/guide/transitioning-state.html#Organizing-Transitions-into-Components

The component I haved, animatedInteger.vue, is basically copied as is from this section of the docs:

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

<script>
import TWEEN from '@tweenjs/tween.js'
export default {
  props: {
    value: {
      type: Number,
      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
      function animate () {
        if (TWEEN.update()) {
          requestAnimationFrame(animate)
        }
      }

      new TWEEN.Tween({ tweeningValue: startValue })
        .to({ tweeningValue: endValue }, 500)
        .onUpdate(function () {
          vm.tweeningValue = this.tweeningValue.toFixed(0)
        })
        .start()

      animate()
    }
  }
}
</script>

And imported, included in components and referenced elsewhere:

<template>
  <div>
    <div>
      <img :src="imgURL">
      <span>{{ name }}</span>
    </div>
    $<animated-integer :value="price" />
  </div>
</template>

<script>
import animatedInteger from '@/components/animatedInteger'
export default {
  components: {
    animatedInteger
  },
  props: {
    name: {
      type: String,
      default: ''
    },
    imgURL: {
      type: String,
      default: ''
    },
    price: {
      type: Number,
      default: 1
    }
  }
}
</script>

Error displayed:

Cannot read property 'toFixed' of undefined

It seems that inside onUpdate(), this.tweeningValue becomes undefined.

[leasontou]

try this

.onUpdate(() => {
      vm.tweeningValue = this.tweeningValue.toFixed(0)
})