Pass ref to parent without proxy

In my child vue component I have this referenced object that I emit to the parent:

const skuForm = ref({
    sku: '',
    oneTime: false,
    noDiscount: false,
    korean: false
});

const addSku = () => {
    emit('add', skuForm.value);
}

I want to send to the parent component the plain json object.

This is what I do in my parents component:

<SKUForm :open="modal" @close="modal=false" @add="addSKU"></SKUForm>


<script setup>
const addSKU = (sku) => {
    console.log('RECEIVING SKU..');
    console.log(sku);

}

However, the received json object is still wrapped around a proxy. How to get rid of the proxy?

>Solution :

In Vue 3, when you use ref to create a reactive object, it returns a Proxy wrapper around the actual value.
To remove the proxy wrapper, you can use the toRaw function provided by Vue’s Composition API.

import { toRaw } from 'vue'

and

const addSku = () => {
  emit('add', toRaw(skuForm.value));
};