Axios Get Request returned [Proxy proxy] - Flask & Vue.js

Question

I use component in a rendered page. Rendered page have an object array, it's kpi_list[]. I 'do axios get request' in rendering page.

     axios.get(URL + "/KPI/get_by_category/1").then(response=>{
          for (const data in response.data) {
              this.kpi_kalite.push(JSON.parse(JSON.stringify(response.data[data])))
              console.log(Object.values(this.kpi_kalite))
           }  
           .
           .
           .

Output:

(2) [Proxy, Proxy]
      0: Proxy {id: 1, base: 1, name: 'A', searchable_name: 'A', 
         user: '1', …}
      1: Proxy {id: 5, base: 1, name: 'B', searchable_name: 'B', 
         user: '1', …}
    length: 2
    [[Prototype]]: Array(0)

shouldn't I see it like this?

[
   {id: 1, base: 1, name: 'A', searchable_name: 'A', 
     user: '1', …},
   {id: 5, base: 1, name: 'B', searchable_name: 'B', 
     user: '1', …}
]

And whats is [Proxy, proxy]?

I send kpi_kalite array to component as a prop. In component mounted, I try things like:

  mounted() {
    console.log(this.kpi_kalite[0]) 
    console.log(Object.values(this.kpi_kalite))
},

OUTPUT:

Proxy {id: 1, base: 1, name: 'A', searchable_name: 'A', user: 
       '1', …}
(2) [Proxy, Proxy]

There is a problem, right? These are not the objects or array of objects I need to see.

Answer 1

this is normal! vue 3 uses proxies to make the properties you define in the data reactive, consequently going to log the object you see the proxy that contains the true value. to see the true value in console you should do like

console.log(JSON.parse(JSON.stringify(this.yourValue)))

if you want to read more