Как динамически удалять/добавлять элементы в массиве при изменении запроса к API?

У меня два компонента. В одном я получаю активные чекбоксы на товарах и их ID и добавлять это все в два массива (в одном выбранный товар, в другом его ID) Потом я это все передаю в другой компонент и делаю запрос к апи, в котором передаю ID выбранных товаров и добавляю в другой массив (devices) данные выбранных товары (цену и прочее). С добавлением все норм, но когда убираю галочку с инпута, то вместо удаления происходит добавление этого же элемента. Как это исправить?

// получаю выбранный товар
getActiveInput(event) {
    const arr = []
    const checkedInputs = document.querySelectorAll('.form-calc__input:checked')
    this.hardware.forEach((item) => {
      checkedInputs.forEach(input => {
        if (item.ID == input.id) {
          arr.push(item)
        }
      })

    })
    return this.$emit('checkedInput', arr)
  },
  // получаю id
  getId(event) {
    let id = []
    const checkedInputs = document.querySelectorAll('.form-calc__input:checked')
    this.hardware.forEach((item) => {
      checkedInputs.forEach(input => {
        if (item.ID == input.id) {
          id.push(`sectionIds[]=${item.ID}&`)
        }
      })
    })
    return this.$emit('getId', id)
  },

async fetchDevice(id) {
  try {
    const response = await axios.get(`https://${id}`) // запрос к апи
    this.devices.push(response.data.data) // добавляю данные о товаре в массив
  } catch (e) {
    console.error(e)
  }
},


// здесь были попытки удаление товара из массива
watch: {
checkedInput: {
  async handler(val, oldVal) {
    if (val.length >= oldVal.length) {
      await this.fetchDevice(this.id)
      console.log(this.checkedInput)
    } else if (val.length == 0) {
      this.devices = []
    } else {
      await this.fetchDevice(this.id)
    }
    if (this.id == '') {
      this.devices = []
      this.devicesItem = []
    }
  },
  deep: true
},