Not sure if this is correct?

[iAJue]

First, let's start with the code:

template

<PlaylistSelectModal ref="playlistSelect" :current-song="currentSong "/>
import PlaylistSelectModal from '../components/PlaylistSelectModal.vue';
const currentSong = ref({ name: '', author: '', img: '', url: '', hash: '' });

PlaylistSelectModal.vue

<template>
    <transition name="fade">
        <ul class="playlist-select-list" v-if="playlists.length > 0">
            <li v-for="playlist in playlists" 
                :key="playlist.list_id" 
                @click="addToPlaylist(playlist.listid, currentSong); isOpen = false">
                {{ playlist.name }}
            </li>
        </ul>
    </transition>
</template>

<script setup>
const props = defineProps({
    currentSong: {
        type: Object,
        required: true
    }
});
// const currentSong = ref(props.currentSong);

const addToPlaylist = async (listid, song) => {
    console.log(song);
    return;
}

Issue description:

Using const currentSong = ref(props.currentSong); causes the song retrieved in the addToPlaylist function to be empty, even though the structure exists.

My description might not be entirely clear, so let me provide an example.

If the line // const currentSong = ref(props.currentSong); is commented out:

If the line const currentSong = ref(props.currentSong); is enabled:

[perfectSquare]

try
const currentSong = computed(() => props.currentSong);

[iAJue]

try

can use Thanks♪(･ω･)ﾉ