Vue3 reactivity and proxy objects behaving apparently random

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);
}