Vue 3 reactive anti-pattern

Question

I would like to ask about Vue 3 reactivity system. Im working with Vue 3 for some time. But today, I saw something I have never seen before. Our senior dev wrote something like this

const store = reactive({
    ...

    async loadItems(){
        // async call with updating store properties - this.xxx = ...
    },
    async loadSingleItem(id){
        // async call with updating store properties - this.xxx = ...
    },

    async updateItem(item){
        // async call with updating store properties - this.xxx = ...
    }
});

If Im not mistaken, this should be anti-pattern right? Or am I missing something?

Thank you

Answer 1

In my experience making reactive an instance of a class is totally ok, but rather I prefer making reactive props and an instance non-reactive. That way you can mutate an instance inside its class and it will trigger reactive effects. Otherwise I would relax if it's working, it's always possible to reconcile it later and optimize.