The problems OP tries to address are unfortunately a deep design flaw in mainstream frameworks like React and Vue. This is due to 2 properties they have:
1. They marry view hierarchy to state hierarchy
2. They make it very ergonomic to put state in components
I've been through this endless times. There are significant ways to reduce this friction, but in the end there's a tight ceiling.
This is why this kind of work feels like chasing a moving target. You always end up ruining something inherent to the framework in a pursuit to avoid the tons of footguns it's susceptible to.
It's also why I moved to Gleam and Lustre (elm architecture) and bid those PITAs farewell
Is this because Elm forces you to separate the model computations from the view computations, which then lets you compose the model shape in one place and the view shape in the other, or some other property of the framework that I'm not aware of?
Vue provides a computed feature that acts as a buffer layer between the view and the state, so the view and the state are not necessarily strictly bound
1. They marry view hierarchy to state hierarchy
2. They make it very ergonomic to put state in components
I've been through this endless times. There are significant ways to reduce this friction, but in the end there's a tight ceiling.
This is why this kind of work feels like chasing a moving target. You always end up ruining something inherent to the framework in a pursuit to avoid the tons of footguns it's susceptible to.
It's also why I moved to Gleam and Lustre (elm architecture) and bid those PITAs farewell