In vue, what should I do when I click on a component, add styles to that component, and erase the styles that I clicked on other tabbox components before?

vuetabboxtabbox

    <template>
      <div :class="tabStyle" :style="boxstyle"     @click="tabClick(name)">
    {{name}}
    <div class="selected-icon" v-show="isSelected"></div>
    <div class="tick" v-show="isSelected"></div>
      </div>
    </template>

    <script>
    export default {
          name: "tabbox",
          props: {
            name: {
              type: String,
              default: ""
            },
            boxstyle: {
             type: Object,
             defalult: {}
           }
         },
        data() {
            return {
              isSelected: false,
              tabStyle: {
                "selected-box": false,
                "unselected-box": true
              }
            };
        },
        methods: {
            tabClick(name) {
              this.isSelected = true;
              //this.$emit()
              //this.tabStyle["selected-box"] = true;
              //this.tabStyle["unselected-box"] = false;
              this.borderChange("selected-box","unselected-box")
              this.$emit("getTabName", name);
            },
            borderChange(first, second) {
              this.tabStyle[first] = true;
              this.tabStyle[second] = false;
            }
        }
    };
     </script>

    <style lang="scss" scoped>
    .tab-box {
      display: inline-block;
      position: relative;
      text-align: center;
      padding: 1%;
      font-size: 1rem;
      width: 20%;
    }
    .unselected-box {
      border: solid 1px -sharpb9a7a76b;
      @extend .tab-box;
    }
    .selected-box {
      border: solid 1px -sharp5ddb14;
      @extend .tab-box;
    }
    .selected-icon {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 0;
      height: 0;
      border-color: -sharp5ddb14 transparent;
      border-width: 0 0 20px 25px;
      border-style: solid;
    }
    .tick {
      position: absolute;
      right: 0;
      bottom: 0;
      color: -sharpfff;
      &::after {
        content: "";
      }
    }
    </style>

        <template>
        <div class="select-tab" :style="tabStyle">
            <Header></Header>
            <TabBox :name="""" :boxstyle="allStyles">
            </TabBox>
            <!-- <div v-if="Object.keys(categories).length>0"> -->
            <div class="label-content" v-for="(item,index) in categories" :key="index">
                <meaning-label :name="item.name"></meaning-label>
                <div class="box-content">
                    <TabBox @getTabName="getTabName" :name="_item.name" :boxstyle="styles" v-for="(_item,_index) in item.categoryList" :key="_index">
                    </TabBox>
                   
                </div>
            </div>
           
        </div>
    </template>
    
    <script>
    import TabBox from "@/components/FindMusic/SelectTab/TabBox";
    import MeaningLabel from "@/components/FindMusic/SelectTab/MeaningLabel";
    import Header from "@/components/FindMusic/SelectTab/Header";
    export default {
      components: {
        TabBox,
        MeaningLabel,
        Header
      },
      methods: {},
      data() {
        return {
          styles: {
            width: ""
          },
          allStyles: {
            width: "94%",
            margin: "2px 1.5%"
          },
          _categories: {}
        };
      },
      mounted() {
        this.categories = this.$store.state.CategoriesInfo.categories;
      },
      props: {
        tabStyle: {
          type: Object,
          default: {}
        },
        categories: {
          type:Array,
          default: []
        }
      },
      methods: {
        // getcategoriesById(id) {
        //   return this.$store.getter.getcategoriesById(id);
        // }
        getTabName(name){
          this.$emit("getTabName",name)
        }
      },
      computed: {
        // categories() {
        //   return this.$store.state.CategoriesInfo.categories;
        // },
        // all() {
        //   return this.$store.state.CategoriesInfo.all;
        // }
      }
    };
    </script>
    
    <style lang="scss" scoped>
    .box-content {
      display: inline-block;
      vertical-align: top;
      width: 75%;
      font-size: 0;
    }
    .label-content {
      margin-top: 10px;
    }
    </style>

// js props: { // ... activeName: {} // prop }, computed: { tabStyle () { // tabStyledata return { "selected-box": this.name === this.activeName, "unselected-box": this.name !== this.activeName } } }, methods: { tabClick (name) { this.isSelected = true; this.$emit("getTabName", name); // tabStyleborderChange } }

// template: active-name <TabBox @getTabName="getTabName" :name="_item.name" :boxstyle="styles" v-for="(_item,_index) in item.categoryList" :key="_index" :active-name="activeName"></TabBox> // js data () { return { // ... activeName: '' } }, methods: { getTabName (name) { this.activeName = name // activeName } }