Vuejs click event from checkbox?

Use @change instead of @click. Click event is triggered before value is really changed.

<input type="checkbox" 
       :value="mainCat.merchantId" 
       id="mainCat.merchantId" 
       v-model="checkedCategories" 
       @change="check($event)">

http://jsfiddle.net/eLzavj5f/

If you'd like the function to be called after the value has been changed, you can wrap your handler functionality inside of this.$nextTick(). You can read about $nextTick, but the gist is

Defer the callback to be executed after the next DOM update cycle. Use it immediately after you’ve changed some data to wait for the DOM update.

So your handler will get called after the DOM gets updated, aka after your state has changed and the affects have been reflected in the DOM.

<input 
  type="checkbox" 
  :value="mainCat.merchantId"     
  id="mainCat.merchantId" 
  v-model="checkedCategories" 
  @change="check($event)"
> 

// ...

check (e) {
  this.$nextTick(() => {
    console.log(checkedCategories, e)
  })
}