Почему удаляется всегда верхний элемент в списке?

<div class="cart-contents__body">
     <transition-group name="slide-fade" mode="out-in">
       <cart-item
         v-for="(product, index) in PRODUCTS"
         :key="product.id"
         :product="product"
         @deleteFromCart="deleteFromCart(index)"
         @incrementProduct="incrementProduct(index)"
         @decrementProduct="decrementProduct(index)"
       />
     </transition-group>
   </div>

Ключ прописан для элементов уникальный, но удаляется всегда верхний элемент, в чем может быть причина?