Edit in JSFiddle

var bus = new Vue()

Vue.component('friends-list', {
  template: '#friends-list',
  data: function() {
    return {
      friends: []
    }
  },
  created: function() {
    var self = this;
    bus.$on('add', function(prof) {
      self.friends.push(prof)
    })
    bus.$on('iine', function(id, count) {
      self.friends.map(function(val) {
        if (val.id == id) {
          val.count = count
        }
      })
    })
  }
})

Vue.component('friends-member', {
  props: ['member-id'],
  data: function() {
    return {
      count: 0
    }
  },
  template: '#friends-member',
  mounted: function() {
    bus.$emit('add', {
      id: this.memberId,
      name: this.$slots.default[0].text,
      count: 0
    })
  },
  methods: {
    iine: function() {
      bus.$emit('iine', this.memberId, ++this.count)
    }
  }
})

new Vue({
  el: '#app1'
})

<div id="app1">
  <friends-member member-id="f1">サーバル</friends-member>
  <friends-member member-id="f2">フェネック</friends-member>
  <friends-member member-id="f3">アライグマ</friends-member>
  <friends-list></friends-list>
</div>

<script type="text/x-template" id="friends-list">
  <div class="friends-list">
    <h3>現在のフレンズ</h3>
    <ul>
      <li v-for="val in friends" :key="val.id">
        {{ val.name }} [{{ val.count }}]
      </li>
    </ul>
  </div>
</script>

<script type="text/x-template" id="friends-member">
  <div class="friends">({{memberId}})
    <slot/> が仲間になった！<button @click="iine">イイネ({{count}})</button>
  </div>
</script>