组件点击切换问题

我在写页面的时候老是机会遇见一个问题：

比如我要写一个一排的组件，我想要让每一个组件在点击之后都可以进行按下的样式。我要怎么做呢？

首先，这个问题，我们先定义两个样式，aside-list和active，当我们的数据activeId等于item.id的时候显示active的样式。先给acriveId一个初始值为1（默认为第一个样式），写一个点击事件handel，当div被点击时，将item.id赋值给activeId。这样active就会显示。

下面这个代码不能直接使用，只是一个逻辑：

<div v-for="(item,index) in asideData" :key="item.id" @active="handel(item.id)"
     class="aside-list" :class="{ 'active': activeId == item.id }">
           <div>aaa<div>
</div>


<script>
const asideData = ref([
    {
        id:1,
        name:'a
    } ,
    {
        id:2,
        name:'a
    }, {
        id:3,
        name:'a
    } ,{
        id:4,
        name:'a
    }    
])
const activeId = ref(1)
const handel = (id)=>{
    activeId = id
}
</script>
<style>
.aside-list{
width:100px;
height:100px;
}
.active{
width:100px;
height:100px;
backaground:red;
}
</style>