title: Vue 2 Change search placeholder and search id on parent component
body: <p>So, I have this search component I created because I will use it several time. </p>
  
  <p>My search Component (Child Component) looks like: </p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="input-group main-search"&gt;
      &lt;input class="input-group-field" type="text" value="" :placeholder="placeholder" :id="searchId"&gt;
      &lt;div class="input-group-button"&gt;
        &lt;input type="submit" class="button" value="Search"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  export default {
    props: ['placeholder', 'searchId'],
    name: 'search',
    data() {
      return {
      };
    },
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>and I included it into my Parent component (Search pages with Categories)
  the below example works for me... but I want to make it somehow possible to get data from returned data in this component and somehow to bind into. </p>
  
  <pre><code>&lt;template&gt;
    &lt;search placeholder="placeholder text" id="id number"&gt;&lt;/search&gt;
    &lt;p&gt;some text here &lt;/p&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>So is there any form passing data from returned data like: </p>
  
  <pre><code>  data() {
      return {
        searchProps: [
          {
            placeholder: 'Watafaka',
            searchId: '2',
          },
        ],
  </code></pre>
  
  <p>Looking forward for help from someone :) </p>