Не удается правильно соединить значение массива в системе компонентов Vue Js CLI

Question

Извините за мой плохой английский

Проблема

См. На https://onlinemercato.netlify.com

Я создаю веб-приложение для домашней работы, и у меня есть последний вопрос вмои компоненты Vue CLI.
Мои компоненты организованы следующим образом:

 - App
     - Basket
     - players-list

Подробнее

Я создал систему корзин, в которой при добавлении игрока из «игрока»-list "это добавляет его объект в корзину.Кроме того, свойство «количество» увеличивается, если я добавлю того же игрока.

Я нахожусь в цикле for с привязанным :key="item.id", и на каждой итерации я передаю настройку index в кнопке @click.Я нажимаю кнопку удаления, которая выполняет функцию удаления (индексирования), индекс корректно проходит, но не удаляется, или удаляет неправильный индекс.

Моя проблема связана с функцией удаления в компоненте корзины, которая приИсходный массив поступает из локального хранилища, его работает.Когда я только что подтолкнул новых игроков (без перезагрузки), я получаю странное поведение.

Это не удаление или удаление по предыдущему индексу, например, если в моем массиве 2 игрока, я удаляю одного в index=1 вместо index=0.

Код

Я следую пути прохождения переменных между компонентами.

Players-List.vue

html

//in a for loop (player of players) + :key="player.id"
button(@click.prevent="add(player)") Ajouter au panier

Js

//in my component just quote before i get a value from another component but no problems at this point
    add: function(toAdd) {
      //console.log(toAdd);
      this.$emit("addBasket", toAdd);
    }

app.vue

Здесь я передаю объект в функции, все работает хорошо, и в этот момент я не теряю реактивность

html

<Basket class="basket" msg="Panier" :basketVal="basket" @nbBasket="baskRecup"/>
<players-list id="players" msg="Catalogue" :number="number" :value="players" @addBasket="toAdd"/>

js

export default {
  name: "app",
  data() {
    return {
      players: {}, //using players object to define it's an object
      number: 0, //same for total players number
      basket: null, //use null to don't compute basket with empty object on condition
      basketNumber: 0 //INIT BASKET NUMBER
    };
  },
    toAdd(newVal) {
      //sending a player object to add in basket
      // console.log(newVal);
      // console.log("========");
      // console.log(this.basket)

      this.basket = newVal;    
      //way to notify (reactive) a change when adding same player 
      this.basket.__ob__.dep.notify();//i'm forcing reactivity here
    }
}

basket.vue

Здесь становится интересно

html

//pug syntax 
          tr(v-for="(item,id) in selected" :key="item.id")
            td {{id}}
            td {{item.name}}
            td {{item.price}} M €
            td {{item.qte}}
            td 
              button(@click.prevent="remove(id)")  Delete

js

export default {
  name: "Basket",
  props: ["msg", "basketVal"],
  data() {
    return {
      selected: [],
      active: false,
      total: 0,
      nb: 0,
      th: ["id", "Nom", "Prix", "Quantité", ""]
    };
  },
  computed: {
    basket: function() {
      //on initializing to avoid a empty object push
      if (this.basketVal != null) {
//function wich return false if object isn't the same
        let indexQte = this.getQte(this.basketVal, this.selected);

        if (indexQte !== false) {

          this.selected[indexQte].qte++;

        } else {

          this.selected.push(this.basketVal);
        }
        this.saveBasket();
        return this.selected;
      }
    },
mounted() {
    // On initialising get items of basket local storage space
    if (localStorage.getItem("basket")) {
      try {
        this.selected = JSON.parse(localStorage.getItem("basket"));
      } catch (e) {
        localStorage.removeItem("basket");
      }
    }
    return this.selected;
  },
watch: {
    //watching values to keep items reactivity
    basket: function() {
      return this.selected;
    },
    selected: function() {
      return this.selected;
    }
  },
methods: {
    saveBasket: function() {
      //SAVE IN LOCAL in "basket space"
      localStorage.setItem("basket", JSON.stringify(this.selected));
    },

    remove(index) {
      //console.log(index);
      console.log(this.selected[index]);



      if (this.selected[index].qte > 1) {
        this.selected[index].qte--;
      } else {
        let nindex = this.selected.indexOf(index);
        this.selected.splice(nindex, 1);
      }
      //this.selected.__ob__.dep.notify();

      //this.selected[index] = undefined;

      this.saveBasket();
      //return this.selected;
    },
   }
}//end vue comp

Большое спасибо за помощь <3; </p>