Problem: when the attribute in the data object (defined data) in the access component is also the attribute in the object object, an error is reported

Parent component ：

export default {
    
    setup(){
    
        const route=useRoute()
        let state=reactive({
    
            list:[],
            playList:{
    
            }
        })
        provide("playList",computed(()=>state.playList))
        
        onMounted(async ()=>{
    
            console.log(route,'route')
            let id=route.query.id
            let res=await getPlayListDetail(id)
            console.log(res,' Details of the song list ')
            state.playList=res.data.playlist
            
        })
        return{
    
            state
        }
    },
    components:{
    
        ListViewTop
    }
}

Child components ：
Interface

        <div class="contentRight">
            <h3>{
   {playList.name}}</h3>
            <div class="author">
                <img :src="playList.creator.avatarUrl" class="header">
                <span>{
   {playList.creator.nickname}}</span>
            </div>
            <div class="description">
                {
   {playList.description}}
            </div>
        </div>
    </div>

js Code

   setup(){
    
   // Omit 
        let playList=inject('playList')
   }

explain ：
Use... In subcomponents playList.creator.avatarUrl Will report a mistake , The hint doesn't exist , Because the initial playList It's empty , Directly access the attributes of the array or object inside , Such as creator The property of will report an error
Correct the post parent component ：

export default {
    
    setup(){
    
        const route=useRoute()
        let state=reactive({
    
            list:[],
            playList:{
    
                // Because initially playList It's empty , Directly access the attributes of the array or object inside , Such as creator The property of will report an error 
                // You can test it manually 
                // let person={
    
                // age;12
                // }
                // console.log(person.age)//undefined
                // console.log(person.friend.name)// Report errors 
                creator:{
    },// initialization 
                tracks:[]
            }
        })
        provide("playList",computed(()=>state.playList))
        
        onMounted(async ()=>{
    
            console.log(route,'route')
            let id=route.query.id
            let res=await getPlayListDetail(id)
            console.log(res,' Details of the song list ')
            state.playList=res.data.playlist
            
        })
        return{
    
            state
        }
    },
    components:{
    
        ListViewTop
    }
}