How to achieve reactivity without reloading the component when responding/rendering inertia-laravel

problem of creating a shopping cart in laravel inertia vue bundle – I want to use transitionGroup to animate products in the cart, however the component reloads when I get information from laravel, the cart is in session memory.
my code looks like:
ProductComponent:

   methods: {
        addToCart(id) {
            router.visit(`/cart/add/${id}`, {
                method: 'post',
                onSuccess: () => {
                    console.log('Product added to cart');
                },
                preserveScroll: true, 
            });
        }
    }

cart:

            <TransitionGroup 
                name="cart-items-anim" 
                >
                <HeaderCartItem
                    v-for="item in cart"
                    :key="item.product.id"
                    :item="item.product"
                    :qty="item.qty"
                >
                </HeaderCartItem>
            </TransitionGroup>

controller:

  public function addToCart($id)
    {
        $product = Product::findOrFail($id);
        $cart = session('cart', []);
        $found = false;

        foreach ($cart as &$item) {
            if ($item['product']['id'] === $product->id) {
                $item['qty'] += 1;  
                $found = true;
                break; 
            }
        }
        if (!$found) {
            $cart[] = [
                'product' => $product,  
                'qty' => 1,           
            ];
        }
        session(['cart' => $cart]);
    }

HadleInertiaRequest:

return array_merge(parent::share($request), [
    'cart' => fn () => $request->session()->get('cart', []),

Maybe there are better ways to work with the shopping cart than I’ve come up with?