composition api 부분 질문

[손성호]

<template>
<div style="padding : 10px">
    <h4>팔로워</h4>
    <input placeholder="🔍" />
    <div class="post-header" v-for="(a,i) in follower" :key="i">
        <div class="profile" :style="`background-image: url(${follower[i].image})`"></div>
        <span class="profile-name">{{follower[i].name}}</span>
    </div>
</div>
</template>
<script>
import axios from 'axios';
import {onMounted, reactive, ref, toRefs, watch} from 'vue'

export default {
    name:'mypage',
    // composition api 사용법
    setup(props){
        // 이 안에서 state 생성/조작, method,computed,watch랑 hook도 가능
        // setup() 은 created hook 과 같은 기능을 한다.

        let follower = ref([]);
        // 데이터생성법1 ref(데이터)

        // let test = reactive({name:'kim'})
        // // 데이터생성법2 reactive(데이터) 보통 array,object 넣기는 하는데, ref 랑 기능적으로 큰 차이없음
        
        let {one} = toRefs(props)
        console.log(one.value)

        // // 어떤 props 받아오고싶다면 {프롭스이름} = toRefs(props)라고 쓴다 props는 setup()파라미터.

        // watch(one,()=>{

        // })
        // // watch 쓰고싶으면 그대로 쓰고 watch(감시할거,()=>{실행할코드})

        // let result = computed(()=>{
        //     return follower.value.length
        // })
        // console.log(result.value)
         // computed 쓰고싶으면 그대로 쓰고 computed(()=>{return 연산결과})

        //lifecycle Hook 사용하려면 예를들어 mounted 의 경우 setup()안에서
        // 밑처럼 쓴후 콜백 안에서 작성
        onMounted(()=>{
            axios.get('/follower.json').then((a)=>{
            
                follower.value = a.data
                // ref에 있는 값을 가져오고싶으면 setup()안에서는 변수뒤에 .value를 붙임
               

        }).catch((err)=>{console.log('오류',err)})

        })
        return {follower}

    },
}
</script>
<style scoped>
/* style태그 뒤에 scoped 쓰면 style 값이 다른곳으로 전염되지않고 이 뷰 파일 안에서만 적용된다. */
    
</style>

자꾸 이런 워닝과 에러가 나와서

[Vue warn]: Unhandled error during execution of scheduler flush at <Mypage one=1 > at <Container 인스타데이터=(3) [{…}, {…}, {…}]
step=3 이미지="" ... > at <App>
MyPage.vue:29 

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'value') at setup (MyPage.vue:29:25) 

코드들 주석 처리 해가면서 미리보기 해봤는데요

    let {one} = toRefs(props)
        console.log(one.value)

이 부분부터 에러가 생기는거 같습니다. value 가 undefined 라는거 같은데 props도 잘전달해주고 있고, toRefs 를 import도 해오고있는데

이런 에러가 뜨고 해당 뷰 파일은 아예 마운트가 되지 않습니다. 이유가 뭘까요

[codingapple]

props 받아온거 props:에 등록도 해봅시다

[글쓴이]

글