Vue composition API and reactive class

Question

In setup i create something like this:

const abc = reactive(new AnotherClass())
    return {abc}

Further in the component, I can call a method of this class through abc.Func (), or access some field, everything seems to be fine. And here we will imagine the situation: in class constructor we create eventListener, which listens to something, and then sets true or false for one of the class fields. And then a problem arises: if you display this field in the component that the handler should change, you can see that the class fields are not reactive, that is when the handler unambiguously changed the value of the field, this is not visible in the component. Fields are reactive only when you also write reactive for fields inside the class. Why? I made the whole class reactive in setup. Why i also need to write ref and reactive inside the class?

code in component:

<template>
<div style="width: 200px; height: 200px">{{player.audioPlayer.isPlaying}}</div>
</template>

  setup(props) {
    const player = reactive(new AnotherClass())
    return {player}
  },

class:

private _onPlaying = this.onPlaying.bind(this)
constructor() {
    this.audioPlayer = {
        active: false,
        initialized: false,
        element: new Audio(''),
        isPlaying: false,
        currentPlaying: {
                playlist: [],
                index: 0
            }
        }
    this.audioPlayer = reactive(this.audioPlayer) // if comment this, we don't see any changes in component after onPlaying set this to true
    this.init()
}
    
private init(){
    this.audioPlayer.element.addEventListener('playing', this._onPlaying)
    this.audioPlayer.initialized = true
}
    
private onPlaying() {
    this.audioPlayer.isPlaying = true
}

Answer 1

reactive creates a proxy to original instance, so when methods are called on reactive proxy object, they receive it as this.

When listeners are set up in a constructor, they are hard-coded to use original non-reactive this.

In order for a class to be unaware of Vue reactive helpers, it should be designed in a way that allows to use this in a constructor for setting initial data only, not side effects. Callbacks shouldn't be bound to this in constructor, this includes class fields because they are syntactic sugar for constructor body.

It needs to be:

constructor() {
    this.audioPlayer = {...};
    // this.init()
}
    
init(){
    this.audioPlayer.element.addEventListener('playing', () => this.onPlaying())
    this.audioPlayer.initialized = true
}

And used like:

const player = reactive(new AnotherClass())
player.init();