Why object changes into proxy object in vue? [duplicate]

Question

I have have object problem is when I assign object to data property it converts into proxy object .

Here is what I am doing

 data() {
    return {
      msg: "",
      notifications: {},

    };
  },
  this.notifications =  TokenService.getUserInfo().unread_notifications;

Thats how I am receiving object

Proxy {0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}}
[[Handler]]: Object
[[Target]]: Array(5)
[[IsRevoked]]: false

What is the reason?

Answer 1

Reason is Vue 3 is using ES6 Proxy to make an objects reactive. You can study how that works in depth or you can just ignore it and work with objects as normal (Proxy is transparent wrapper and works everywhere as your original object)