Remove item from cart permanently in Vue.js and Shopify using AJAX [duplicate]

问题

Looking for some help with removing a product from a MiniCart using Vue.js in a shopify theme. Below you can see the minicart.liquid file and below that the cart data being stored in the datat property. The remove function does remove the ite, however when the browser id refreshed the product reappears and is not saved. Looking for some guidence on solving this issue.

I have also tryied this - this.cart.items.splice(this.cart.items.indexOf(found), 1); the object is delted, but when the page is refreshed the products shows in the cart again.

  <template v-if="cart">
      <li class="media" v-for="(item, index) in cart.items">
          <template v-if="item.image">
              <a :href="item.url">
                <img class="img-fluid mr-4 mb-2" width="150" :src="item.image" alt="">
              </a>
          </template>
          <div class="media-body">

              <h5 class="title"><a :href="item.url">${ item.product_title }</a></h5>

              <template v-if="!item.product_has_only_default_variant">
                <p>${ item.variant_title }</p>
              </template>

              <div class="price">
                <template v-if="item.original_line_price != item.line_price">

                  <span class="visually-hidden">{{ 'cart.label.discounted_price' | t }}</span>
                    ${ item.price | money }
                  <span class="visually-hidden">{{ 'cart.label.original_price' | t }}</span>
                  <span>${ item.original_price | money }</span>

                </template>

                <template v-else>
                    ${ item.price | money }
                </template>
              </div>

              <!-- this is the function not working correctly -->
              <span @click="remove(item)">${ item.original_price | money }</span>


              <div class="input-group quantity mt-3">

                  <div class="input-group-prepend">
                    <!-- we add a click event listener to call the decrement function and pass item which refers to
                    the product variant as the parameter as this is what we want to remove -->
                    <span class="input-group-text" @click="decrement(item)">-</span>
                  </div>

                  <input type="text" v-model="item.quantity" class="form-control w-25" aria-label="Product quantity">

                  <div class="input-group-append">
                    <!-- we add a click event listener to call the increment function and pass item which refers to
                    the product variant as the parameter as this is what we want to add -->
                    <span class="input-group-text" @click="increment(item)">+</span>
                  </div>

              </div>

          </div>
      </li>

    data(){
      return {
        //This data is stored in cartData.js
        cartData: store.state.cartData,
      }
    },

    methods: {
      //remove item from the Minicart
      remove(item){
        //this.cart.items refers to the data stored in our cartData object and used in the cart-template.liquid
        // i.e. <template v-for="(item, index) in cart.items">
        let found = this.cart.items.find(product => product.variant_id == item.variant_id);

        if(found) {
          //$delete is a vue function and can remove an item from an object
          //Now we want to remove the position/index of the variant item found above
          //We are saying if the product data fetched from Shopify matches our item product data, remove it
          this.$delete(this.cart.items, this.cart.items.indexOf(found))
          
        }
      },

I have also tried creating this function to get the variant_id and quantity and pass it to the shopify /cart/update.js API thene delete the productInfo without success.

      removeFromCart(){
        let productInfo = this.cart.items.reduce(
          (accumulator, target) => ({ ...accumulator, [target.variant_id]: target.quantity}),
        {});
        console.log(productInfo);
        //In order to update, we need to post an updates object with the key value pairs store in results
        axios.post('/cart/update.js', {updates: productInfo})
        .then((res) => {
          this.$delete(productInfo)
        })
        .catch((error) => {
          new Noty({
            type: 'error',
            timeout: 3000,
            layout: 'topRight',
            text: 'Cart not updated'
        }).show();
        })
      },

When I console.log the productInfo i get the ID an quanity, just not sure how to delte this onClick.