vue做商品选择如何保持样式

是这样的情况：
我知道，在vue里，实现点击高亮,可以使用诸如：

或

或

data: {
  defaultClass,
  isActive: true
},
computed: {
  classObject: function () {
    return {
      active: this.isActive
    }
  }
}

曾经都是用jquery操作dom去实现的。但是vue里，我想尽量不去操作dom，而是去操作数据的传递。
如何实现，选择颜色的时候，只有一个颜色是选中状态。选中尺码的时候，颜色依然保持选中状态的。反之，亦然。

正文开始：（Bug在这里）话不多说，直接撸代码

   
商品属性
      

        
for="(item, index) in goodsNames" :key="index" 
        :class="navIndex===index?'active':''"
         @click="inputFillEvent(index, item, $event)">{{ item }}
        
     
  

本来直接绑定了样式 :class="navIndex===index?'active':''" 可以直接改变选中li样式，

但是因为下面的div省事儿 也命名为hi-text控制样式，一点击页面，li选中样式就失效；

解决办法：单独命名div盒子 不重复命名