Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

When updating the nested segment buttons of the Segment control the active segment button looses it's checked state even when the value matches the value of the containing Segment control.
The issue is similar to #28816 but for segment-button, i.e. the value changes after connectedCallback is fired but before any Stencil Watchers are configured. As a result, the value property watcher does not fire which causes updateState not to be called.
The fix in #28837 only fixes the problem on initial rendering, but not on subsequent updates to the nested segment buttons.

Expected Behavior

The active segment button should be highlighted when it's value matches the value of it's containing segment control - as was the case before standalone components.

Steps to Reproduce

1. Go to https://stackblitz.com/edit/angular-elmzeu
2. See the segment button "First" being highlighted
3. Wait 2 seconds
4. See the segment button "First" NOT being highlighted even though it's value matches the Segment control's value

Code Reproduction URL

https://stackblitz.com/edit/angular-elmzeu

Ionic Info

Ionic:

Ionic CLI : 5.4.16

Utility:

cordova-res : not installed
native-run (update available: 2.0.1) : 1.7.4

System:

NodeJS : v20.11.0
npm : 10.2.4
OS : macOS Unknown

Additional Information

In the Stackblitz reproduction example the nested segment buttons are updated with an additional button, but keeping same value for the first 2 buttons - the problem is the same though when rendering nested buttons each with a new value while updating the value of the Segment control at the same time to match one of the newly rendered buttons.