Infinite Scroll Implementation Renders Data Twice - vue.js

Question

I'm implementing an infinite scroll in Nuxt 2. When I scroll to the bottom of the page, my function is executing twice (two GET requests). It should be once. How to achieve this?
<template>
<main>
<div v-for="content in contents" :key="content.id">
<div>{content.name}</div>
</div>
</main>
</template>
<script>
// Minimal setup
import { throttle } from 'lodash'
import axios from 'axios'
data() {
return {
loading: false,
contents: []
}
},
// Methods
methods: {
handleScroll() {
// Vanilla JS
const pixelsFromWindowBottomToBottom = 0 + document.body.offsetHeight - window.pageYOffset - window.innerHeight
if (pixelsFromWindowBottomToBottom < 200) {
this.getContents() // <-- Fires twice. Why?
}
},
getContents() {
this.loading = true // Got it. This is this issue
axios.get('foo')
.then(({ data }) => {
this.contents = this.contents.concat(data) // array
})
}
},
created() {
if (process.browser) {
document.addEventListener('scroll', throttle(this.handleScroll, 300))
}
}
</script>
this.getContents() seems to fires/renders twice: I get duplicate data displayed on page. Have I placed the document.addEventListener in the correct place?
Update:
this.loading = true is causing it. When I update the data(), this triggered the double execution.