You cannot v-model a `reactive()` value directly

Describe the bug When (v-model) binding a reactive() object to the <FormKit type="form">, it will loose it’s reactivity almost completely.

Using a ref() instead is working and even updates the reactive object when changed.

The examples in the documentation use ref(), but I’m wondering whether reactive shouldn’t work as well, since it’s common to use reactive() for objects.

Reproduction

1. Open Playground: https://formkit.link/d3506792267c1eb4909331f1695d288c
2. Enter something in the first field -> most likely nothing will happen or only first 1-2 letters will be output above the field.
3. Enter something in the second field -> the input is displayed almost immediately (as expected) and also the input from the first field is shown.
4. Repeat the same with the third field -> again no updates, only after the middle input is changed.

Desktop

• OS: Mac 11.6.2
• Browser: Chrome 98.0.4758.80

[justin-schroeder]

Hi @tosling 👋

Thanks for the quality report! It turns out what you’re trying to do is not a supported feature of Vue 3 itself — that is — directly v-modeling a reactive() object. You can model on a property of a reactive object (yourReactiveObject.formValues), but not the object itself since that would causes whole-sale replacement of the actual object. That’s why a ref works, because it is actually operating on ref.value instead of the ref itself.

Perhaps, if there is any action to take here, we could throw an helpful exception for users who make the same mistake (Ive done it myself a few times).

[justin-schroeder]

Closing this issue as it won’t be resolved at the FormKit level and we now have some warnings in the docs to help users avoid it.