Confusing props concept

[lotestudio]

With vue 3 the concept over props becomes more confusing for me. In my work I usually use 3 different kinds of props:

• props that act as like initial value for a local component ref. When local ref changes the prop stays untouched, and in some cases needs to restore the local ref to initial value from the prop.
• props that act as like the mutator of the component itself. If the prop changes from the parent the component state changes too, and the prop is read only for the component.
• props that act like a model or v-model. The prop has an initial value which can be mutated from the component via the update event.

Sometimes I want to have control of how the prop acts. Like v-model or like a local ref. For example, if I have a component which is placed in a laravel blade file the initial value of a prop is declared from a string and component uses it for initial value of ref. But if the component is in another vue component the prop comes from a ref and I want to act as v-model for that ref.

I know that is absolutely possible with the current state of vue, but i think that the process of this can be simplified and more clear.

[angelhdzmultimedia]

My apologies if I didn't understand your concept 100%, but I think the new defineModel built-in macro solves this.

We don't have to use emit() to update aprop, or use toRefs() to keep the properties being reactive.

#8018

[lotestudio]

defineModel is one of the main reasons for my post. In options of the function we have a "local" option, but we can't set it conditionally because its macro and "defineModel" becomes undefined.

[lotestudio]

Here is the "confusing" example... It's working somehow but it isn't clear: click.