title: Problems with modifying props directly in vuejs vuex
body: <p>I'm working in this web app, trying to build a searchbar filter which allows me to do my own query from writing whatever I want (if the API contains the data), but throws me always the same error:</p>
  
  <blockquote>
    <p>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: "Search".</p>
  </blockquote>
  
  <p>I was looking on some of your responses, trying to apply them to my case, but them gives me a massive error, turned to worst, here is part of my code, my original one:</p>
  
  <pre><code>  &lt;v-container&gt;
      &lt;input class='input'
          @input='sendingSelfSearch'
        placeholder="write words for search"
        type="text"
        v-model="Search"
      /&gt;
    &lt;/v-container&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    name: "SearchBar",
  
    props: {
        SearchBar:Object,
        Search:String
    },
  
    methods:{
        sendingSelfSearch(){
            this.$emit('receivingSelfSearch',this.Search)
        }
    }
  };
  &lt;/script&gt; 
  </code></pre>
  
  <p>And in this second part I'm receiving that component from 'Search' (component) to 'Home' (view):</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="home"&gt;
                &lt;img class='body' src='../assets/alli.jpg'/&gt;
                &lt;SearchBar @receivingSelfSearch='autoSearch' v-bind:Search='Search'&gt;&lt;/SearchBar&gt;... 
  &lt;/template&gt;
  
  &lt;script&gt;
  import {mapGetters} from 'vuex'
  import Filters from '../components/Filters.vue'
  import SearchBar from '../components/SearchBar.vue'
  
  export default {
    name: 'home',
    components: {
      Filters,
      SearchBar
    },
    data(){
      return {
         listCountries:'',
         listEvents:'',
         listModalities:'',
         Search:'',
      }
    },
    methods:{
      autoSearch(text){
         this.Search=text
      },
    },
    computed:{
         autoSearchFilter(){
            some code
    }
  </code></pre>
  
  <p>...the result of the query shows, but at same time I have this error in the devtool console, thus despite of being working is not 'correct' somehow.
  Any suggestions regarding this code where I should improve please?</p>