Set element as active

I'm using tailwind and would like to make a menu where the active item has some classes like active:bg-gray-200 or something like that but how can I set that item to be active?

                    <!--begin:Navigation-->
                    <div v-for="nav in navigation">
                        <!--begin:Nav Section-->
                        <div v-for="(value, title) in nav" class="py-3 space-y-1 w-full">
                            <h3 class="text-gray-400 text-sm font-bold pl-3 mb-2">{{ title }} </h3>

                            <div v-for="item in value" :key="item.label"
                                 class="group text-base text-gray-400 font-normal">
                                <inertia-link :href="item.href"
                                              class="flex items-center py-2 px-6 group-hover:bg-gray-50 group-hover:cursor-pointer">
                                    <span class="group-hover:text-blue-500">{{ item.label }}</span>
                                </inertia-link>
                            </div>
                        </div>
                        <!--end:Nav Section-->

I would need to set inertia-link as active, if not I could make a method and set a class like this :class="[is_active(item.url) ? 'bg-gray-200' : '']" but I was wondering if I could set the element instead. Since I'm using inertia I can use the current url like $page.url along with the item.url to check if they're the same.

How can I do this?