I have 2 classes:

export class Enrollment {
    private _productId = signal(0);
    private _price = signal(0);
    
    public productId = this._productId.asReadonly();
    public price = this._price.asReadonly();

    public setProductId(productId: number): void {
        this._productId.set(productId);
    }

    public setPrice(price: number): void {
        this._price.set(price);
    }
}

export class Cart {
    private _enrollments = signal<Enrollment[]>([]);
    
    public enrollments = this._enrollments.asReadonly();

    public addToCart(enrollment: Enrollment): void {
        this._enrollments.set([...this._enrollments(), enrollment]);
    }

    public removeFromCart(enrollment: Enrollment): void {
        this._enrollments.set(this._enrollments().filter(e => e !== enrollment));
    }

    public emptyCart(): void {
        this._enrollments.set([]);
    }
}

I’m looking for the best way to update data within a specific enrollment in the _enrollments array.

There are two options I see:

• Mutate Enrollment objects directly: I could define an equals function in the Enrollment class. This would allow me to modify enrollments directly using public methods, which would trigger any dependent signals relying on enrollment data changes.
• Create immutable Enrollment updates: I could write all enrollment manipulation logic within the Cart service and make those methods immutable. This wouldn’t directly mutate existing enrollments, but it feels less ideal.

Is there a better approach that maintains immutability and adheres to separation of concerns principles?