What could be the problem if the setMaturity method is called twice?

Question

Vue.js

I have a select form that sends requests to get plots to the setMaturity method. If I do this once, then everything works fine, but if I click on this form a second time and just select a different value, thereby sending another request to receive charts, then I immediately get 2 requests and everything falls. What could be the problem? Where did I go wrong?

Kmnt select

<template>
  <div class="v-select-underlying">
    <label class="block" for="Underlying">{{ label }}</label>

    <select
      class="w-full border border-gray-300 px-3 py-2 rounded-lg shadow-sm focus:outline-none focus:border-gray-300 focus:ring-1 focus:ring-gray-300"
      id="select"
      v-model="selected"
      @change="onChangeSelect"
      @input="throttledSave"
    >
      <option v-for="item in options" :value="item" :key="item">
        {{ item }}
      </option>
    </select>
  </div>
</template>

<script>
import throttle from "../../../throttle.js";

export default {
  name: "v-select",

  props: {
    modelValue: {
      type: String,
      default: "",
    },

    options: {
      type: Array,
      default: () => [],
    },

    label: {
      type: String,
      default: "",
    },
  },

  emits: ["change", "input"],

  data() {
    return {
      selected: this.modelValue,
      timerId: null,
    };
  },

  watch: {
    selected() {
      this.$emit("update:modelValue", String(this.selected));

      
    },

    modelValue(newValue) {
      this.selected = newValue;
      console.log("throttleSELECT", this.throttledSave); 
    },
  },

  methods: {
    onChangeSelect() {
      this.$emit("change", String(this.selected));
    },

    throttledSave() {
      let DELAY = 1000; // Задержка

      clearTimeout(this.timerId);
      this.timerId = setTimeout(() => {
        this.$emit("upAmount", this.selected);
      }, DELAY);
    },
  },
};
</script>

Cmnt parent, where the method itself is already located

<template>
  <div class="v-header-forms">
    <div class="containet mx-auto px-10 text-sm">
      <div class="header flex justify-start">

        <div
          class="form-control text-gray-700 pointer-events-auto w-1/6 justify-start"
        >
          <vSelect 
            v-model="selectedunderlying"
            :label="'Underlying'"
            :options="underlyingList"
            @change="getMaturity"
            @click="change"
          >
          </vSelect>
        </div>

        <div
          class="form-control text-gray-700 pointer-events-auto w-1/6 justify-start ml-8"
        >

          <vSelect 
            v-model="selectedMaturity"
            :label="'Maturity'"
            :options="maturityList"
            @change="setMaturity"
            @upAmount="setMaturity"

          >
          </vSelect>


        </div>
        <div class="form-control text-gray-700 pointer-events-auto w-1/6 ml-8">
          <vAmount v-model="coinAmount" @click.prevent="this.$emit('upGetStatisctics')"  @upAmount="setAmount"  />
        </div>
        <vCheckbox v-model="Checkbox"  @checked="handleCheckbox">
          Futures hedge funding
        </vCheckbox>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions, mapState } from "vuex";

import vSelect from "./forms/v-select";
import vAmount from "./forms/v-amount";
import vCheckbox from "./forms/v-checkbox";

export default {
  name: "v-header-forms",

  components: {
    vAmount,
    vSelect,
    vCheckbox,
  },

  emits: ["upGetStatisctics"],

  data() {
    return {
      msg: "waiting",
      underlyingList: ['BTC', 'ETH'],
      selectedMaturity: null,
      selectedunderlying: null,
      coinAmount: 0,
      Checkbox: false,
    }
  },

  computed: {
    ...mapGetters(["maturityList"]),
    ...mapState({
      amount: state => state.amount,
      selectedCoin: state => state.underlying,
      selectedHedg: state => state.maturity,
    }) 
  },
  watch: {
    amount(newValue, oldValue) {
       this.fieldsCheck()

    },
     selectedCoin(newValue, oldValue) {
      console.log(this.selectedCoin)
      console.log(this.selectedHedg)
    },
     selectedHedg(newValue, oldValue) {
      console.log(this.selectedCoin)
      console.log(this.selectedHedg)
    },

    selectedunderlying() {
      this.selectedMaturity = null;
    },

  },

  methods: {
    ...mapActions(["getMaturity_actions"]),
 

    handleCheckbox(value) {
      console.log('valueeeeeeeeeeeee', value)
      this.$store.commit('setFlagFutures_mutations', value);
      this.fieldsCheck()

    },

    getMaturity(underlying) {
      this.$store.commit("setUnderlying_mutations", underlying);
      this.getMaturity_actions(underlying);
      this.selectedMaturity = null,
      this.selectedunderlying = null,
      this.coinAmount = 0,
      this.Checkbox = false
      this.$store.commit("setFullData_mutations", null)
    },

    setMaturity(event) {
      this.$store.commit("setMaturity_mutations", event);
      this.fieldsCheck()
    },

    setAmount(count) {
      this.$store.commit("setAmount_mutations", count);
    },

    fieldsCheck(){
      if (this.amount !== 0  &&  this.selectedHedg !== null && this.selectedCoin !== null){
          this.$store.dispatch('getStatisctics_actions');
          this.$store.dispatch('getTableStaticsics_actions'); 
      }
    },
  },

};
</script>

Answer 1

I will assume that it is triggered from the throttle, you have a set matur there and it's on "upAmount", scatter the console logs by methods and see what it calls