You set up your 'Link Count' column to count field and use item.count slot in component, but internal table sorter has no idea what is this count field.

If you are sure that your details column will never has specific values like null, undefined, etc, you can change your code this way:

...
{ text: 'Link Count', value: 'details.length', width: '10%', sortable: true},
...
<template v-slot:item.details.length="{ item }">
  {{ item.details.length }}
</template>
...

(Or you don't even need to override this slot)

Otherwise, if you care about null/undefined, it'd be better to create computed property with your current data plus additional calculated count column, and use it instead of items in component. This way, for example:

<v-data-table
  :headers="headers"
  :items="computedDesserts"
  :items-per-page="5"
></v-data-table>
...
data () {
  return {
    headers: [
      { text: 'Dessert (100g serving)', value: 'name'},
      { text: 'Dessert Count', value: 'count' },
      ...
    ],
    desserts: [
      { name: 'Frozen Yogurt', calories: 159, ... },
      ...
    ],
  }
},
computed: {
  computedDesserts() {
    return this.desserts.map(item => {
      return { ...item, count: this.isValidString(item.name) ? item.name.length : 0 }
    });
  }
},
methods: {
  isValidString(val) {
    return typeof val === 'string'; //Or you can use your own condition
  }
}

CodePen demo with computed props is available here.

By default, <v-data-table> comes with a sortable functionality for all the columns. By your question what I understood if that by default you want count column sorted in ascending/descending order when grid loads.

If Yes, You can achieve that by using external-sorting feature of data grid.

Working demo :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      sortBy: 'count',
      sortDesc: false,
      headers: [
            {
                text: 'Name',
                align: 'start',
                value: 'name',
                width: '20%'
            },
            { text: 'Link Count', value: 'count', width: '10%' },
            { text: 'URL', value: 'details', width: '50%' },
            { text: 'Actions', value: 'id', width: '20%' }
        ],
      items: [
        {
          name: 'Frozen Yogurt',
          count: 159,
          details: 'Detail 1',
          id: 24
        },
        {
          name: 'Ice cream sandwich',
          count: 237,
          details: 'Detail 2',
          id: 37
        },
        {
          name: 'Eclair',
          count: 262,
          details: 'Detail 3',
          id: 23
        },
        {
          name: 'Cupcake',
          count: 305,
          details: 'Detail 4',
          id: 67
        }
      ],
    }
  }
})

<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/@mdi/font@6.x/css/materialdesignicons.min.css"/>
<div id="app">
  <v-app id="inspire">
    <div>
      <v-data-table
        :headers="headers"
        :items="items"
        :sort-by.sync="sortBy"
        :sort-desc.sync="sortDesc"
        class="elevation-1"
      ></v-data-table>
      </div>
    </div>
  </v-app>
</div>

Please let me know if my understanding is not correct or any further changes required as per the requirement.