In my app.vue I have this prompts component:

<Promtscomponent :promts='promts'></Promtscomponent>
<script>
    import Promtscomponentfrom '../components/Promtscomponent.vue';
    data() {return{
       promts:{'size':1,'promts':['simplepromt']}}

</script>

And in my Promtscomponent.vue I want to change promts property.
for example let’s say I want to add another promt to it. So promts={size:2,promts:["simplepormt1","simplepormt2"]

Then I need to pass this promts back to my app.vue where I can also do something with it (like pass to anther child component or send xhr to server)

I am a little bit stuck how do I do this?
I know I can use $emit to pass event from child but it feels so wrong
because:
I get promts from app.vue -> send them to child Promtscomponent.vue -> modify them in child component -> send modified version to app.vue and vue will automatically pass it again from app.vue to promtscomponent.vue because I define this as property <Promtscomponent :promts='promts'>

So what is correct way to do this?

Hope the question is clear.
What is the common and correct way

To pass object from parent to child, considering that This object will be modified in child component and passed back to parent.

So we can continue working with our object in parent component