Vue Nested Checkbox Tree (Parent–Child Sync)

Challenge summary

Build a small Vue 3 UI that renders a parent checkbox and multiple child checkboxes. The parent controls all children, and the children keep the parent in sync (checked, unchecked, or indeterminate).

What you'll practice

• Render a parent checkbox with a label, plus several child checkboxes listed under it.
• - If all are checked → parent is checked.
• - If none are checked → parent is unchecked.
• - If some are checked → parent is indeterminate.
• The parent’s visual state shows indeterminate when selection is mixed.

What Premium unlocks

Premium unlocks the runnable workspace, behavioral checks, implementation walkthrough, and edge-case discussion.