Vue使用@click帮当下的DOM Group增加class的问题??

Question

请问要如何使用Vue@click帮当下的DOM Group增加class,
1).要如何@click .list-group-item就变成.list-group-item.active?
2).为什么在Vue使用jQuery时会触发到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')
    }
}

Answer 1

VUE 数据驱动，所以最超码应这样写，
不是很通用的方法，但是思想就应该是这样
https://jsfiddle.net/papersna...