Filtering 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 filter that list using multiple input elements with name, v-model, v-on:change and v-bind:value 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">
<div>
<template v-for="category in categories">
<div class="flex flex-row gap-x-2 items-center">
<input type="checkbox" class="form-check-input" v-model="postsFilters.category.array.eq" name="category" v-bind:value="category.id" v-on:change="fetchFilteredData({})" />
<label v-html="category.name"></label>
</div>
</template>
</div>
<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>