vue 选项卡切换，数据不响应。为啥了？

Question

代码如下，我的选项卡是，根据一个总分来渲染每一个分数。 每个分数对应相同的知识点，用户可以在相应的分数下高亮知识点。

每个分数选项卡切换和高亮是独立的。

为什么，3个分数按钮，，切换 不管用呢?

全部代码

<template>
    <div >
          <p style="margin-top:10px;">
            分数：
            <template v-for="n in score">
              <el-button  size="small"  v-html="n" :data-item ="JSON.stringify(item)"  @click="setKnowLedge(item,$event)"></el-button>
            </template>
          </p>
          <p style="margin-top:10px;">
         知识点：
            <span v-for="i in item.basetree" :key="i.basecodeVo+Math.random()">
              <el-button 
                v-for="j in i.sons"
                :key="j.idVo+Math.random()"
                :class="{checked:j.isRight}"
                class="buttonstyle"
                @click="treeChange(item,j,$event)">{{j.nameVo}}
              </el-button>
            </span>
        </p>
    </div>
</template>
<script type="text/javascript">
  import {strToUrl} from '../../main'
  export default {
    data (){
      return {
      }
    },
    props: ['item','score'],
    mounted: function () {
//      this.paperDetail();
    },
    watch:{
      code:'paperDetail'
    },
    methods: {
      treeChange(item,j,$event) {
          j.isRight = +(!j.isRight);
          j.isTrue = j.isRight;

          var dataItem = JSON.stringify(item);

         this.$nextTick(function(){

          console.log($($event.target));
            //console.log($($event.target).closest('.scoreBox'))
            $($event.target).closest('.scoreBox').find('.active').get(0).setAttribute('data-item',dataItem);
         })
      },
      setKnowLedge(item,$event){
        console.log($event.target)
         var dataItem = JSON.parse($event.target.getAttribute('data-item'));

         dataItem.active = true;

         Object.assign(item,JSON.parse(JSON.stringify(dataItem)));


         this.$nextTick(function(){
           console.log($event.target)
           //console.log(dataItem,22222)
           $($event.target).siblings().removeClass('active')
           $($event.target).addClass('active')          
         })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .buttonstyle {
    cursor: pointer;
    margin-bottom: 15px;
    margin-left: 10px;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 3px;
    border: 1px solid red;
    background-color: white;
    color: red;
    outline: none;
  }

  .checked {
    border: 1px solid #13ce66;
    color: #13ce66;
    outline: none;
  }
</style>

Answer 1

我很好奇，为啥在vue中，用jquery~~