javascript - Vue 2 - コンポーネント間の通信 (データの送受信)

Question

だから私はVueでアプリに取り組んでいます。コンポーネント間のデータの送受信に問題があります。で既に試しまし$dispatch/$broadcastた$emit/$onが、まだ動作しています。active_clubからClubSelection.vueに選択して送信したいvue_main.js。

ビューのバージョン: 2.0.3

私のアプリの構造:

1. vue_main - メイン Vue ファイル
   1. HeaderElement.vue ( vue_mainの子)
      1. ClubSelection.vue ( HeaderElementの子)

ClubSelection から vue_main に active_club を送信する必要があります。

ClubSelection.vue

    <script>

    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);

            },
        }

    }
</script>

vue_main.js

    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;
});

エラー:

Vue warn]: ウォッチャー "club" のエラー (コンポーネントで見つかりました)

vue_main.js:16924 Uncaught (in promise) ReferenceError: クラブが定義されていません

いろいろ設定してみましたが、これもその一つです。これを機能させる方法は？