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♪(･ω･)ﾉ

[udrzbarik]

@perfectSquare why does this work and ref() doesn't? Aren't they supposed to be both reactive?

[KennanDeng22]

@perfectSquare why does this work and ref() doesn't? Aren't they supposed to be both reactive?

the two logs posted in this issue means the value of currentSong in parent component has changed, so using 'computed' works, but 'ref' not as "ref" is only used to initialize inner currentSong variable