В vue приложении запросы из компонентов нарастают как снежный ком

Не нашел ответов в документации и интернете.

Получается так, что vue приложение постоянно создает экземпляры одного и того же компонента в памяти и они все дружно отправляют запросы по глобальному коллбеку на получение данных для себя. И количество экземпляров постоянно растет.

Вот такой код страницы ротации vue компонентов

 <script>
import Layout from "../../layouts/main";
import PageHeader from "@/components/page-header";
import Messages from "@/views/pages/ba/messages";



import appConfig from "@/app.config";
import { subDays } from 'date-fns'
/**
 * Charts component
 */
export default {
  page: {
    title: "Messages",
    meta: [{ name: "description", content: appConfig.description }]
  },
  props: ['tone'],
  components: { Layout, PageHeader, Messages },
  data () {
    return {
      
      
      messages: [],
      componentKey: 0,
      currentIndex: 1,

      //tone: this.getTone(), 

      brand_id: 1,
      date_range: { date_from: subDays(new Date(), 6), date_to: new Date() },
      
      title: "Charts",
      items: [
        {
          text: "Charts",
          href: "/",
        },
        {
          text: "Charts",
          active: true,
        },
      ],
    }
  },
  created () {
    // var d = new Date()
    // d.setDate(d.getDate()-6)
    // this.data_range.date_from = d
  },
  watch: { 
    tone: function(newVal, oldVal) { // watch it
      //this.load_data()
      
      this.messages = []
    }
  },
  computed: {
    getNameOfTone() {
      switch(this.tone) {
        case '1':  
          return 'positive'

        case '-1':  
          return 'negative'

        case '0':  
          return 'neutral'
      }
    },
    getTone(){
      let uri = window.location.search.substring(1); 
      let params = new URLSearchParams(uri);
      return params.get("tone");
    }
  },
  mounted: function() {
    this.startSlide();
  },

  methods: {
    startSlide: function() {
      this.timer = setInterval(this.next, 20000);
      
    },

    next: function() {
      this.currentIndex += 1;
      if(this.currentIndex > 3){
        this.currentIndex = 1
        //location.reload()
      }
    },
    prev: function() {
      this.currentIndex -= 1;
    }
  },
}
</script>

<template>
  
  <Transition-group name="fade" mode="out-in" :duration="{ enter: 5, leave: 8 }" tag="div">
    <div key="d1" v-if="currentIndex == 1"><keep-alive><Messages tone="1"/></keep-alive></div>
    <div key="d2" v-if="currentIndex == 2"><keep-alive><Messages tone="-1"/></keep-alive></div>
    <div key="d3" v-if="currentIndex == 3"><keep-alive><Messages tone="0"/></keep-alive></div>

  </Transition-group>

  
</template>

Это код компонета Message

 <script>
import Layout from "../../layouts/main";
import PageHeader from "@/components/page-header";

import VClamp from 'vue-clamp'

import appConfig from "@/app.config";
import { subDays } from 'date-fns'
/**
 * Charts component
 */
export default {
  page: {
    title: "Messages",
    meta: [{ name: "description", content: appConfig.description }]
  },
  props: ['tone'],
  components: { Layout, PageHeader, VClamp },
  data () {
    return {
      
      
      messages: [],
      componentKey: 0,

      //tone: this.getTone(), 

      brand_id: 1,
      date_range: { date_from: subDays(new Date(), 6), date_to: new Date() },
      
      title: "Charts",
      items: [
        {
          text: "Charts",
          href: "/",
        },
        {
          text: "Charts",
          active: true,
        },
      ],
    }
  },
  // created () {
  //   // var d = new Date()
  //   // d.setDate(d.getDate()-6)
  //   // this.data_range.date_from = d
  // },
  watch: { 
    tone: function(newVal, oldVal) { // watch it
      this.load_data()
      this.first_4 = {}
      this.first_3 =  {}
      this.l1_4 =  {}
      this.l2_4 =  {}
      this.l3_4 =  {}
      this.l4_4 =  {}
      this.messages = []
    }
  },
  computed: {
    getNameOfTone() {
      switch(this.tone) {
        case '1':  
          return 'positive'

        case '-1':  
          return 'negative'

        case '0':  
          return 'neutral'
      }
    },
    getTone(){
      let uri = window.location.search.substring(1); 
      let params = new URLSearchParams(uri);
      return params.get("tone");
    }
  },

  methods:{
    load_data() {

        let formData = new FormData();
        formData.append('brand_id', this.brand_id);
        formData.append('date_from', this.date_range.date_from.toLocaleDateString('ru-ru'));
        formData.append('date_to', this.date_range.date_to.toLocaleDateString('ru-ru'));
        formData.append('tone', this.tone);

        this.$http.defaults.headers.common['Authorization'] = sessionStorage.getItem('token');
        
        this.$http.get('/api/brand_analytics/get_messages_by_brand?'+new URLSearchParams(formData).toString())
        .then((response) => {

          console.log(response.data)


          for (let i = 0; i < 4; i++) {
            this.messages[i] = response.data['data'].slice(i*4, i*4 + 4)
          }

          this.componentKey += 1; 

          console.log(this.messages)
          return true
        })
        .catch((error) => {
          console.log(error)
          //setTimeout(() => {
          //  this.getData()
          //}, 10000);
        })




    },
  },
  
  created() {
    //this.load_data()
    

    var _th = this
    this.$root.$on('change_brand', function (brand_id) {
      _th.brand_id = brand_id
      _th.load_data()
    })

    var _th = this
    this.$root.$on('change_date', function (date_range) {
      _th.date_range = date_range
      _th.load_data()
    })
  }
}
</script>

<template></template>

Может кто сталкивался с таким?