I have a v-model on checkbox which values are assigned from a loop.
I want the click event to invoke a funtion where I need to access the data of the checked ones. When a click is trigerred, If I log the state it doesnot print the current clicked data of the checkbox. It prints previous clicked checkbox data. Should a event must be passed and accessed data in the function?

<div id="demo">

  <ul>

    <li v-for="mainCat in mainCategories">

      <input 

        type="checkbox" 

        :value="mainCat.merchantId"     

        id="mainCat.merchantId" 

        v-model="checkedCategories" 

        @click="check(checkedCategories)"

      > 

      {{mainCat.merchantId}}

    </li>

  </ul> 

  {{ checkedCategories }}

</div>

script:

var demo = new Vue({

  el: '#demo',

  data: {

    checkedCategories: [],

    mainCategories: [{

      merchantId: '1'

    }, {

    merchantId: '2'

    }] //testing with data use: [{done:false,content:'testing'}]

  },

  methods: {

    check: function(e) {

    console.log(this.checkedCategories,e)

    }

  }

})

Js fiddle:http://jsfiddle.net/bmpfs2w2/