Vue.js: Get values of selected checkboxes

Question

I have my own checkbox component (multi-checkbox-select from here: https://qvault.io/javascript/how-to-create-a-custom-checkbox-form-in-vue/ ). I would like to output the selected values of the checkboxes as text, but I get only the currently selected one. What am I doing wrong?

<CustomCheckboxSelect
                v-model="optionsSelect"
                :options="options"
                checked="value"
                validation="required"
                input-has-errors-class="is-invalid"
                errors-class="invalid-feedback"
                error-behavior="submit"
                placeholder="Choose"
              />

<span class="test">{{ optionsSelect }}</span>

Answer 1

It seems that your component is emitting an input so you need to read that in the parent

<CustomCheckboxSelect
                v-model="optionsSelect"
                :options="options"
                checked="value"
                validation="required"
                input-has-errors-class="is-invalid"
                errors-class="invalid-feedback"
                error-behavior="submit"
                placeholder="Choose"
                @input="checkboxValue"
              />

and in your <script> add a method that reads that

 methods: {
    checkboxValue: function (boxValue) {
        console.log(boxValue);
      }
    }