title: Vue 3 get value of a proxy
body: <p>Here is my <code>RequestList.vue</code> component</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;ion-item v-for=&quot;request in requests&quot; @click=&quot;showRequest(request)&quot; :key=&quot;request.id&quot;
              text-wrap&gt;
      &lt;ion-label&gt;
        &lt;b&gt;Name:&lt;/b&gt; {{ request.event.name }}
        &lt;br&gt;
        &lt;b&gt;Venue:&lt;/b&gt;{{ request.event.venue.name }}
        &lt;br&gt;
        &lt;b&gt;Date:&lt;/b&gt; {{ request.event.date }}
      &lt;/ion-label&gt;
    &lt;/ion-item&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import {useRouter} from 'vue-router'
  import {IonItem, IonLabel} from '@ionic/vue'
  import store from '@/store';
  export default {
    components: {
      IonLabel,
      IonItem
    },
    props: {
      requests: Array
    },
    setup(props) {
      const router = useRouter()
      const showRequest= (request)=&gt; {
        console.log('request', props.request);
        store.requests.setRequest(props.requests);
      };
      return {router, showRequest}
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>My <code>store/modules/requests.js</code> file</p>
  <pre class="lang-js prettyprint-override"><code>import {computed, ref} from &quot;vue&quot;;
  
  const state = ref({
    request: null
  });
  
  export function setRequest(request) {
    state.value.request = request;
  }
  
  export const getRequest = computed(() =&gt; state.value.request);
  </code></pre>
  <p>My <code>Requests.vue</code> component where I am using the <code>RequestList.vue</code></p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;ion-page&gt;
      &lt;ion-header&gt;
        &lt;ion-toolbar&gt;&lt;/ion-toolbar&gt;
      &lt;/ion-header&gt;
      &lt;ion-content class=&quot;ion-padding-start ion-padding-end&quot;&gt;
        &lt;ion-list-header&gt;
          &lt;ion-label&gt;
            &lt;b&gt;Requests&lt;/b&gt;
          &lt;/ion-label&gt;
        &lt;/ion-list-header&gt;
        &lt;div v-if=&quot;!loading&quot;&gt;
          &lt;request-list :requests=&quot;requests&quot; /&gt;
        &lt;/div&gt;
        &lt;div v-else&gt;
          &lt;ion-spinner class=&quot;spin&quot;&gt;&lt;/ion-spinner&gt;
        &lt;/div&gt;
      &lt;/ion-content&gt;
    &lt;/ion-page&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { defineComponent } from 'vue'
  import { IonContent, IonHeader, IonLabel, IonListHeader, IonPage, IonSpinner, IonToolbar } from '@ionic/vue'
  import { reactive, toRefs } from '@vue/reactivity'
  import { onMounted } from '@vue/runtime-core'
  import RequestList from '../components/RequestList'
  import firestoreService from '@/services/firestore'
  
  export default defineComponent({
    components: {
      IonContent,
      IonPage,
      IonLabel,
      IonHeader,
      IonSpinner,
      IonToolbar,
      IonListHeader,
      RequestList
    },
    setup() {
      const state = reactive({
        requests: [],
        loading: false
      })
  
      onMounted(async () =&gt; {
        state.loading = true
        try {
          state.requests = await firestoreService.getClaimableRequestsForCurrentUser()
        } catch (e) {
          console.log('error occurred fetching requests for current user', e)
        } finally {
          state.loading = false
        }
      })
      return {
        ...toRefs(state),
      }
    }
  })
  &lt;/script&gt;
  </code></pre>
  <p>My issue is that in RequestList.vue above, the <code>showRequest</code> handler is sending <code>request</code> as param which is a proxy. And thats why the <code>store.requests.setRequest(props.requests)</code> is setting  a proxy in the store. Whereas I need the value of props.requests.</p>
  <p>So how do I do it here?</p>