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

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