title: Vuejs 3 props are Proxy
body: <p>I am passing array as a prop to another component, and when I want to read this on mounted in that component, I got Proxy {}. How to read data from this prop? You can see in example when I want to console log prop, result is Proxy {}. I can see all values in HTML structure, but not in the console on mounted.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class="custom-select-container"&gt;
      &lt;div class="selected-item" @click="openSelect"&gt;
        &lt;span class="selected-items-text"&gt;{{ selectedItem.name }}&lt;/span&gt;
        &lt;span class="icon-arrow1_b selected-items-icon" :class="{ active: showOptions }" /&gt;
      &lt;/div&gt;
      &lt;transition name="fade"&gt;
        &lt;ul v-show="options.length &amp;&amp; showOptions" class="custom-select-options"&gt;
          &lt;li v-for="(option, index) in options" :key="index" class="custom-select-item"&gt;{{ option.name }}&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/transition&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { ref, onMounted } from 'vue'
  
  export default {
    props: {
      options: {
        type: Array,
        default: () =&gt; []
      }
    },
  
    setup(props) { 
      let showOptions = ref(false);
      let selectedItem = ref(props.options[0])
  
      const openSelect = () =&gt; {
        showOptions.value = !showOptions.value
      }
  
      onMounted(() =&gt; {
        console.log('test', props.options)
      })
  
      return { 
        openSelect,
        showOptions,
        selectedItem
      }
    }
  }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Parent component where I am passing data:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class="page-container"&gt;
      &lt;div&gt;
        &lt;div class="items-title"&gt;
          &lt;h3&gt;List of categories&lt;/h3&gt;
          &lt;span&gt;({{ allCategories.length }})&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="items-container"&gt;
          &lt;div class="item" v-for="(category, index) in allCategories" :key="index"&gt;
            &lt;span class="item-cell size-xs"&gt;{{ index + 1 }}.&lt;/span&gt;
            &lt;span class="item-cell size-l"&gt;{{ category.name }}&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;custom-select
        :options="allCategories"
      /&gt;
    &lt;/div&gt;
    
  &lt;/template&gt;
  
  &lt;script&gt;
  import CustomSelect from '../components/Input/CustomSelect'
  import { computed } from 'vue'
  import { useStore } from 'vuex'
  
  export default {
    components: {
      CustomSelect
    },
  
    computed: {
    
    },
  
    setup() {
      const store = useStore()
  
      const allCategories = computed(() =&gt; store.getters['categories/getAllCategories'])
  
      return {
        allCategories
      }
    }
  }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>