I'm importing Vue.js by CDN, and the "remove" method didn't work:

      <sidebar 
  :cart="cart" 
  :remove="removeItem"
  />
    <script src="https://unpkg.com/vue@next"></script>
    <script>
  let app = Vue.createApp({
    data() {
      return {
        cart: {}
      }
    },
    methods: {
      addToCart(name,index) {
        if (!this.cart[name]) this.cart[name]=0
        this.cart[name] += this.inventory[index].quantity
        this.inventory[index].quantity=0
      },
      removeItem(name){
        delete this.cart[name]
      }
  })
  app.component('sidebar',{
    props:['cart','remove'],
    template:`      
    <aside class="cart-container">
          <tbody>
            <tr v-for="(quantity,key,i) in cart" :key="i">
              <td><i class="icofont-carrot icofont-3x"></i></td>
              <td>{{key}}</td>
              <td>\${{getPrice(key)}}</td>
              <td class="center">{{quantity}}</td>
              <td>\${{ (quantity*getPrice(key)).toFixed(2) }}</td>
              <td class="center">
                <button @click="remove(key)" class="btn btn-light cart-remove">
                  &times;
                </button>
              </td>
            </tr>
          </tbody>

the google chrome gave the error that:

the error info

I'm told that this workaround only shows up when using CDN not npm. But I still wonder why "remove" here isn't considered as a function. Thx ahead.