Vuetify datatable select all with disabled checkboxes

I'm having an issue with datatables with select rows. I have rows which have the checkbox disabled, but the select all checks them anyway... Is this a bug?

I made a codepen: https://codepen.io/slayerbleast/pen/jOWjzWJ

How can I fix the selectAll checkbox only check the available checkboxes?

Template:

<v-content>
    <v-data-table
        v-model="selected"
        :headers="headers"
        :items="desserts"
        item-key="name"
        show-select
    >
    <template #item="{ item }">
        <tr>
            <td>
                <v-checkbox
                    :disabled="item.calories > 250"
                    class="pa-0 ma-0"
                    :ripple="false"
                    v-model="selected"
                    :value="item"
                    hide-details
                >
                </v-checkbox>
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </template>
    </v-data-table>
</v-content>

data:

data: () => ({
        selected: [],
            headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'start',
            sortable: false,
            value: 'name',
          },
          { text: 'Calories', value: 'calories' },
          { text: 'Fat (g)', value: 'fat' },
          { text: 'Carbs (g)', value: 'carbs' },
          { text: 'Protein (g)', value: 'protein' },
          { text: 'Iron (%)', value: 'iron' },
        ],
        desserts: [...]
})