How to remove selected Vue.js elements?

Question

JavaScript

Good afternoon. Tell me please. There is a method that should delete the selected items in the cart if they are marked with a checkbox. But something goes wrong. More precisely, I understand that - I'm trying to delete by index, after each cycle the index of the objects changes, therefore there is an incorrect deletion. How can you overcome?

deletePosition() {
            for(let i = 0; i < this.listProducts.length; i++) {
                if(this.listProducts[i].checkbox === true) {
                    this.listProducts.splice(this.listProducts[i], 1);
                }
            }
        }

The value of the checkbox (true or false) is written in the object, so there is a comparison on this element

listProducts: [
          {
            name: 'Нож складной WENGER Evolution ,"Автобус" ,13 функций, 85 мм.WENGER',
            checkbox: true,
            image: require('./assets/product1.png'),
            price: 400,
            count: 10,
            sum: 0,
            showPopup: false
          },
          {
            name: 'Рюкзак WENGER «NEO»',
            checkbox: false,
            image: require('./assets/product2.png'),
            price: 200,
            count: 3,
            sum: 0,
            showPopup: false
          },
          {
            name: 'Перьевая ручка Waterman Hemisphere Essential, перо: нержавеющая сталь. WATERMAN',
            checkbox: true,
            image: require('./assets/product3.png'),
            price: 600,
            count: 1,
            sum: 0,
            showPopup: false
          }
        ],

I'm probably approaching the question in the wrong direction.