选香蕉后点击添加，第二个框出来后让它默认选中的是苹果，第一个框中的选中的香蕉不会改变，求解答？

<template>
  <div>
    <div class="a" v-for="(item,index) in list" :key="index">{{index}}
      <div class="b">
        <div v-for="(it,ind) in item.bb" :key="ind" @click="clickIndex(ind)">
          <span :class="activeIndex==ind?'active':''">{{it.name}}</span>
        </div>
      </div>
      <el-button @click="add(item,index)">{{item.show?'+添加': '-删除'}}</el-button>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        list: [{ show: true,bb:[{name:'苹果',id:0},{name: "香蕉",id:1},{ name:"西瓜",id:2}]}],
        activeIndex:0,
      }
    },
    methods: {
      add(val, index) {
        if (val.show) {
          if( this.list.length <= 3){
            let data = {show: false,bb:[{name:'苹果',id:0},{name: "香蕉",id:1},{ name:"西瓜",id:2}]}
            this.list.unshift(JSON.parse(JSON.stringify(data)))
          }
        } else {
          this.list.splice(index, 1)
        }
      },
      clickIndex(idss,index) {
        this.activeIndex = idss
      }
    }
  }
</script>
<style lang="scss" scoped>
  .a { border: 1px solid #000000; display: inline-block; margin-right: 20px; }
  .b { display: flex; border: 1px solid #ff0000; height: 100px; line-height: 100px; text-align: center; margin: 50px; }
  .c { border: 1px solid #f0f0f0; }
  .active{ color: #ff0000; }
</style>

不能共用一个activeIndex，应该放到list的项中，每个项有自己的activeIndex