Vue3 reactivity and proxy objects behaving apparently random - vuejs3

Question

I am having difficulties with Vue 3 reactivity and proxy objects. I am using Option API and I have a Vue Component that on button click execute following code
submitUser() {
let userCreated;
userCreated = {
id: this.user_tomodify.id,
firstName: this.firstName,
lastName: this.lastName,
email: this.email,
username: this.username,
};
this.$emit("onuserSubmitted", userCreated, this.usertype);
this.hide();
},
Now the code just create an object starting from the data of the component, firstName lastName etc are all v-model of input elements. The method called in the parent component emitting "onuserSubmitted" is the following
addUser(new_user, u_type) {
this.users[u_type].push(new_user);
MevoLogger.debug(this.users[u_type]);
}
Where this.users is an Object that associated to the field contained in u_type variable some arrays. For better undestanding this is the computed property:
users() {
switch (this.role) {
case "ROLE_SECRETARY":
return {
STUDENT: this.students,
TEACHER: this.teachers,
};
case "ROLE_TECHNICIAN":
return {
STUDENT: this.students,
TEACHER: this.teachers,
SECRETARY: this.secretaries,
};
case "ROLE_ADMIN":
return {
STUDENT: this.students,
TEACHER: this.teachers,
SECRETARY: this.secretaries,
TECHNICIAN: this.technicians,
ADMIN: this.admins,
};
And i have a list in the page rendered with v-for = user in users[type]
The problem I am having is that apparently without any reason, when I push new_user in the array sometimes Vue create a normal object and sometimes a Proxy object ( i checked this printing in the browser console the users[u_type] array so i'm sure that this is the problem, literally randomly i see sometimes added a Proxy while sometimes a normal {} object), in the first case reactivity is not triggered and so i don't see in the page the new item added, in the second case reactivity works and page is updated. How is that even possible? What can I do in order to make it always create Proxy Objects?

Answer 1

If users is a computed property - it is readonly by design so if you somehow change it, its value will be recalculated/rebuilt on the next re-render. Or it might not change at all. You should push to the underlying array(s) - not to the computed property. E.g. push to students, teachers, etc.
For example:
addUser(new_user, u_type)
{
{
STUDENT: this.students,
TEACHER: this.teachers,
SECRETARY: this.secretaries,
TECHNICIAN: this.technicians,
ADMIN: this.admins,
}[u_type].push(new_user);
}