<template>
    <pied-checkbox v-model="checkbox">option1</pied-checkbox>
</template>

<script>
import { ref } from 'vue'
export default{
    setup(){
        const checkbox = ref(false)
        return {
            checkbox
        }
    }
}
</script>

<template>
    <pied-checkbox v-model="checkbox1">option1</pied-checkbox>
    <pied-checkbox v-model="checkbox" disabled>option2</pied-checkbox>
</template>

<script>
import { ref } from 'vue'
export default{
    setup(){
        const checkbox = ref(false)
        const checkbox1 = ref(true)
        return {
            checkbox,
            checkbox1
        }
    }
}
</script>

<template>
    <pied-checkbox v-model="checkbox1" border>option1</pied-checkbox>
    <pied-checkbox v-model="checkbox" border>option2</pied-checkbox>
</template>

<script>
import { ref } from 'vue'
export default{
    setup(){
        const checkbox = ref(false)
        const checkbox1 = ref(true)
        return {
            checkbox,
            checkbox1
        }
    }
}
</script>

<template>
    <pied-checkbox-group v-model="checkbox2" data="datalist" keys="{label: 'label', value: 'value'}">
    </pied-checkbox-group>
</template>

<script>
import { reactive, ref } from 'vue'
export default{
    setup(){
        const checkbox2 = ref([])
        const datalist = reactive([
            {
                label: 'option1',
                value: 0
            },
            {
                label: 'option2',
                value: 1
            }
        ])
        return {
            checkbox2
            datalist
        }
    }
}
</script>