SOURCE

let VMultiply=Vue.extend({
  template:"#child",
  props:{
    selections:{
      type:Array,
      default:[]
    }
  },
  data () {
    return {
      nowIndexes:[]
    }
  },
  methods:{
    toggleSelection(index) {
      if(this.nowIndexes.indexOf(index)===-1) {
        this.nowIndexes.push(index)
      }else {
        this.nowIndexes.splice(this.nowIndexes.indexOf(index),1);
      }
      console.log(this.nowIndexes)
      this.$emit('on-change',this.nowIndexes)
    },
    checkActive(index) {
      return this.nowIndexes.indexOf(index)!==-1
    }
    
  }
})


new Vue({
  el:"#parent",
  components:{
    'VMultiply':VMultiply
  },
  data:{
    options:[
      {label:'answer1',value:0},
      {label:'answer2',value:1},
      {label:'answer3',value:2},
      {label:'answer4',value:3}
    ],
    selected:[]
  },
  methods:{
    set(attr,val){
      console.log('hehe',attr,val)
      this[attr]=val;
    }
  }
})

<template id="child">
  <div class="chooser-component">
    <ul class="chooser-list">
      <li v-for="(item,index) in selections"
          :title="item.label"
          :class="{active:checkActive(index)}"
          @click="toggleSelection(index)"
          >
        {{item.label}}
      </li>
    </ul>
  </div>
</template>

<div id="parent">
  <v-multiply :selections="options" @on-change="set('selected',$event)"></v-multiply>
  
  <div>{{this.selected}}</div>
</div>

.chooser-component {
    position: relative;
    display: inline-block;
  }
  .chooser-list li{
    display: inline-block;
    border: 1px solid #e3e3e3;
    height: 25px;
    line-height: 25px;
    padding: 0 8px;
    margin-right: 5px;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
  }
  .chooser-list li.active {
    border-color: #4fc08d;
    background: #4fc08d;
    color: #fff;
  }