Why is the value not assigned to the desired property?

Question

Vue.js

I am writing a player, and it is necessary that the value I need is assigned to the isPulse property.
Section of code where it is not assigned:

onplay () {
this.isPulse = audio.id
},

Full code.

import { Howl } from 'howler'
import { PlayIcon } from 'vue-feather-icons'

export default {
  props: {
    audio: Object
  },
  data () {
    return {
      isTargeted: null,
      isPulse: null
    }
  },
  components: {
    PlayIcon
  },
  computed: {
    loading () {
      return this.$store.getters.loading
    }
  },
  methods: {
    startAudio (audio) {
      const audioTrack = new Howl({
        xhr: { method: 'POST' },
        src: [audio.audio],
        onplay () {
          this.isPulse = audio.id
        },
        onend () {
          this.isTargeted = null
        }
      })

      if (this.isTargeted === null) {
        this.isTargeted = audio.id
        audioTrack.play()
      } else {
        audioTrack.pause()
        this.isTargeted = null
      }
    }
  }
}

Answer 1

It seems to me that the problem is in the loss of context,
try replacing this:

onplay () {
this.isPulse = audio.id
},

on this:

onplay: () => {
this.isPulse = audio.id
},