This is more of a general question as opposed to a question regarding a specific implementation.

I am pretty new to vue and have started playing around with component libraryies like PrimeVue. Now it seems that in PrimeVue most of the InputComponents work with using v-model. If you had a component that gets data via props from a parent component and then using that data as v-model for for example an InputText component you would get the warning that props are read-only. I understand that one should use the emit functionality to inform the parent component that the value has changed and then change it in the parent component to the new value and pass it to the child, but it poses as a challenge when all the components are working with v-model.

I have since found out that if you wrap the data in an object and bind the property of the object to the InputText one does not get a warning, but this seems more like an unpretty workaround than the actual solution.

Wouldn’t this be a reason to not use component libraries like for example PrimeVue if they enforce bad practices?

I think the following example might explain my problem a bit better:

If I have an application consisting of three components: Main.vue, List.vue and Data.vue

Main.vue requests the data from the backend and passes it to List.vue which displays the data in a table and the user is able to select one entry. Upon selection the List.vue components tells the Main.vue component via emit which entry was selected. The Main.vue component then passes the data of the entry to Data.vue which is the component for editing data via input elements. Now all the input components work with v-model and you have to bind the data that was passed via props to the Data.vue component to the InputText component which causes you to try to change the props value. Now if you were to pass the whole object to the Data.vue component you would not get the warning but you would be changing data that was essentially passed to the child as a prop, just wrapped in an object.