no-mutate | Immutable data structures and methods for plain JavaScript

My app is injecting multiple dynamic components into a view which then binds multiple inputs within each component to data in the parent.

Since v-model only works on a single value, I've found that .sync (added again after Vue 2.3) is the only way to two-way bind multiple inputs in each child component to my parent's data.

I've followed the exact syntax in the Vue docs and many tutorials, but when I use :value="value in my child component it inputs undefined in my data with no errors in console.

If I use v-model, it works as expected, however produces a no-mutate-props error in the console for every single keystroke I press.

I expect two-way binding to work without producing any errors of no-mutate-props in the console.

I think I need some kind of watcher to check a value that references my prop, but that seems a bit messy, and I'd have to implement it for like 30 components... I'd would prefer something cleaner if possible.