How to use emit and props properly in Nuxt3 Composition Api - vue.js

Question

I want to use emit and props in Nuxtjs3, but not sure, what i am doing wrong here.
in My project, i need to find airport data at a lot of pages, so i created a airportsearch component.
this is inside
components/AirportSearch.vue
<template>
<AutoComplete
class="ttc-w-full ttc-h-12"
v-model="AirportData"
:suggestions="airports"
#complete="getairports($event)"
field="name"
placeholder="Search Pickup Location"
forceSelection
#item-select="Update"
>
<template #item="slotProps">
<div
style="display: flex; justify-content: space-between"
class="ttc-font-bold ttc-text-md"
>
{{ slotProps.item.name }}
<span class="ttc-font-normal ttc-text-xs">
{{ slotProps.item.code }}
</span>
</div>
</template>
</AutoComplete>
</template>
<script setup>
import { ref } from "vue";
const { apiUrl } = useRuntimeConfig();
const airports = ref([]);
const emit = defineEmits(["submit"])
const props = defineProps(['AirportData']);
const getairports = useDebounce(async (event) => {
const { data } = await useFetch(`${apiUrl}/airports/find`, {
method: "post",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({
aptsearchkey: event.query,
}),
});
airports.value = data.value;
}, 500);
function Update(event) {
emit("submit", props.AirportData);
}
</script>
this is another component inside components folder
TaxiSearchForm.vue
<template>
<div>
<AirportSearch
:AirportData="pickuppoint"
#submit="handleUpdate"
/>
</div>
</template>
<script setup>
import {ref} from 'vue'
const airportTransferData = useCookie("airportTransferData", {
maxAge: 60 * 60 * 24 * 7,
});
let pickuppoint = ref();
function handleUpdate(pickuppoint) {
pickuppoint.value = pickuppoint;
};
onMounted(() => {
if (airportTransferData.value) {
pickuppoint.value = airportTransferData.value.pickuppoint;
}
});
</script>
I am not able to pass data from AirportSearch Component to TaxiSearchForm.
When i Select dropdown in AirportSearch, I see that AirportData Prop is getting populated. but I want same Data to be passed to var pickuppoint in TaxiSearchForm.
this is sample of response from api in AirportSearch.vue
const airports = [
{
"aptid": "1439",
"code": "DXB",
"name": "Dubai Intl Airport",
"cityCode": "DXB",
"cityName": "Dubai",
"countryName": "UNITED ARAB EMIRATES",
"countryCode": "AE",
"continent_id": null,
"timezone": "4",
"lat": "25.252778",
"lon": "55.364444",
"city": "true",
"id": "6135ee7e91649f157edff402"
},
{
"aptid": "3101",
"code": "XNB",
"name": "Dubai Bus Station Airport",
"cityCode": "DXB",
"cityName": "Dubai",
"countryName": "UNITED ARAB EMIRATES",
"countryCode": "AE",
"continent_id": null,
"timezone": "3",
"lat": "0",
"lon": "0",
"city": "false",
"id": "6135ee7e91649f157edffa80"
},
{
"aptid": "3475",
"code": "DWC",
"name": "Al Maktoum International Airport",
"cityCode": "DXB",
"cityName": "Dubai",
"countryName": "UNITED ARAB EMIRATES",
"countryCode": "AE",
"continent_id": null,
"timezone": "4",
"lat": "24.898504",
"lon": "55.143231",
"city": "false",
"id": "6135ee7e91649f157edffbf6"
},
{
"aptid": "7609",
"code": "SHJ",
"name": "Sharjah Airport",
"cityCode": "DXB",
"cityName": "Dubai",
"countryName": "UNITED ARAB EMIRATES",
"countryCode": "AE",
"continent_id": null,
"timezone": "4",
"lat": "25.328575",
"lon": "55.51715",
"city": "false",
"id": "6135ee7f91649f157ee00c1c"
}
]

Answer 1

The problem is the handleUpdate() argument (pickuppoint) shadows the outer ref of the same name, so the function incorrectly modifies its argument instead of the ref:
let pickuppoint = ref()
function handleUpdate(pickuppoint) {
// 👇 this is the function argument, not the outer ref
pickuppoint.value = pickuppoint
}
The fix is to make the names different. For instance, rename the function argument:
let pickuppoint = ref()
function handleUpdate(newPickuppoint) {
pickuppoint.value = newPickuppoint
}
demo