Vue JS Passing Data Two Levels Up

Hello - I am having trouble passing data two levels up in Vue JS. I can pass data one level up but not two.

At the bottom level, I have this:

<span @click="$emit('quickAdd')" v-if="item['price'] != null" class="text-center">
  Quick Add
</span>

And in my middle level, I can receive this data:

<script setup>

import SaleItem from '../Checkout/SaleItem.vue';
import { reactive } from 'vue'
import { ref } from "vue"
import { defineEmits } from 'vue'

const props = defineProps({
    items: Object,
});

const emit = defineEmits([
    'sendToMain',
])
const emitFunction = (newItem) => {
    console.log('emit function');
    console.log(newItem);
    emit('sendToMain', newItem)
}

const items = props.items;

</script>
<template>
    // ...
            <SaleItem :item="item" @quickAdd="emitFunction(item)" />
    // ...
</template>

I see the newItem in my console (it says Proxy, if that matters). For some reason, I cannot pass the newItem object one level higher. But I am using console.log so I can see that it is reaching the expected function at the top level.

Top level:

<script setup>
import { Head } from '@inertiajs/vue3'
import Header from './Checkout/Header.vue'
import Items from './Checkout/Items.vue'
import { reactive } from 'vue'
import { ref } from "vue"

defineProps({
    categories: Object,
    items: Object,
    count: Number,
    cart: Object,
});

var count = reactive({value: 0});

var addItem = ref();

const addToCart = (newItem) => {
    console.log('top level');
    console.log(newItem);
}

</script>
<template>
    // ...
        <Items @sendToMain="addToCart(data)" :items="$page.props.items" />
    // ...
</template>

I see top level logging in the console but the newItem is always undefined.

I am very new to Vue JS so any advice would be appreciated! Thank you!