Edit in JSFiddle

var bus = new Vue()

Vue.component('friend-list', {
    template: '<div class="friend-list"><h3>現在のフレンズ</h3>\
                     <ul>\
                        <li v-for="val in friends" v-bind:key="val.id">\
                          {{ val.name }} [{{ val.count }}]\
                        </li>\
                     </ul>\
                   </div>',
    data: function() {
        return {
            friends: [],
        }
    },
    created: function() {
        var self = this;
        bus.$on('add', function(prof) {
            self.friends.push(prof);
        });
        bus.$on('iine', function(id, callback) {
            self.friends.map(function(val) {
                if (val.id == id) {
                    val.count++;
                    callback(val.count);
                }
            });
        });
    },
});

Vue.component('friend-new', {
    props: ['id'],
    data: function() {
        return {
            count: 0
        }
    },
    template: '<div class="friend">({{id}}) <slot/> が仲間になった!\
            <a href="#" @click.prevent="iine">イイネ({{count}})</a></div>',
    mounted: function() {
        bus.$emit('add', {
            id: this.id,
            name: this.$slots.default[0].text,
            count: 0
        });
    },
    methods: {
        iine: function() {
            var self = this;
            bus.$emit('iine', this.id, function(count) {
                self.count = count;
            });
        }
    }
});

new Vue({
    el: '#app1',
});
<div id="app1">
  <friend-new id="f1">サーバル</friend-new>
  <friend-new id="f2">フェネック</friend-new>
  <friend-new id="f3">アライグマ</friend-new>
  <friend-list></friend-list>
</div>