Sorting is used when you want an interactive page with a collection list that has many items. If a section has v-collections attribute on it you can sort that list using an input element with v-model and v-on:change attributes.
<section class="pt-12 pb-24" v-collections="['posts', 'categories']" v-collections-init="">
<div class="container">
<div class="row mb-12">
<div class="col">
<select class="form-select mt-0 w-[250px]" v-model="postsOrder[0]" v-on:change="fetchFilteredData({})">
<option value="order.asc">Default</option>
<option value="name.asc">Votes (A to Z)</option>
<option value="name.desc">Name (Z to A)</option>
<option value="categoryItem.name.asc">Category</option>
</select>
<div class="flex flex-col gap-y-3">
<template v-for="post in posts" v-prerender="">
<div>
<h2 v-html="post.name"></h2>
</div>
</template>
</div>
</div>
</div>
</div>
</section>