title: How to properly pass data from child to parent and parent to child component?
body: <p>First of all, this is my current structure</p>
  
  <p><code>CHILD COMPONENT</code></p>
  
  <pre><code>// HTML
  &lt;v-select
   v-bind:items="selectItems"
   v-model="selectedItem"
   label="Category"
   item-value="text"
  &gt;&lt;/v-select&gt;
  &lt;v-text-field
   label="Enter Value"
   type="number"
   v-model="compVal"
  &gt;&lt;/v-text-field&gt;
  
  // JS
  props: {
   selectItems: {
    type: Array,
    required: true
   },
   selectedItem: {
    type: String
   },
   compVal: {
    type: Number
   },
  }
  </code></pre>
  
  <p><code>PARENT COMPONENT</code></p>
  
  <pre><code>// HTML
  
  &lt;component :selecItems="selectOneItems" :selectedItem="selectOneItem" 
  :compVal="compOneVal"&gt;&lt;/component&gt;
  
  &lt;component :selecItems="selectTwoItems" :selectedItem="selectTwoItem" 
  :compVal="compTwoVal"&gt;&lt;/component&gt;
  
  // JS
  data () {
   return {
    selectOneItems: [someArray],
    selectedOneItem: null,
    compOneVal: 0,
    selectTwoItems: [someArray],
    selectedTwoItem: null,
    compTwoVal: 0
   }
  }
  </code></pre>
  
  <p><em>My Scenario</em></p>
  
  <p>1) At initial state, i have to get value from Child's Text Input and store it in local. (Child to Parent)
  2) After browser refresh, i will check for any local data, if it exsist, i have to populate child's value (Parent to Child)</p>
  
  <p><em>The error with current structure</em></p>
  
  <p>whenever i type or select something it triggers this error</p>
  
  <p><code>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. Prop being mutated: "compOneValue"</code></p>
  
  <p>so how to avoid this error? how to properly implement this structure, so that i can reuse this component wherever i want.</p>