Вызовы VueJS API с бесконечным циклом

Question

Я получил бесконечные вызовы API, когда этот метод setCurrentDateFilter вызывается после нажатия кнопки-переключателя.Похоже, мой отфильтрованный список повторяется каждый раз из-за реактивности.Но на самом деле я не понимаю, почему.Все было хорошо, прежде чем я сделал этот дополнительный вызов API по нажатию кнопки.

index.html частично

<div class="row align-items-center justify-content-center">
  <b-form-group>
    <b-form-radio-group buttons v-model="selected_date" :change="setCurrentDateFilter()" name="date_filter">
      <b-form-radio value="today" button-variant="outline-success">Сегодня</b-form-radio>
      <b-form-radio value="tomorrow" button-variant="outline-success">Завтра</b-form-radio>
      <!-- <b-form-radio value="specific" button-variant="outline-success" disabled>Выбрать дату</b-form-radio> -->
    </b-form-radio-group>
  </b-form-group>
</div>
<div class="container">
  <div class="section-top-border" v-for="(event, i) in filteredEvents" :key="event.id">
    <div class="row">
      <div class="col-md-6">
        <div class="country">
          <div class="grid">
            <div class="row">
              <div class="col-sm-3 event date">{{event.start_date.day}}</div>
              <div class="col-sm-6 event month">{{event.start_date.month}}</div>
            </div>
            <div class="row event">
              <div class="col-sm-1">{{event.start_date.time}} </div>
              <div class="col-sm-11" v-if="event.place"> ? {{event.place.name}} </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <h3 class="mb-30">{{event.title}}</h3>
    <div class="row">
      <div class="col-md-3">
        <b-img v-bind:src="event.poster_link" alt="" width="200" height="200" fluid>
      </div>
      <div class="col-md-9 mt-sm-20">
        <p>{{event.short_description}}</p>
        <b-btn variant="outline-success" v-on:click="currentEvent=event;modalShow=true"> ? Подробнее</b-btn>
      </div>
    </div>
  </div>

main.js

var app = new Vue({
  el: '#app',
  data: {
    api: 'http://127.0.0.1:8000/api/events',
    show: true,
    events: [],
    currentEvent: Object,
    modalShow: false,
    loading: true,
    errored: false,
    selected_filter: ["1", "2", "3"],
    selected_date: "today",
  },
  computed: {
    filteredEvents() {
      var sel_filter = this.selected_filter
      var objs = this.events.filter(function(event) {
        return sel_filter.indexOf(event.type.id.toString()) >= 0
      })
      console.log(objs.length, sel_filter)
      return objs;
    }
  },
  mounted() {
    this.getEventsFromServer();
  },
  methods: {
    getEventsFromServer(date = (new Date).toString()) {
      axios
        .get(this.api)
        .then(response => {
          this.events = handleResponse(response)
        })
        .catch(error => {
          console.log(error);
          this.errored = true;
        })
        .finally(() => (this.loading = false));
    },
    setCurrentDateFilter: function(e) {
      console.log(e)
      console.log(this.selected_date)
      this.getEventsFromServer();
    },
  },
  filters: {}
})

function handleResponse(response) {
  var events = []
  for (let i = 0; i < response.data.length; i++) {
    let e = response.data[i]
    let start_date = new Date(e.start_date)
    let el = {
      start_date: {
        day: start_date.getDate(),
        time: start_date.getHours() + ":" + (start_date.getMinutes() < 10 ? '0' : '') + start_date.getMinutes(),
        month: getMonthWord(start_date)
      },
      title: e.id,
      title: e.title,
      description: e.description,
      short_description: e.short_description,
      poster_link: e.poster_link,
      source_link: e.source_link,
      type: getStyledType(e.type),
      phone: e.phone,
      email: e.email,
      place: e.place
    }
    events.push(el)
  }
  return events;
}