Не могу удалить товары из корзины в vue 3 с помощью pinia

Поэтому в журнале консоли говорится, что он удаляется из корзины, но я все еще вижу элементы в корзине... как я могу удалить их из корзины? Я использую pinia для управления состоянием, и тележка находится в состоянии. почему у меня не работает?

Код:

Магазин.vue

<template>
  <div class = "shop">
    Cart Items: <cart-badge :count = "cartLength">{{ count }}</cart-badge>
    <h1>shop</h1>
    <div class = "products" v-for = "item in Products" :key = "item.id">
      {{ item.name }} {{ item.price }}$
      <button @click = "storeCounter.addToCart(item)">Add to Cart</button>
    </div>
  </div>
</template>
<script setup>
import { useCounterStore } from "../stores/counter";
import Products from "../db.json";
import CartBadge from "../components/CartBadge.vue";
import { computed } from "vue";

const storeCounter = useCounterStore();

const cartLength = computed(() => {
  return storeCounter.cart.length;
});
</script>

Store.js(пиния)

import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", {
  state: () => ({
    cart: [],
  }),
  actions: {
    addToCart(id) {
      this.cart.push(id);
      console.info("test passed!");
    },
    removeFromCart(id) {
      this.cart.splice(id);
      console.info("removed from cart!");
    },
  },
});

Корзина.vue

<template>
    <div class = "cart">
        <h1>cart</h1>
        <div class = "cartitems" v-for = "item in storeCounter.cart" :key = "item.id">{{ item.name }} {{ item.price }}$
        <button @click = "storeCounter.removeFromCart(item.id)">X</button>
        </div>
    </div>
</template>

<script setup>
import { useCounterStore } from '../stores/counter';

const storeCounter = useCounterStore()

</script>