关于v-for动态渲染索引数组时，非响应的解决办法

问题描述：

在做一个购物车时遇到的问题，用到二维数组，外层用索引关联内层，类似,['a':[],'b':[]],需要哪个内层就渲染哪个。问题是，第一次获取到a的数值，需要渲染时，渲染不出来，需要从b切换到a才可以。上代码

<template>
  <div id="app">
    <button @click="getms">获取面食</button>
    <hr />
    <button @click='tab="ms"'>面食</button>
    <hr />
    <ul>
      <li v-for="(val,index) in clist" :key="index">
        <div v-html="val.name" class="name"></div>
        <div class="box">
          <div v-html="'￥'+val.age"></div>
          <div class="right">
            <span class="btn" @click="minu(val)" v-if="val.num>0">-</span>
            <span v-html="val.num"></span>
            <span class="btn" @click="add(val)">+</span>
          </div>
        </div>
      </li>
    </ul>
    <hr />
    <div>总价：{{count}}</div>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      list: [],
      count: 0,
      tab: "ms"
    };
  },
  computed: {
    clist() {
      return this.list[this.tab];
    }
  },
  methods: {
    getms() {
      var ms = [
        {
          name: "捞面条",
          age: 12,
          num: 0
        },
        {
          name: "炒面",
          age: 6,
          num: 0
        }
      ];
      this.list["ms"] = ms;
      // this.$set(this.list,'ms',ms);
    },
    minu(val) {
      val.num--;
      this.count -= val.age;
    },
    add(val) {
      val.num++;
      this.count += val.age;
    }
  }
};
</script>

<style>
#app {
  padding: 20px;
}
.name {
  font-weight: bold;
  font-size: 1.1rem;
}
.box {
  display: flex;
}
.box > div {
  flex: 1;
}
.right {
  text-align: right;
}
.right .btn {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #aaa;
  border-radius: 8px;
  text-align: center;
  line-height: 15px;
}
</style>

网上针对这种问题比较少，最后在官网文档中找到了答案，vue官网文档，Vue 不能检测对象属性的添加或删除

而关联数组，显然当成了对象解析，导致初次渲染不是响应式的

// this.list["ms"] = ms;
  this.$set(this.list,'ms',ms);

解决办法就是，将原始的添加方法改成vm.$set即可