title: Pass an array between two sibling components
body: <p>So I have 'Home' component that there the user can create QR code. I have a method that create an array of those QR items.
  Now I need to pass this array into other component, it's a sibling component and not child-parent/parent-child relation.</p>
  
  <p>I tried to create eventBus but it's not going well.</p>
  
  <p><strong>App.vue</strong></p>
  
  <pre><code>&lt;template&gt;
  &lt;div class="container-fluid"&gt;
    &lt;app-header&gt;&lt;/app-header&gt;
        &lt;div class="row"&gt;
        &lt;div class="col-sm-12"&gt;
        &lt;router-view&gt;&lt;/router-view&gt;
        &lt;/div&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  import { eventBus } from './main';
  import Header from './components/Header.vue';
  export default {
    data() {
      return {
        urls: []
      }
    },
    created() {
      eventBus.$on('updateUrls', (data) =&gt; {
        this.urls.push(this.data);
      })
    },
    components: {
      'app-header': Header
    }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>Home.vue</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;h2&gt;Welcome to QR&lt;/h2&gt;
          &lt;p&gt;Generate qr codes on your own website&lt;/p&gt;
          &lt;hr&gt;
          &lt;div class="form-group"&gt;
              &lt;label&gt;Your website address:&lt;/label&gt;
              &lt;input type="text" class="form-control" v-model="address"&gt;
          &lt;/div&gt;
          &lt;a :href="url" target="_blank" class="btn btn-primary" :disabled="!address"&gt;Generate&lt;/a&gt;
          &lt;button class="btn btn-primary" :disabled="!address" @click="saveData"&gt;Save&lt;/button&gt;
          &lt;button class="btn btn-secondary" @click="clearInput" :disabled="!address"&gt;Clear&lt;/button&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import axios from 'axios';
      import { eventBus } from '../main';
  
      export default {
  
          data() {
              return {
                  address: '',
                  prefix: `https://www.qrtag.net/api/qr_4.png?url=`,
              }
          },
  
          computed: {
              url() {
                  const url = this.prefix + this.address;
                  return url;
              }
          },
          methods: {
              clearInput() {
                  this.address = ''
              },
              saveData() {
                  const data = {
                      url: this.url,
                      date: new Date()
                  }
  
                  eventBus.$emit('updateUrls', this.data);
              },
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>History.vue</strong></p>
  
  <pre><code>   &lt;template&gt;
      &lt;div&gt;
          &lt;router-link tag="a" class="nav-link" to="/dashboard"&gt;Generate another QR&lt;/router-link&gt;
          &lt;p :urls="urls" v-for="link in urls"&gt;{{ link.url }}&lt;/p&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { eventBus } from '../main';
      export default {
          props: ["urls"],
          data() {
              return {
  
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>export const eventBus = new Vue();
  </code></pre>