方法一是自己想出來的，方法二來自忘記哪裏看到的了

不知道是不是你要的效果：

方法一：利用input[type="radio"]

css代碼：

 1     input {
 2         display: none;
 3     }
 4     
 5     input[type="radio"]+label {
 6         /* 默認label的樣式 */
 7         /* content: "\a0"; */
 8         display: inline-block;
 9         padding: 10px 20px;
10         background-color
 
: #666;
11         margin-left: 20px;
12         color: #fff;
13         border-radius: 10px;
14     }
15     
16     input[type="radio"]:checked+label {
17         /* 當點擊label的時候背景顏色發生改變 */
18         background-color: aqua;
19     }
20     
21     .row {
22         display: inline-block;
23     }

html：

1         <div v-for="(option, index) in options">
2             <p>{{option.name}}</p>
3             <div class="row" v-for="(item, ind) in option.items" @click="select(index, ind)">
4                 <input type="radio" :name="index" :id="item.id" value="">
5                 <!--
 
 關鍵在於name這裏設為index，讓每一行選項的name一樣，屬性id和label的for屬性一致 -->
6                 <label :for="item.id">{{item.msg}}</label>
7             </div>
8         </div>    

vue實例：

 1         data() {
 2                 return {
 3                     id: [‘‘, ‘‘, ‘‘],
 4                     options: [{
 5                         items: [{
 6                             ‘msg‘: ‘綠色‘,
 7                             "id": "11"
 8                         }, {
 9                             ‘msg‘: "紅色",
10                             "id": "12"
11                         }],
12                         name: "顏色"
13                     }, {
14                         items: [{
15                             ‘msg‘: "XXX",
16                             "id": "13"
17                         }, {
18                             ‘msg‘: "L",
19                             "id": "14"
20                         }, {
21                             ‘msg‘: "XXL",
22                             "id": "15"
23                         }],
24                         name: "型號"
25                     }, {
26                         items: [{
27                             ‘msg‘: "32G",
28                             "id": "16"
29                         }, {
30                             ‘msg‘: "8G",
31                             "id": "17"
32                         }, {
33                             ‘msg‘: "4G",
34                             "id": "18"
35                         }],
36                         name: "版本"
37                     }]
38                 }
39             },
40             methods: {
41                 select(index, ind) {
42                     var itemId = this.options[index].items[ind].id; //獲取選中的id號
43                     this.id.splice(index, 1, itemId); //替換數組id[]中對應的元素，獲得所有選中的id
44                     console.log(this.id);
45                 }
46             }    

方法二：利用數組（把每一行當做數組第幾個位置eg：a[1]相當於這個數組裏的1，每行內選擇的元素的索引為數組對應位置的元素值eg：a[1] = xx相當於這裏的xx）

css代碼：

 1     span {
 2         display: inline-block;
 3         padding: 10px 20px;
 4         background-color: #666;
 5         margin-left: 20px;
 6         color: #fff;
 7         border-radius: 10px;
 8     }
 9 
10     .select {
11         background-color: aqua;
12     }
13     
14     .row {
15         display: inline-block;
16     }

html代碼：

1         <div v-for="(option, index) in options">
2             <p>{{option.name}}</p>
3             <span :class="{select:sel[index] == ind}" v-for="(item, ind) in option.items" @click="select(index, ind)">{{item.msg}}</span>
4         </div>    

vue實例：（data中的數據和上面的options一樣省略啦）

 1             data() {
 2                   return {
 3                       sel: [],
 4                       id: [],
　　　　　　　　　　　　　　　options: [],
 5                   }
 6               },
 7               methods: {
 8                   select: function(index, ind) {
 9                          this.sel[index] = ind; //讓數組sel的第index+1的元素的值等於ind
10                          this.sel = this.sel.concat([]); //因為數組是引用類型，對其中一個變量直接賦值不會影響到另一個變量（並未操作引用的對象），使用concat（操作了應用對象）
11                          this.id[index] = this.options[index].items[ind].id; //獲取選中的id
12                          this.id = this.id.concat([]);
13                          console.log(this.id);
14                   } 
15              }           

註意：方法二中的vue實例方法中說到引用類型，推薦看：https://www.cnblogs.com/gromimiss/p/6066268.html

vue實現淘寶商品詳情頁屬性選擇功能