Как сделать вывод только одного значения count, а не всех сразу

const app = new Vue({
  el: '#app',
  data: {
    active_el: 0,
    gettosklads: [
        {
        id: 1,
        item: 'Деньги',
        class: 'money',
        count: 100
      },
            {
        id: 2,
        item: 'Аптечки',
        class: 'medicpack',
        count: 200
      },
      {
        id: 3,
        item: 'Наркотики',
        class: 'drugs',
        count: 300
      },
      {
        id: 4,
        item: 'Склад патрон',
        class: 'guns',
        count: 400
      },
      {
        id: 5,
        item: 'Склад маты',
        class: 'gunparts',
        count: 500
      },
    ],
    element: '',
    elementget: ''
  },
  methods:{
    activate (el){
        this.active_el = el;
    }
  }
});

@import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900);

* {
   padding: 0;
   margin: 0;
   box-sizing: border-box
}

button:active, button:focus {
   outline: none
}

.gettosklad {
   display: flex;
   width: 64.81481vh;
   height: 35.64815vh;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-right: -50%;
   transform: translate(-50%, -50%);
}

.gettosklad>.left-col {
   display: flex;
   width: 30.55556vh;
   height: 100%;
   flex-direction: column;
   background: rgba(0, 114, 231, .4);
   border-radius: 1.85185vh 0 0 1.85185vh;
   box-shadow: 0 .37037vh 2.96296vh .27778vh rgba(0, 0, 0, .25);
   padding: 3.7037vh 2.77778vh 0 0;
   position: relative;
   cursor: pointer;
}

.gettosklad>.left-col>.tabs1 {
   display: flex;
   width: 100%;
   flex-direction: column;
   align-items: flex-end
}

.gettosklad>.left-col>.tabs1>.tab {
   color: hsla(0, 0%, 100%, .5);
   font-family: 'Montserrat';
   font-weight: 500;
   font-size: 2.03704vh;
   line-height: 2.2;
}

.gettosklad>.left-col>.tabs1>.tab:not(:first-child) {
   margin-top: 2.31481vh
}

.gettosklad>.left-col>.tabs1>.tab.active {
   color: #fff;
   font-family: 'Montserrat';
   font-weight: 700
}

.gettosklad>.left-col>.buttons {
   display: flex;
   width: 100%;
   justify-content: space-between;
   padding: 0 2.77778vh;
   position: absolute;
   left: 0;
   bottom: 2.77778vh
}

.gettosklad>.left-col>.buttons>button {
   width: 11.11111vh;
   height: 3.7037vh;
   background: hsla(0, 0%, 100%, .15);
   color: #fff;
   font-family: 'Montserrat';
   font-weight: 500;
   font-size: 1.66667vh;
   border: unset;
   border-radius: .74074vh
}

.gettosklad>.left-col>.buttons>button:active {
   filter: brightness(.8)
}

.gettosklad>.right-col {
   width: 34.25926vh;
   height: 100%;
   flex-direction: column;
   background: rgba(0, 0, 0, .45);
   border-radius: 0 1.85185vh 1.85185vh 0;
   box-shadow: 0 .37037vh 2.96296vh .27778vh rgba(0, 0, 0, .25);
   position: relative
}

.gettosklad>.right-col, .gettosklad>.right-col>.close {
   display: flex;
   justify-content: center;
   align-items: center
}

.gettosklad>.right-col>.close {
   width: 3.7037vh;
   height: 3.7037vh;
   background: hsla(0, 0%, 100%, .15);
   border-radius: 50%;
   position: absolute;
   top: 2.77778vh;
   right: 2.77778vh
}

.gettosklad>.right-col>.close:active {
   filter: brightness(.8)
}

.gettosklad>.right-col>.close {
   width: 3.7037vh;
   height: 3.7037vh;
   background: hsla(0, 0%, 100%, .15);
   border-radius: 50%;
   position: absolute;
   top: 2.77778vh;
   right: 2.77778vh
}

.gettosklad>.right-col>.close:active {
   filter: brightness(.8)
}

.gettosklad>.right-col>.close:before {
   content: "";
   display: block;
   width: 1.57407vh;
   height: 1.57407vh;
   background: url(../../img/x.svg) no-repeat 50%;
   background-size: contain
}

.gettosklad>.right-col>.icon {
   display: block;
   width: 22.12963vh;
   height: 18.24074vh;
   background: url(../../img/money.svg) no-repeat 50%;
   background-size: cover;
   margin-bottom: 3.7037vh;
   position: absolute
}

.gettosklad>.right-col>.icon.medicpack {
   background-image: url(../../img/heal.svg);
   width: 22.12963vh;
   height: 12.24074vh;
}

.gettosklad>.right-col>.icon.drugs {
   background-image: url(../../img/narko.svg);
   width: 22.12963vh;
   height: 13.24074vh;
}

.gettosklad>.right-col>.icon.guns {
   background-image: url(../../img/gun.svg);
}

.gettosklad>.right-col>.icon.gunparts {
   background-image: url(../../img/gunmatirials.svg);
   width: 21.12963vh;
   height: 22.24074vh;
}

.gettosklad>.right-col>.count {
   display: flex;
   width: 28.7037vh;
   height: 3.7037vh;
   justify-content: center;
   align-items: center;
   background: hsla(0, 0%, 100%, .15);
   color: #fff;
   font-family: 'Montserrat';
   font-weight: 500;
   font-size: 1.66667vh;
   border-radius: .74074vh;
   position: absolute;
   bottom: 2.77778vh
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id="app" class="wraper">
      <div class="gettosklad" id="gettosklad">
         <div class="left-col">
            <div v-for="gettosklad in gettosklads" :key="gettosklad.id" class="tabs1">
               <div :id="'gettosklad-' + gettosklad.class"
                    class="tab" 
                    @click="activate(gettosklad.id - 1)" 
                    :class="{ active : gettosklad.id - 1 === active_el}">{{gettosklad.item}}</div>
            </div>
            <div class="buttons">
               <button class="take" @click="take()">Взять</button>
               <button class="drop" @click="get()">Положить</button>
            </div>
         </div>
         <div class="right-col">
             <div class="close" id="exit" @click="closeGettoSklad()"></div>
             <div class="icon" :class="gettosklads[active_el].class"></div>
             <div class="count">Наличие: &nbsp;<span v-for="gettosklad in gettosklads">{{gettosklad.count}}</span></div>
         </div>
     </div>
   </div>