如何获取子元素&v-for生成的列表样式无法动态更新

<view v-if="allPairList.length > 0" v-for="(pair,index) in allPairList" :key="index" class="item">  
    <view class="row1">  
    <button type="" :data-index="index" @click="switch($event,pair.inWatch)">  
                  <uni-icons type="star-filled" :class="{active: pair.inWatch}" :color="pair.inWatch?'#ffaa00':'#999'" size="25" />   
         </button>  
    </view>  
</view>  

<script>  
data(){  
     return{  
           allPairList :[{  
                  name: '123',  
                  inWatch : false    
            }]  
     }  
}  
methods:{  
        switch(e, inWatch){  
        let elIndex = e.currentTarget.dataset.index  
            this.allPairList[elIndex].inWatch = ! this.allPairList[elIndex].inWatch     // 用这种方法可以改变inWatch属性的值，但icon的样式没变   
                e.currentTarget.firstElementChild.color = '#7e2c3a'             // 改用这种方法会报错,firstElementChild无法获取到uni-icon这个元素  
            console.log('点击了第'+elIndex+'个,pair = '+ this.allPairList[elIndex].inWathc)  
         }  
}  
</script>  

想要实现的是点击v-for生成的某个列表项之后，改变该列表项中icon的颜色(或icon类型)
试了两种方法都不太行，
第一种好像是因为v-for打印出的列表不支持动态更新class？
第二种不知道该怎么正确获取到被点击元素下的icon子元素，以及改变这个子元素的type或者class及color属性

请大侠们指点一二，谢谢