List of Svelte state stores? - data-binding

Question

i'm new to svelte and state management in general so bear with me.
I currently have a store that models a full workout (todaysWorkout). I have some custom logic that I'd like to perform each time a change is made to the a field in an element in routine_details list. As there are more routines in the routines list and more routine_details in the routine_details list, finding the specific change in a big store will become costly.
Is there any way to have each element in the routine_details lists be its own state stores so I can add custom logic to the set function for each of those elements?
Hope this question makes sense. Thank you!
sample of the current todaysWorkout store
{
"name": "pushup-pullup workout",
"routines": [
{
"name": "pushup",
"routine_details": [
{
"reps": 30,
"status": "InProgress",
"weight": 0,
"index": 2,
"id": "3638090c-988e-44d3-8248-63ce42046fe3"
},
{
"reps": 15,
"status": "Completed",
"weight": 0,
"index": 1,
"id": "938dec96-dba0-4b8e-b260-50098fd3bb21"
},
{
"reps": 20,
"status": "Completed",
"weight": 0,
"index": 0,
"id": "537a24e5-c91b-474e-aef2-913d7dd09e54"
}
]
},
{
"name": "pullup",
"routine_details": [
{
"reps": 6,
"status": "NotStarted",
"weight": 0,
"index": 0,
"id": "b99016ce-0225-47ee-9f1c-f1f45bd984e8"
},
{
"reps": 6,
"status": "NotStarted",
"weight": 0,
"index": 4,
"id": "9a456c77-8866-449a-a31c-18c923be135e"
},
{
"reps": 6,
"status": "NotStarted",
"weight": 0,
"index": 3,
"id": "b2c4cdab-2cfd-47b4-97b2-209c04415066"
},
{
"reps": 7,
"status": "NotStarted",
"weight": 0,
"index": 2,
"id": "70d843a4-abf1-4d81-8d5f-77bc2bd18462"
},
{
"reps": 7,
"status": "NotStarted",
"weight": 0,
"index": 1,
"id": "2b477d0e-0b49-435f-b793-9ec082a4d9d9"
},
{
"reps": 6,
"status": "NotStarted",
"weight": 0,
"index": 5,
"id": "d7c47939-676d-48bb-a3c1-71da1d853e09"
}
]
}
]
}
what i've tried
I tried a dumbed down version of my ideal which is a list of stateful routines derived from the larger store todaysWorkout.
...
export const todaysWorkout = writable<WorkoutInstance | undefined>();
function createRoutine(routine: RoutineSession): Writable<RoutineSession> {
const { subscribe, set } = writable<RoutineSession | undefined>(routine);
return {
subscribe,
set: (value: RoutineSession) => {
set(value);
// perform custom logic here
}
} as Writable<RoutineSession>;
}
export const todaysRoutines = derived(todaysWorkout, ($todaysWorkout) => $todaysWorkout?.routines.map((routine) => createRoutine(routine)));
I can bind routines that exist in the todaysWorkout store fine and can see the store updating
{#each $todaysWorkout?.routines || [] as routine}
<RoutineChecklist bind:routine />
{/each}
but when I try to use the derived store instead I no longer see the store updating.
{#each $todaysRoutines || [] as routine}
<RoutineChecklist bind:routine />
{/each}