feat(Table): add v-model:sort prop (#803)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/content/4.data/1.table.md

@@ -66,7 +66,7 @@ componentProps:
 ---
 ::
 
-You can specify the default direction of each column through the `direction` property. It can be either `asc` or `desc` and defaults to `asc`.
+You may specify the default direction of each column through the `direction` property. It can be either `asc` or `desc`, but it will default to `asc`.
 
 You can specify a default sort for the table through the `sort` prop. It's an object with the following properties:
 
@@ -156,6 +156,44 @@ Use the `sort-desc-icon` prop to set a different icon or change it globally in `
 You can also customize the entire header cell, read more in the [Slots](#slots) section.
 ::
 
+#### Reactive sorting :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+
+Sometimes you will want to fetch new data depending on the sorted column and direction. You can use the `v-model:sort` to automatically update the `ref` reactive element every time the sorting changes on the Table. You may also use `@update:sort` to call your own function with the sorting data.
+
+For example, we can take advantage of `useLazyRefresh` computed URL to automatically fetch the data depending on the sorting column and direction every time the `sort` reactive element changes.
+
+```vue
+<script setup>
+// Ensure it uses `ref` instead of `reactive`.
+const sort = ref({
+  column: 'name',
+  direction: 'desc'
+})
+
+const columns = [...]
+
+const { data, pending } = useLazyFetch(() => {
+  return `/api/users?orderBy=${sort.value.column}&order=${sort.value.direction}`
+})
+</script>
+
+<template>
+  <UTable v-model:sort="sort" :loading="pending" :columns="columns" :rows="data" />
+</template>
+```
+
+The initial value of `sort` will be respected as the initial sort column and direction, as well as each column default sorting direction.
+
+::component-example{class="grid"}
+---
+padding: false
+overflowClass: 'overflow-x-auto'
+component: 'table-example-reactive-sorting'
+componentProps:
+  class: 'flex-1'
+---
+::
+
 ### Selectable
 
 Use a `v-model` to make the table selectable. The `v-model` will be an array of the selected rows.