Vue.js2 - $emit event not being captured by the parent component

I am trying to create a Bootstrap tabs component in Vuejs. The tabs component consists of two parts. First, the parent tabs-list component which contains multiple tab-list-item component. Here is the code for both of these-

//Vue component template for tabs list.
Vue.component('tabs-list', {
    template: `<ul class="nav nav-tabs nav-justified" role="tablist">
                <tab-list-item v-for="concept in concepts" :key="concept.id" :concept="concept" :selected="concept.active">{{ concept.title }}</tab-list-item>
            </ul>`,
    data() {
        return { 
            activeTab: 1,
            concepts: [ { title: 'Tab A', id:1, active: true}, 
                        { title: 'Tab B', id:2, active: false}, 
                        { title: 'Tab C', id:3, active: false}, 
                        { title: 'Tab D', id:4, active: false}, 
                        { title: 'Tab E', id:5, active: false}, 
                        { title: 'Tab F', id:6, active: false}, 
                        { title: 'Tab G', id:7, active: false}, 
                        { title: 'Tab H', id:8, active: false}]
        }
    },
    methods: {
        tabItemClicked(concept) {
            console.log(concept);
            this.activeTab = concept.id;
            this.concepts.forEach(tab=> {
                tab.active = (tab.id === concept.id);
            });
        }
    }

});

//Vue component template for tab list item.
Vue.component('tab-list-item', {
    props: ['concept', 'selected'],
    template: `<li role="presentation" :class="{active:concept.active}">
                <a :href='computedHref' :aria-controls="ariaControls" role="tab" data-toggle="tab" @click="tabClicked">
                    <img :src="aquaImage" class="image-responsive concept-image img-active">
                    <slot></slot>
                </a>
            </li>`,
    computed: {
        computedHref: function() {
            return "#concept"+this.concept.title 
        },
        ariaControls: function() {
            return "concept"+this.concept.title 
        },
        aquaImage: function() {
            return "/images/"+this.concept.title+"-aqua.png"
        }
    },
    data() {
        return {
            isActive: false
        }
    },
    mounted() {
        this.isActive = this.selected;
    },
    methods: {
        tabClicked: function() {
            this.$emit('tabItemClicked', [this.concept]);
        }
    }
});

So, here my tab-list-item should emit an event tabItemClicked when any of the tabs is clicked. However, I am not getting anything logged in the console. When I take a look at the Vue developer console, I do see the event getting emitted. But why is it not getting captured by the parent tabs-list method? Any help will be greatly appreciated!