Refactor @getodk/webform 1/2

From https://github.com/getodk/web-forms/pull/164#issuecomment-2297309308

- [ ] Consider some DOM-level way of identifying which component rendered what to the DOM
- [ ] Maybe there’s a lint rule (or maybe we could write one trivially?) to ensure consistent use of class/:class? It’s confusing every time I see both used on the same element. (And maybe I’ll get over that seeing it more?)
- [ ] Consider extracting event handlers into functions, especially where their logic is repeated. Case that stood out/made me think about this: several additions of @change="touched = true”.
- [ ] How do we choose between when to apply utility classes, versus using styles that achieve the same? (flex etc stand out)
- [ ] I’m normally not fond of “test helpers”, but have some concern about inconsistent use of mount and globalMountOptions: especially (but not only) whether or not PrimeVue plugin is in use. Worth considering a shared custom mount helper to ensure we’re testing all components under the same assumptions.
- [ ] Adding the same thing in multiple places can be a smell, may suggest there’s a composable component wanting to exist. Case that stood out/made me think about this: several additions of @change="touched = true”.
- [ ] Props naming:
- “add” is a weird prefix for something that’s not an action/handler/callback. In general, verbs tend to suggest some kind of event handling or interaction -> state reaction.

Review PR #164 and its referenced component changes first. The checklist covers DOM identification, class/:class consistency, event-handler extraction, utility styling, shared mount behavior, repeated logic, and prop naming; the issue does not define a single completion criterion.

Written by the indexing model from the issue text.