vue-multiselect: Checkbox checked for option(s) and group

Question

Help me to set the option checkbox correctly, if the option is selected and whether the options are selected by group label.

<div id="groupSelect">
   <multiselect
      v-model="value"
      :options="options"
      placeholder="Type to search"
      label="name"
      track-by="name"
      :multiple="true"
      :close-on-select="false"
      group-values="groupList"
      group-label="groupName"
      :group-select="true"
      :show-labels="false"
      :disabled="isDisabled"
      @select="onSelect($event)"
      @remove="onRemove($event)">
      <template slot="selection" slot-scope="{ values, search, isOpen }">
         <span class="multiselect__single" v-if="values.length" v-show="!isOpen">
            Selected: {{ values.length }}
         </span>
      </template>

      <template slot="option" slot-scope="props">
         <div v-if="props.option.$isLabel">
            <input type="checkbox" v-model="props.option.checked">

            {{ props.option.$groupLabel }}
         </div>

         <div v-else>
            <input type="checkbox" v-model="props.option.checked">

            {{ props.option.name }}
         </div>
      </template>
   </multiselect>
</div>

<script type="module">
   var app = new Vue({
      el: '#groupSelect',
      components: { Multiselect: window.VueMultiselect.default },
      data () {
         return {
            isDisabled: false,
            value: [],
            options: [
               {
                  groupName: 'Group 1 [Click to select all]',
                  groupList: [
                     {
                        name: 'Option name 1 [Group 1]',
                        checked: false,
                     },
                     {
                        name: 'Option name 2 [Group 1]',
                        checked: false,
                     },
                     {
                        name: 'Option name 3 [Group 1]',
                        checked: false,
                     },
                  ]
               },
               {
                  groupName: 'Group 2 [Click to select all]',
                  groupList: [
                     {
                        name: 'Option name 1 [Group 2]',
                        checked: false,
                     },
                     {
                        name: 'Option name 2 [Group 2]',
                        checked: false,
                     },
                     {
                        name: 'Option name 3 [Group 2]',
                        checked: false,
                     },
                  ]
               },
            ]
         }
      },
      methods: {
         onSelect (option) {
            option.checked = true;
         },
         onRemove (option) {
            option.checked = false;
         }
      }
   })
</script>

By clicking on one option, the checkbox is checked. When clicking on a group label, the group options checkbox is not checked, and neither is the group label.

Preview: https://codepen.io/photomakes/pen/BaMQzVd

Unfortunately, I couldn't find a ready-made solution.

I will be glad for your assistance.