title: How to share data between sibling vue.js components?
body: <p>Can someone help me share data between vue.js components? For example, I have a Table component that contains two components: a button and an input box. When I click on the button component, I want it to return data of the row it is in, including data in the input component. Right now, I am able to click the button and have it return the row data, except what's inside of its sibling input component. Does anyone have any idea how I can do this? Here's my fiddle to demonstrate what i've achieved so far and what I'm trying to do</p>
  
  <p>Below is the relevant code and here is my jsfiddle that also includes my HTML: <a href="https://jsfiddle.net/rfy7sqzf/2/" rel="nofollow noreferrer">https://jsfiddle.net/rfy7sqzf/2/</a></p>
  
  <p>My parent <code>Table</code> component:</p>
  
  <pre><code>Vue.component('my_table', {
    template: '#my_table',
    props: {
      data: Array,
      columns: Array,
      actions: Array
    }
  });
  </code></pre>
  
  <p>My two sibling components (<code>button1</code> and <code>input</code>)</p>
  
  <pre><code>const button1 = Vue.extend({
    template:'&lt;button class="btn btn-primary" @click="view"&gt;View&lt;/button&gt;',
    methods: {
      view: function () {
        console.log('--row data--', this.row_data)
      }
    },
    props: ['row_data']
  })
  
  const input = Vue.extend({
    template:'&lt;input type="text" /&gt;'
  })
  </code></pre>
  
  <p>My main Vue app:</p>
  
  <pre><code>var vm = new Vue({
    el: '#el',
    data: {
        actions: [
          {
            name: 'view',
            label: 'View Company',
            tmpl: button1
          },
          {
            name: 'qty',
            label: 'Quantity',
            tmpl: input
          },
        ],
        companies: [
          {
            company_name: 'abc',
            company_email: 'some_email',
            company_phone_number: '###',
          },
          {
            company_name: 'abc',
            company_email: 'some_email',
            company_phone_number: '###',
          },
          {
            company_name: 'abc',
            company_email: 'some_email',
            company_phone_number: '###',
          },
          {
            company_name: 'abc',
            company_email: 'some_email',
            company_phone_number: '###',
          },
          {
            company_name: 'abc',
            company_email: 'some_email',
            company_phone_number: '###',
          },
          {
            company_name: 'abc',
            company_email: 'some_email',
            company_phone_number: '###',
          },
          {
            company_name: 'abc',
            company_email: 'some_email',
            company_phone_number: '###',
          },
          {
            company_name: 'abc',
            company_email: 'some_email',
            company_phone_number: '###',
          },
          {
            company_name: 'abc',
            company_email: 'some_email',
            company_phone_number: '###',
          },
          {
            company_name: 'abc',
            company_email: 'some_email',
            company_phone_number: '###',
          },
        ],
        columns: [
          {
            field: 'company_name',
            label: 'Company',
          },
          {
            field: 'company_email',
            label: ' Email'
          },
          {
            field: 'company_phone_number',
            label: 'Phone #'
          },
        ],
    },
  });
  </code></pre>
  
  <p>Note - I understand that I could totally do this by putting data in the parent's <code>data</code> object &amp; passing the data as props, but this would only work if I had a minimal # of child/sibling components.. </p>
  
  <p>Thanks in advance!</p>