JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <app-checkbox
      v-for="category in categories"
      name="categories[]"
      :value="category.value"
      v-model="checked">
      {{ category.label }}
    </app-checkbox>
  </div>
</body>
</html>

Vue

Vue.component('app-checkbox', {
    model: {
        prop: 'checked',
        event: 'change'
    },
    props: ['name', 'value', 'checked'],
    template: `
        <label>
            <input 
                type="checkbox" 
                :name="name" 
                :value="value" 
                :checked="checked" 
                @change="$emit('change', $event.target.checked)">
            <slot></slot>
        </label>
    `
});

new Vue({
	el: '#app',
  data: {
  	categories: [
    	{label: 'Категория 1', value: 1},
      {label: 'Категория 2', value: 2},
      {label: 'Категория 3', value: 3}
    ],
    checked: [2]
  }
});