Premium

ref vs reactive for Vue state shape

Guided tradeoff battle · Updated Mar 30, 2026

A Vue component manages several related form and filter fields. Would you keep each value in its own ref or group them in a reactive object?

Use separate refs
Use a reactive object

What you’ll build / What this tests

This premium vue tradeoff battle focuses on ref vs reactive for Vue state shape. Commit to a direction, justify it with the prompt constraints, and explain when the alternative wins.

Learning goals

Do these values behave like one object or several separate…
Are the fields reset, restored, or submitted together?
Which choice keeps the component easiest to read?
How will other code consume this state?

Key decisions to discuss

Pick a direction for this exact prompt, not the universal winner.
State the trade-off that matters most for this scenario.
Name when another option becomes the better answer.
Keep the explanation grounded in concrete constraints.

Evaluation rubric

Strong answers tie the recommendation to the prompt.
Good tradeoff reasoning explains downsides, not just upsides.
The answer should show when the recommendation stops being right.
Follow-up pressure should not break the argument.

Constraints / Requirements

Which direction would you defend for this prompt, and how would you explain when the other option is…
Fits best when values are independent, small in number, or easier to reason about as separate…
Fits best when several related fields behave like one draft, filter object, or form-shaped state boundary.

Options on the table

Use separate refs: Fits best when values are independent, small in number, or easier to reason about…
Use a reactive object: Fits best when several related fields behave like one draft, filter object, or form-shaped…

Common pitfalls

Arguing from preference instead of prompt constraints.
Pretending one option is always the winner.
Ignoring the main downside of the chosen direction.
Failing to explain when the alternative becomes stronger.