Fixed event propogation to work with arrays.

src/components/ButtonCheckbox.vue

@@ -1,7 +1,7 @@
 <template>
   <button class="button is-rounded"
-    :class="checked ? checked_class : unchecked_class"
+    :class="shouldBeChecked ? checked_class : unchecked_class"
-    v-on:click="click"
+    v-on:click="updateInput"
     >
       <slot></slot>
   </button>
@@ -10,22 +10,52 @@
 <script>
 export default {
   name: 'button-checkbox',
+  model: {
+    prop: 'checked',
+    event: 'change'
+  },
   props: {
     checked_class: {
       default: 'is-info'
     },
     unchecked_class: {
       default: ''
+    },
+    checked: {
+      default: false
+    },
+    value: String,
+    trueValue: {
+      default: true
+    },
+    falseValue: {
+      default: false
     }
   },
-  data () {
+  computed: {
-    return {
+    shouldBeChecked () {
-      checked: true
+      if (this.checked instanceof Array) {
+        return this.checked.includes(this.value)
+      }
+
+      return this.checked === this.trueValue
     }
   },
   methods: {
-    click () {
+    updateInput () {
-      this.checked = !this.checked
+      if (this.checked instanceof Array) {
+        let newValue = [...this.checked]
+
+        if (!this.shouldBeChecked) {
+          newValue.push(this.value)
+        } else {
+          newValue.splice(newValue.indexOf(this.value), 1)
+        }
+
+        this.$emit('change', newValue)
+      } else {
+        this.$emit('change', this.shouldBeChecked ? this.falseValue : this.trueValue)
+      }
     }
   }
 }