rewrite checkbox component as non-functional

src/components/checkbox/checkbox.js

@@ -1,44 +0,0 @@
-// TODO: Template-based functional component is supported in vue-loader 13.3.0+.
-// Also, somehow, props are not provided through 'context' even though they are defined.
-// Need to upgrade vue-loader
-
-import './checkbox.scss'
-
-export default {
-  functional: true,
-  name: 'Checkbox',
-  model: {
-    prop: 'checked',
-    event: 'change'
-  },
-  render (createElement, { data, children }) {
-    const { props = {}, attrs = {}, on = {}, ...rest } = data
-    const { name, checked, disabled, readonly, ...restAttrs } = attrs
-    const { change, ...restListeners } = on
-    const wrapperProps = {
-      attrs: restAttrs,
-      on: restListeners,
-      ...rest
-    }
-    const inputProps = {
-      attrs: {
-        name,
-        checked,
-        disabled,
-        readonly,
-        ...props
-      },
-      on: {}
-    }
-    if (change) {
-      inputProps.on.change = e => change(e.target.checked)
-    }
-    return (
-      <label class="checkbox" {...wrapperProps}>
-        <input type="checkbox" {...inputProps} />
-        <i class="checkbox-indicator" />
-        {children && <span>{children}</span>}
-      </label>
-    )
-  }
-}

src/components/checkbox/checkbox.vue

@@ -1,5 +1,18 @@
-@import '../../_variables.scss';
+<template>
+  <label class="checkbox">
+    <input type="checkbox" :checked="value" @change="$emit('input', $event.target.checked)">
+    <i class="checkbox-indicator" />
+    <span><slot></slot></span>
+  </label>
+</template>
 
+<script>
+export default {
+  props: ['value']
+}
+</script>
+
+<style lang="scss">
 .checkbox {
   position: relative;
   display: inline-block;
@@ -47,3 +60,4 @@
     margin-left: .5em;
   }
 }
+</style>