For example, I want to dynamically show that clicking on any for element updates the display dynamically. How could this be achieved? In alpinejs

<div x-data="{products: [{title: 'test01', subtitle: 'lorem lorem lorem', tags: [{title: 'tag01'},{title: 'tag02'}]}, {title: 'test02', subtitle: 'lorem lorem lorem', tags: [{title: 'tag03'},{title: 'tag04'}]}]}">

<div class="view_dinamic_content">
<span class="view_title"></span>
<p class="view_description"></p>
<ul class="view_tags">
<li>
</li>
</ul>
</div>


<ul>
<template x-for="(product, index) in products" :key="index">
     <li x-text="product.title" @click="option = index">
     </li>
</template>
</ul>

</div>

any explanation of this please