How to properly work with props in Vue.js?

Question

Vue.js

Good afternoon, I can’t really understand how props work.
For example, there is a page that includes a separate component with textarea. This textarea can contain text received from the backend. I pass this text to the component in props, and then on the client I need to change this text and return it to the backend. If I try to modify text directly in props, I get a warning: "Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value".
Ok, let's say I duplicate the value of props in data (although this is in fact a duplication of code in a sense) and I will use it from there. And I even manage to somehow transfer the new text to the backend. But if, for example, I need the text to dynamically change when it changes, not only in the textarea, but also in another component that is not originally associated with the textarea? In this case, is it better to store everything in vuex and use actions to make changes to it?
In a word, how is it correct to work with props as flexibly as possible?

Answer 1

Here is the official diagram. Parents to children through props, back through events.
1) An example of declaring child in the parent's template
-pass the data from the parent variable data1 to the child props somedata. -add parent method someMethod to handle custom event '
bestEventEver' coming from
childthis.$emit('bestEventEver', 'params pam pams')
If you need communication not at the parent-child level, but with everyone, here are the options

Answer 2

If the components are connected hierarchically, then when changing in the child, you need to throw events upstairs. If not related, then you can use Vuex, yes