title: Vue 2 - Communication between components (sending and receiving data)
body: <p>So I working on app in Vue. I have problem with sending and receiving data between components. Already tried with <code>$dispatch/$broadcast</code>, <code>$emit/$on</code> but still now working. I want to send selected <code>active_club</code> from <code>ClubSelection.vue</code> to <code>vue_main.js</code>.</p>
  
  <blockquote>
    <p>Vue version: 2.0.3</p>
  </blockquote>
  
  <p>Structure of my app:</p>
  
  <ol>
  <li>vue_main - main Vue file
  
  <ol>
  <li>HeaderElement.vue (<strong>child of vue_main</strong>)
  
  <ol>
  <li>ClubSelection.vue (<strong>child of HeaderElement</strong>)</li>
  </ol></li>
  </ol></li>
  </ol>
  
  <p>Need to send active_club from ClubSelection to vue_main.</p>
  
  <blockquote>
    <p>ClubSelection.vue</p>
  </blockquote>
  
  <pre><code>    &lt;script&gt;
  
      export default{
          props: [
              'club', 'title'
          ],
          created(){
  
              //Get club list
              this.$http.get('/api/clubs', function(data) {
                  this.clubs = data;
                  console.log(data);
  
                  //read active club from parent
                  this.selected = this.$parent.$parent.active_club;
              });
  
          },
          data(){
              return{
                  clubs: [],
                  selected: null,
              }
          },
          watch: {
              selected: function(v) {
                  this.club = v;
  
                  //Post to database selected club
                  this.$http.post('/api/clubs/' + v + '/active')
  
              },
              club: function(v) {
                  this.selected = v;
  
                  //Change active_club at parent (THIS NOT WORKING)
  //              this.$emit('active_club', v);
  //              this.$parent.active_club = v;
                  club.$emit('active_club', v);
  
              },
          }
  
      }
  &lt;/script&gt;
  </code></pre>
  
  <blockquote>
    <p>vue_main.js</p>
  </blockquote>
  
  <pre><code>    const app = new Vue({
      router,
      data() {
          return {
              user: [],
              active_club: null,
              ranking: null
          }
      },
      created: function() {
          var self = this;
  
          this.$http.get('/api/users/me', function(data) {
              this.user = data;
              self.active_club = data.active_club;
  
          })
  
      }
  
  
  }).$mount('#app');
  
  const club = new Vue();
  
  //THIS NOT WORKING
  club.$on('active_club', function (id) {
  
      alert(id)
      this.active_club = id;
  });
  </code></pre>
  
  <p>Errors:</p>
  
  <blockquote>
    <p>Vue warn]: Error in watcher "club"  (found in component
    )</p>
    
    <p>vue_main.js:16924 Uncaught (in promise) ReferenceError: club is not
    defined</p>
  </blockquote>
  
  <p>I have tried many set ups, this is one of them. How to make this working?</p>