I have this issue which I can't figure out and there it is : I have to implement a checkbox for the users to select all folders on my website. But I also want that when one item or more (but not all) are selected, the checkbox shows an hyphen. I'm using Vue.js's framework Quasar for this project, and I'm kinda stuck so any help will be appreciated :)

Here some code of what I already tried, it works for the select all options but can't figure out how to resolve my case:

    <q-option-group
                v-model="folderModification.securityCompanyIDList"
                :options="$store.state.$ItfConnection.securityCompanyOptions"
                color="green"
                type="checkbox"
                :dark="$store.state.$tools.enableDarkMode"
              />
            </q-scroll-area>
          </div>
        </q-expansion-item>
        <q-expansion-item :label="$t('Button_configure_places')" dense dense-toggle
        header-style="font-size: 12px" header-class="text-grey" class="offset-1 col-10">
          <div>
            <q-scroll-area style="width: 100%; height: 300px">

incidentTypeIDListCheck(value) {
      this.folderModification.incidentTypeIDList = []
      if (value) {
        this.$store.state.$ItfConnection.incidentTypeOptions.forEach(incidentTypeOption => {
            this.folderModification.incidentTypeIDList.push(incidentTypeOption.value)
        })
      } 
    },