Реализация бесконечной прокрутки делает данные дважды

Question

Я реализую бесконечную прокрутку в Nuxt 2. Когда я прокручиваю до конца страницы, моя функция выполняется дважды (два запроса GET).Это должно быть один раз.Как этого добиться?

<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(), кажется, запускается / рендерит дважды: я получаю дублирующиеся данные, отображаемые на странице.Я поместил document.addEventListener в правильном месте?

Обновление:

this.loading = true вызывает его.Когда я обновляю data(), это вызвало двойное выполнение.