User's input is changing the <FormKit type="form">'s value prop

[tosling]

Describe the bug
When assigning a const obj = ref({}) to a <FormKit type="form"> element using the :value` prop, the component is making changes to the prop.

Generally in Vue, components should not mutate props, so that behavior comes unexpected.
(see. https://vuejs.org/guide/components/props.html#one-way-data-flow)

When objects and arrays are passed as props, while the child component cannot mutate the prop binding, it will be able to mutate the object or array's nested properties. This is because in JavaScript objects and arrays are passed by reference, and it is unreasonably expensive for Vue to prevent such mutations.

The main drawback of such mutations is that it allows the child component to affect parent state in a way that isn't obvious to the parent component, potentially making it more difficult to reason about the data flow in the future. As a best practice, you should avoid such mutations unless the parent and child are tightly coupled by design. In most cases, the child should emit an event to let the parent perform the mutation.

If - as a Developer - I want my data (outside of the component) being mutated, I can use v-model's two-way binding, which is available, too. https://formkit.com/essentials/forms#populating)

Reproduction

1. Open Playground: https://formkit.link/d586e48ef957b35f08e95aad67c3b389
2. The field is correctly pre-populated and also the debug output below
3. Type something in the input
4. Debug output changes, too, although v-model is not used.

Desktop (please complete the following information):

• OS: Mac 11.6.2
• Browser: Chrome 98.0.4758.80

[justin-schroeder]

In beta.3 we now clone the value prop before using it to prevent these kids of mutations.

[justin-schroeder]

If you change the playground example to beta.3 you can see the non-mutated props now

[tosling]

Love it! Thanks!