Vue使用@click幫當(dāng)下的DOM Group增加class的問題??

請問要如何使用Vue@click幫當(dāng)下的DOM Group增加class,
1).要如何@click .list-group-item就變成.list-group-item.active?
2).為什么在Vue使用jQuery時(shí)會(huì)觸發(fā)到li下的span???
有嘗試過使用$refs及jQuery都不成功，麻煩位大神幫解答~~

.list-group-item{
    list-style: none;
    display: inline-block;
    border: 1px solid #ddd;
    background-color: #eee;
    padding: 6px 18px;
    border-radius:8px;
    cursor: pointer;
}
.list-group-item.active{
    background-color: #333;
    color:#fff;
}
.list-group-item .sub{
    color:red;
    font-size: 12px;
}

<ul class="list-group">
    <li @click="listClick" class="list-group-item" ref="list">
        <span class="title">BTN</span><span class="sub">A</span>
    </li>
    <li @click="listClick" class="list-group-item" ref="list">
        <span class="title">BTN</span><span class="sub">B</span>
    </li>
    <li @click="listClick" class="list-group-item" ref="list">
        <span class="title">BTN</span><span class="sub">C</span>
    </li>
</ul>

methods:{
    listClick:function(){
        this.$refs.list.classList.add('active')
    }
    listClick:function(){
        $(event.target).addClass('active')
    }
}