readonly state with an update function in Vue
Vue interview exercise on Provide, inject & stores, difficulty 2 of 3. Solve it in the editor beside a worked example, or cold in Interview mode with the example hidden; the tests run the moment you do.
Export SettingsKey and SettingsProvider, providing { settings: a readonly view of reactive { dark: false, fontSize: 14 }, update(patch) merging a partial object into it }, rendering its default slot; and SettingsPanel, which injects it and shows <p class="summary">dark · 14px</p> ("dark" or "light"), a <button class="dark"> toggling dark and a <button class="bigger"> adding 2 to the font size, both through update().
Each exercise pairs a worked example with a twin problem to solve in a real editor; the tests run the moment you do. Interview mode hides the example: solve it from memory, without the hint or the solution, and it counts as solved cold. Progress is saved in your browser, and in your account if you sign in.