first give you a demo , and then I'll talk to you about ideas.

<div id="app">
  <ul>
    <li v-for="(item,index) in tabbar.list" :class="{selected: index == tabbar.index}" @click="tabbar.index = index">{{index === tabbar.index?item.img_h:item.img}}</li>
  </ul>
</div>
new Vue({
  el: '-sharpapp',
  data: {
    tabbar: {
      list: [
        {name: 'ALL',img: '1.jpg',img_h: '1_h.jpg'},
        {name: 'ALL',img: '1.jpg',img_h: '1_h.jpg'},
        {name: 'ALL',img: '1.jpg',img_h: '1_h.jpg'},
        {name: 'ALL',img: '1.jpg',img_h: '1_h.jpg'}
      ],
      index: 0
    }
  }
})

this one of yours looks the same, so why not consider using loops? Since
is represented by 0123 , why not use a unified variable?
if the highlighted and unhighlighted names are regular, then you can judge whether you choose direct stitching? tabbar.index = = index?'_ hoggazzi'

code looks something like this

<script src="https://libs.cdnjs.net/vue/2.3.0/vue.min.js"></script>
<script src="https://libs.cdnjs.net/jquery/1.12.4/jquery.min.js"></script>
<style>
.b{background-color:black;}
.a{background-color:red;}
.optioncardbox{width:50px;}
.hide{display:none;}
</style>
<p style="line-height: 18px; font-size: 18px;  font-family: times;">
    <div id='tbar'  class="optioncardbox">
      <div v-for='(btn,key) in btns' class="optioncard optioncardtext"  @click="changetype(key)">      
        <p :class="{'hide':!(!btn.src1&&btn.selected)}" class="a">{{btn.text}}

        <p :class="{'hide':!(!btn.src1&&!btn.selected)}" class="b">{{btn.text}}

        <img :class="{'hide':!(btn.src1&&btn.selected)}" :src="btn.src1" alt="1"/>
        <img :class="{'hide':!(btn.src1&&!btn.selected)}" :src="btn.src2" alt="2"/>
        <p class="optioncardtip">{{btn.tip}}

      </div>
</div> 

<script>
$(function(){
var app=new Vue({
    el:'-sharptbar',
    data: {
      btns:[
      {selected:true,text:'All',tip:''},
       {selected:false,src1:'./pic1.png',src2:'./pic2.png',tip:''},
       {selected:false,src1:'./pic1.png',src2:'./pic2.png',tip:''},
       {selected:false,src1:'./pic1.png',src2:'./pic2.png',tip:''},
       {selected:false,src1:'./pic1.png',src2:'./pic2.png',tip:''},
       {selected:false,src1:'./pic1.png',src2:'./pic2.png',tip:''}
      ]
      },
   methods: {
        changetype:function(key) { 
        this.btns.forEach(function(e){e.selected=false});
         this.btns[key].selected=true;
       }
       }
  });
});

</script>

one lesson:
1, the east content of resource classes should be placed in the web template rather than in the code, which looks more convenient;
2, repetitive things must be put in the loop;
2.5, do not be specialized if you can be completely consistent (all use the same tag, not a mixture of p and img);
3, if there are no external resources preloaded (mainly pictures), try to use css control to show and hide instead of v-if for rendering control;

the way I do this is to use the index.
write a field of record index, change the value of that field when clicked, match the index currently clicked, and add class if equal.
is something like this

<nav class="st-top-category">
    <span class="st-item" :class="{cur:curcate === index}" v-for="(cat,index) in categoryList" :key="index" v-on:click="changecate(index,cat.type,cat.value)">{{cat.label}}</span>
</nav>


data () {
    return {
      curcate: 0,
      categoryList: []
    }
  },
methods:{
    changecate(index,type,value){
      this.curcate = index;
    }
}

the answers of several other people are basically complete. I would like to add a little thing here. For this kind of tab that is generally clicked on, the other tab that is not clicked is restored to its original state. In fact, you do not have to change it one by one each time. You only need to record which tab, you clicked last time to judge whether it is the same or different from the last click. If it is the same, there is no need to make any changes, if it is not the same, just change the state, in this case, the performance is better.

https://codepen.io/kingdil/pe.

1.tabbar pictures and text correspond one to one. The first consideration must be that the circular data format should be as follows

   tabs:[
                    {
                        title:'',
                        ico:'https://img.codeshelper.com/upload/img/2021/06/01/wrcbrktuxbc17670.png',
                        icon:'https://img.codeshelper.com/upload/img/2021/06/01/hrjypk2vvoz17671.png',
                    },
                    {
                        title:'',
                        ico:'https://img.codeshelper.com/upload/img/2021/06/01/e5uh34g5vkl17672.png',
                        icon:'https://img.codeshelper.com/upload/img/2021/06/01/hvoyd14etrn17673.png',

                    },
                    {
                        title:'',
                        ico:'https://img.codeshelper.com/upload/img/2021/06/01/fzh0th0lwo417674.png',
                        icon:'https://img.codeshelper.com/upload/img/2021/06/01/0x4szxnyrfo17675.png',
                    }
                ] 

2. After the selection, the picture changes, the text changes color, and the selected index value is set to curIdx,. When the index value is equal to the tabbar index value, the tabbar is selected. Add the selected class, and change the selected icon

 <ul class="tabs">
            <li :class="{'cur':curIdx==index}" v-for="(item,index) in tabs"  @click="selectTabs(index)">
               <div class="tab_ico">
                   <img :src="curIdx==index?item.icon:item.ico" alt="">
               </div>
                <div class="tab_title">
                    <span v-text="item.title"></span>
                </div>
            </li>
        </ul>

3. Bind the click event and pass the index value. When you click on which tabbar, curIdx equals to change the index value

  selectTabs:function(index){
                    this.curIdx=index;

                },