CheckBoxGroup.vue

<template>
    <div>
        <div v-for="option in options">
            <div class="flex">
                <label class="md:w-2/3 flex text-gray-500 font-bold text-sm leading-tight items-center">
                    <input class="mr-2" type="checkbox" :id="option.id" :value="option" v-model="checkedOptions">
                    <div class="w-48" v-text="option.description"/>
                    <div class="w-16 text-right" v-text="option.valueDescription"/>
                </label>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "CheckBoxGroup",
        props: ['options'],
        data() {
            return {
                checkedOptions: []
            }
        },
        computed: {
          sum() {
              return this.checkedOptions.reduce((sum, item) => sum + item.value, 0);
          }
        },
    }
</script>

<style scoped>

</style>