data (){
return {
    keys: []
    }
},
methods: {
    select (key) {
      this.keys.push(key)
      console.log(this.keys)
    }
}

but print on the console and find that there is no push, added directly after overwriting the previously added

and check that keys is empty in vue-detools
what is the reason for this

<!--specification-->
<template>
<section>
  <div v-for="(types,index) in keys" :key="index">
    <div :class="specStyle">
      <p :class="specTitle">{{types.keyname}}

      <checker
        type="radio"
        :default-item-class="checkDefault"
        :selected-item-class="checkSelected"
        :disabled-item-class="checkDisabled"
        >
        <checker-item v-for="value in types.values"
                      :key ="value.valueid"
                      :value="value.valuename"
                      :disabled="!value.optional"
                      @on-item-click="select(types.keyid, value)">{{value.valuename}}</checker-item>
      </checker>
    </div>
  </div>
</section>
</template>
<script type="text/ecmascript-6">
import { Checker, CheckerItem } from "vux"
import { sortNumber } from "@/assets/js/mUtils"
export default {
  name: "specification",
  props: {
    keys: {
      type: Array,
      required: true
    },
    details: {
      type: Array,
      required: true
    },
    specStyle: {
      type: String,
      default: function () {
        return this.$style.specifications
      }
    },
    specTitle: {
      type: String,
      default: function () {
        return this.$style["specifications-title"]
      }
    },
    checkDefault: {
      type: String,
      default: function () {
        return this.$style["checkbox-item"]
      }
    },
    checkSelected: {
      type: String,
      default: function () {
        return this.$style["checkbox-item-active"]
      }
    },
    checkDisabled: {
      type: String,
      default: function () {
        return this.$style["checkbox-item-disabled"]
      }
    }
  },
  data () {
    return {
      selectId: new Map(),
      detailArr: [],
      id2val: new Map(),
      keyids: []
    }
  },
  mounted () {  },
  methods: {
    initSku () {
      // id,map
      this.format()
      // map
      // console.log(this.id2val)
      /**
       *  key
       * 1. key,
       * 2. ,
       * 3. idmap,,()
       */
      this.keys.forEach(ele => {
        ele.values.forEach(val => {
          this.compare(val)
          // 
        })
      })
    },
    // 
    compare (val) {
      // map,number
      let id = val.valueid.toString()
      if (this.id2val.has(id)) {
        // id,
        if (val.optional !== undefined) {
          val.optional = true
        } else {
          this.$set(val, "optional", true)
        }
      } else {
        // ,
        if (val.optional !== undefined) {
          val.optional = false
        } else {
          this.$set(val, "optional", false)
        }
      }
    },
    /**
     * 
     * keyid,
     * value
     * */
    select (keyid, value) {
      this.keyids.push(keyid)
      console.log(this.keyids)
      /**
       * 1. value 
       * 2. ,$emit
       * 3. ,
       */
      if (value.optional) {
        let ids = []
        /**
         * map,,,
         * 1. idkeyid,
         * 2. ,
         * 3. ,
         * 4. 
         */
        if (this.selectId.has(keyid)) {
          if (this.selectId.get(keyid) === value.valueid) {
            this.selectId.delete(keyid)
          } else {
            this.selectId.set(keyid, value.valueid)
          }
        } else {
          this.selectId.set(keyid, value.valueid)
        }

        //  .value,key
        //  ids valueid
        this.selectId.forEach((v, k) => {
          ids.push(v)
        })
        // ,
        ids = ids.sort(sortNumber).join(";")
        /**
         * 1. idmap
         * 2. id
         * 3. map,
         * 4. map,
         */
        if (ids) { // ,
          // id
          let msg = this.id2val.get(ids)
          if (msg !== undefined) {
            // 1. 
            this.$emit("msg", msg)
            // 2. , msgundefined
            this.check(ids, keyid)
          } else {
            console.log(",")
          }
        } else {
          // ids,
          this.$emit("msg", {count: 1, price: 0, tiaoid: 0})
        }
      }
    },
    check (ids, keyid) {
      /**
       * 1.ids,ids
       */
      ids = ids.split(";")
      let kArr = []
      let selectAbout = []
      this.id2val.forEach((v, k) => {
        kArr.push(k.split(";")) // 
      })
      for (let i = 0; i < kArr.length; iPP) {
        if (this.isContained(kArr[i], ids)) {
          selectAbout.push(`${kArr[i].join(";")}`)
        }
      }
      // console.log(selectAbout)
      // 
      this.keys.forEach(ele => {
        ele.values.forEach(val => {
          // console.log(val)
          // 
          this.selectCompare(val, keyid, selectAbout)
        })
      })
    },
    selectCompare (val, keyid, selectAbout) {
      /** 
       *  
       *  1. keyid,
       *  2. keyid,
       */
      console.log(val, keyid, selectAbout)
      // selectAbout.forEach(e => {
      //   console.log(e)
      // })
    },
    // 
    isContained (arr1, arr2) {
      return arr2.every(val => arr1.includes(val))
    },
    // 
    format () {
      this.detailArr = this.details
      /**
       *  1. valueids
       *  2. 
       *  3. ,
       *  4. ,keys,keys
       */
      for (let i = 0; i < this.detailArr.length; iPP) {
        /**
         * 1.  ids
         * 2.  ids
         * 3.  id
         * 4.  
         * 5.  
         */
        let res = this.cutIds(this.detailArr[i].valueids) // id
        let detail = this.detailArr[i] // 
        /*
         * map,id,,,
         */
        for (let i of res) {
          if (this.id2val.has(i)) {
            let val = this.id2val.get(i).count
            val += detail.count
            this.id2val.set(i, {
              count: val,
              price: detail.price,
              tiaoid: detail.tiaoid
            })
          } else {
            this.id2val.set(i, {
              count: detail.count,
              price: detail.price,
              tiaoid: detail.tiaoid
            })
          }
        }
      }
    },
    // ids,
    cutIds (ids) {
      /**
       * 1. valuesids
       * 2. 
       */
      let idArr = ids.split(";")
      // console.log(idArr)
      let allKinds = new Set()

      for (var a2 = []; a2.push([]) < idArr.length;) {}
      var l = Math.pow(2, idArr.length) - 1
      for (var i = 1; i <= l; iPP) {
        var t = []
        for (var s = i, k = 0; s > 0; s >>= 1, kPP) {
        // eslint-disable-next-line
          if (s&1 === 1)
            t.push(idArr[k])
        }
        a2[t.length - 1].push(t.join(";"))
      }
      let set = a2.join(",").split(",")
      set.forEach(val => {
        allKinds.add(val)
      })
      return allKinds
    }
  },
  computed: {},
  components: {
    Checker,
    CheckerItem
  },
  watch: {
    // prop
    details () {
      this.initSku()
    }
  }
}
</script>
<style module lang="scss">
.specifications {
  font-size: 14px;
  line-height: 28px;
  text-align: left;
  box-sizing: border-box;
  background-color: -sharpfff;
  .specifications-title {
    font-weight: bold;
    text-align: left;
  }
  .checkbox-item {
    margin: 10px 15px 10px 0;
    border: 1px solid -sharpccc;
    padding: 10px 15px;
    font-size: 12px;
    line-height: 12px;
    border-radius: 3px;
    font-weight: bold;
  }
  .checkbox-item-active {
    border-color: $m_pink;
    background-color: -sharpfff4fa;
    color: $m_pink;
  }
  .checkbox-item-disabled {
    border-color: $f_4;
    color: $f_4;
  }
}
</style>