fetch가 실행이 되지 않아서 질문드립니다

fetch({store}) {
        return store.dispatch('posts/loadPosts')
   },

이런식으로 pages/index.vue에 해놨는데 처음에는 스크롤 함수에 있는

onScroll() {
            if(window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300) {
                if(this.hasMorePost) {
                    this.$store.dispatch('posts/loadPosts')
                }
            }
       }

이거 때문에 스크롤 해야 loadPosts가 불리고
Duplicate keys detected: '4'. This may cause an update error 이러한 에러가 뜨면서 중복되서 잠시 온스크롤 함수를 주석처리 해놓고 보니 fetch가 아예 실행이 안되더라구요

도대체 어떤문제인지 햇갈려서 알수 없어서 ㅜ 연락드립니다.

<template>
<v-container>
    <post-form v-if='me' />
    <div>
            <post-card v-for="p in mainPosts" :key="p.id" :post="p" />
    </div>
</v-container>
</template>

<script>
import PostForm from '~/components/PostForm'
import PostCard from '~/components/PostCard'
export default {
    components: {
        PostForm,
        PostCard,
    },
    data() {
        return {
            name : 'Nust.js'
        }
    },
    fetch({store}) {
        return store.dispatch('posts/loadPosts')
    },
    computed: {
        me() {
            return this.$store.state.users.me
        },
        mainPosts() {
            return this.$store.state.posts.mainPosts
        },
        hasMorePost() {
            return this.$store.state.posts.hasMorePost
        }
    },
    mounted() {
        window.addEventListener('scroll', this.onScroll)
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.onScroll)
    },
    methods: {
        onScroll() {
            if(window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300) {
                if(this.hasMorePost) {
                    this.$store.dispatch('posts/loadPosts')
                }
            }
        }
    }
}
</script>

<style>

</style>

참고하실 풀 index.vue 코드 보내드려요!

인프런 커뮤니티 질문&답변