Проблема передачи файла между компонентами

Пытаюсь передать файл из input=file в родительский компонент.
Дочерний компонент:

<template>
  <div>
    <input type="file" @change="onFileChange" />
  </div>
</template>

<script>

    function onFileChange(event) {
      const file = event.target.files[0]; // Получаем файл из input
      emit('file-selected', file); // Передаем файл родителю
    }
 

Родительский компонент ловит эмит и он виден и в консоли, и в vue devtools

<ProfileContact //компонент
    ref="RequestProfileComponent" 
    @file-selected="handleFileSelected" // ловим файл
    @callParentMethod="handleParentMethod" 
    @callErrorProfile="errorProfile"
    @callNormComponent="updateErrors" />

const formDataTest = ref<formDataTest>({}) // реф


// сама функция
function handleFileSelected(selectedFile: File) {
  formDataTest.value.img = selectedFile; // Сохраняем выбранный файл в родительском компоненте
}

Но при попытке передать уже на сервер img превращается в пустой объект, хотя всё работает, если передавать другие данные, например, строки или числа.

const RegistrationUser = async (formDataTest: any) => {
  try {
    const response = await registration(formDataTest)
  } catch (e: any) {
    messageCondition.value = e.response.data.message
    condition.value = true
  }
}

Это все работает, только если внутри функции создать объект и уже передать его в RegistrationUser

const formData = new FormData()
if (formDataTest.value.img) {
    formData.append('img', formDataTest.value.img || '')
}

RegistrationUser(formData)

Объясните пожалуйста, в чем разница создавать объект внутри функции или делать ref, хотя это такой же объект?