Trigger Side Effects in a Zag.js State Machine with the watch Property

Let's actually implement inputting values into our Pin input. We have 3 functions that need implemented. They are setFocusedValue, focusNextInput, and executeFocus. The first two will be pretty straight forward in grabbing values from context and our events and setting new values to our context.

When we finish implementing setFocusedValue and setFocusedInput we'll need a way to actually trigger our focus to be set in the DOM. This is where the watch property in a Zag.js State Machine comes into play. We will watch the focusedIndex context value and run executeFocus any time the focus index changes in our machine (e.g. when focusNextInput is triggered after an input event).