title: Vue3 reactivity and proxy objects behaving apparently random
body: <p>I am having difficulties with Vue 3 reactivity and proxy objects. I am using <code>Option API</code> and I have a Vue Component that on button click execute following code</p>
  <pre class="lang-js prettyprint-override"><code>submitUser() {
        let userCreated;
        userCreated = {
          id: this.user_tomodify.id,
          firstName: this.firstName,
          lastName: this.lastName,
          email: this.email,
          username: this.username,
        };
        this.$emit(&quot;onuserSubmitted&quot;, userCreated, this.usertype);
        this.hide();
      },
  </code></pre>
  <p>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 &quot;onuserSubmitted&quot; is the following</p>
  <pre class="lang-js prettyprint-override"><code>addUser(new_user, u_type) {
          this.users[u_type].push(new_user);
          MevoLogger.debug(this.users[u_type]);
          }
  </code></pre>
  <p>Where <code>this.users</code> is an Object that associated to the field contained in u_type variable some arrays. For better undestanding this is the computed property:</p>
  <pre class="lang-js prettyprint-override"><code>users() {
        switch (this.role) {
          case &quot;ROLE_SECRETARY&quot;:
            return {
              STUDENT: this.students,
              TEACHER: this.teachers,
            };
          case &quot;ROLE_TECHNICIAN&quot;:
            return {
              STUDENT: this.students,
              TEACHER: this.teachers,
              SECRETARY: this.secretaries,
            };
          case &quot;ROLE_ADMIN&quot;:
            return {
              STUDENT: this.students,
              TEACHER: this.teachers,
              SECRETARY: this.secretaries,
              TECHNICIAN: this.technicians,
              ADMIN: this.admins,
            };
  </code></pre>
  <p>And i have a list in the page rendered with v-for = user in users[type]</p>
  <p>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?</p>