Не работает переключение между слотами

const app = new Vue({
    el: '#app',
    data: {
      account: {
        username: "Nick",
        coins: "0",
        vip: null
      },
      slots: [
        {name: "fsdfds", level: 28, current: 228, max: 300, wallet: 5000, bank: 500100, fraction: null},        
        {empty: true},
        {empty: true,lock:true},
      ],
      slot: 0
    },
    methods: {
      UpdateInfoCharacter(data,acc) {
        var json = JSON.parse(data);
        var account = JSON.parse(acc);
        this.account.username = account;
        if(json[0]!=null){
          this.slots[0] = {name: json[0].Name, level: json[0].Lvl, current: json[0].Currentexp, max: json[0].Maxexp, wallet: json[0].Wallet, bank: json[0].Bank, fraction: json[0].Fraction}
        } 
        if(json[1]!=null){
          this.slots[1] = {name: json[1].Name, level: json[1].Lvl, current: json[1].Currentexp, max: json[1].Maxexp, wallet: json[1].Wallet, bank: json[1].Bank, fraction: json[1].Fraction}
        }
        if(json[2]!=null){
          this.slots[2] = {name: json[2].Name, level: json[2].Lvl, current: json[2].Currentexp, max: json[2].Maxexp, wallet: json[2].Wallet, bank: json[2].Bank, fraction: json[2].Fraction}
        }
      },
      currentSlot(index) { 
        this.slots[index] 
      },
      refillBalance() {
        // trigger to refill coins
      },

      unlockSlot(i) {
        // trigger to unlock slot
        console.log(i)
      },

      onClickDots() {
        console.log("click dots")
      },

      SelectChar() {
        mp.trigger("selectchar",this.slot);
      }
    }
});

@font-face {
    font-family: Montserrat-Regular;
    src: url("../assets/fonts/Montserrat-Regular.ttf");
  }
  
  @font-face {
    font-family: Montserrat-Medium;
    src: url("../assets/fonts/Montserrat-Medium.ttf");
  }
  
  @font-face {
    font-family: Montserrat-SemiBold;
    src: url("../assets/fonts/Montserrat-SemiBold.ttf");
  }
  
  @font-face {
    font-family: Oswald-Regular;
    src: url("../assets/fonts/Oswald-Regular.ttf");
  }
  
  * {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  
  body {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  
  #app {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: url("../assets/images/background.png") no-repeat center center;
    background-size: cover;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  
  #app > .characters {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
  }
  
  #app > .characters > .logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 50.92593vh;
    height: 14.81481vh;
    background: url("../assets/images/logo-default.png") no-repeat center center;
    background-size: contain;
    position: absolute;
    bottom: 95%;
    left: calc(50% - 25.46296vh);
  }
  
  #app > .characters > .logo.vip {
    background-image: url("../assets/images/logo-vip.png");
  }
  
  #app > .characters > .logo > span {
    color: #FFCD00;
    font-family: Montserrat-Medium, sans-serif;
    font-weight: 500;
    font-size: 2.40741vh;
    letter-spacing: -0.09259vh;
    text-shadow: 0 0.18519vh 0.37037vh rgba(0, 0, 0, 0.5);
    position: relative;
    top: 1.38889vh;
    left: 9.25926vh;
  }
  
  #app > .characters > .menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 42.59259vh;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  
  #app > .characters > .menu > .as-tab {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 9.25926vh;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(22.1825px);
            backdrop-filter: blur(22.1825px);
    border-radius: 2.22222vh;
    -webkit-box-shadow: 0 0.41667vh 3.28704vh 0.27778vh rgba(0, 0, 0, 0.25);
            box-shadow: 0 0.41667vh 3.28704vh 0.27778vh rgba(0, 0, 0, 0.25);
    padding-left: 2.40741vh;
  }
  
  #app > .characters > .menu > .as-tab:not(:first-child) {
    margin-top: 1.85185vh;
  }
  
  #app > .characters > .menu > .account > i {
    display: block;
    width: 6.48148vh;
    height: 6.48148vh;
    background: url("../assets/svg/circle-dollar.svg") no-repeat center center;
    background-size: contain;
  }
  
  #app > .characters > .menu > .account > .data {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 27.77778vh;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-left: 1.85185vh;
  }
  
  #app > .characters > .menu > .account > .data > span {
    color: #fff;
    font-family: 'Montserrat-Regular', sans-serif;
    font-weight: normal;
    font-size: 2.31481vh;
    line-height: 2.77778vh;
  }
  
  #app > .characters > .menu > .account > .data > span:last-child {
    color: #298AEE;
    font-family: 'Montserrat-SemiBold', sans-serif;
    font-weight: 600;
  }
  
  #app > .characters > .menu > .slot.active {
    border: 0.37037vh solid #fff;
  }
  
  #app > .characters > .menu > .slot > .level-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 6.48148vh;
    min-width: 6.48148vh;
    height: 6.48148vh;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: url("../assets/svg/level-bg.svg") no-repeat center center;
    background-size: contain;
  }
  
  #app > .characters > .menu > .slot > .level-icon > span {
    color: #fff;
    font-family: 'Oswald-Regular', sans-serif;
    font-weight: normal;
    font-size: 4.16667vh;
    text-shadow: 0 0.41667vh 0.41667vh rgba(0, 0, 0, 0.25);
  }
  
  #app > .characters > .menu > .slot > .level-icon > span.level {
    padding-right: 0.09259vh;
    padding-bottom: 0.09259vh;
  }
  
  #app > .characters > .menu > .slot > .lock-icon {
    display: block;
    width: 6.48148vh;
    height: 6.48148vh;
    background: url("../assets/svg/lock-slot.svg") no-repeat center center;
    background-size: contain;
  }
  
  #app > .characters > .menu > .slot > .data {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-left: 1.85185vh;
  }
  
  #app > .characters > .menu > .slot > .data > span {
    color: #fff;
    font-family: 'Montserrat-Regular', sans-serif;
    font-weight: normal;
    font-size: 2.31481vh;
  }
  
  #app > .characters > .menu > .slot > .data > span:last-child {
    color: #298AEE;
    font-family: 'Montserrat-SemiBold', sans-serif;
    font-weight: 600;
  }
  
  #app > .characters > .menu > .slot.active > .data > span {
    font-family: 'Montserrat-SemiBold', sans-serif;
    font-weight: 600;
  }
  
  #app > .characters > .menu > .slot > .char {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    margin-left: 1.85185vh;
    color: #fff;
    font-family: 'Montserrat-Regular', sans-serif;
    font-weight: normal;
    font-size: 2.77778vh;
  }
  
  #app > .characters > .menu > .slot.active > .char {
    font-family: 'Montserrat-SemiBold', sans-serif;
    font-weight: 600;
  }
  
  #app > .characters > .info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 35.18519vh;
    height: 42.59259vh;
    padding-top: 4.90741vh;
    margin-left: 2.31481vh;
  }
  
  #app > .characters > .info > .window {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 37.68519vh;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(2.03704vh);
            backdrop-filter: blur(2.03704vh);
    border-radius: 2.22222vh;
    -webkit-box-shadow: 0 0.41667vh 3.28704vh 0.30556vh rgba(0, 0, 0, 0.25);
            box-shadow: 0 0.41667vh 3.28704vh 0.30556vh rgba(0, 0, 0, 0.25);
    position: relative;
  }
  
  #app > .characters > .info > .window:not(.empty) {
    padding: 0 2.31481vh 2.31481vh;
  }
  
  #app > .characters > .info > .window:before {
    content: "";
    display: block;
    width: 100%;
    height: 8.7963vh;
    background: -webkit-gradient(linear, left top, left bottom, from(0), color-stop(0.42%, #2992FE), color-stop(95.58%, rgba(41, 138, 238, 0)));
    background: linear-gradient(0, #2992FE 0.42%, rgba(41, 138, 238, 0) 95.58%);
    opacity: 0.5;
    border-radius: 0 0 2.22222vh 2.22222vh;
    position: absolute;
    bottom: 0;
    z-index: 0;
  }
  
  #app > .characters > .info > .window > .level,
  #app > .characters > .info > .window > .empty-level,
  #app > .characters > .info > .window > .lock-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 12.12963vh;
    height: 11.94444vh;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: url("../assets/svg/level-bg.svg") no-repeat center center;
    background-size: contain;
    -webkit-filter: drop-shadow(0 0.41667vh 0.60185vh rgba(0, 0, 0, 0.5));
            filter: drop-shadow(0 0.41667vh 0.60185vh rgba(0, 0, 0, 0.5));
    position: absolute;
    top: -5.83333vh;
    left: calc(50% - 6.01852vh);
    z-index: 1;
  }
  
  #app > .characters > .info > .window > .level.lock-icon,
  #app > .characters > .info > .window > .empty-level.lock-icon,
  #app > .characters > .info > .window > .lock-icon.lock-icon {
    background-image: url("../assets/svg/lock-slot.svg");
  }
  
  #app > .characters > .info > .window > .level > span,
  #app > .characters > .info > .window > .empty-level > span,
  #app > .characters > .info > .window > .lock-icon > span {
    color: #fff;
    font-family: 'Oswald-Regular', sans-serif;
    font-weight: normal;
    font-size: 8.14815vh;
    padding-right: 0.27778vh;
    padding-bottom: 0.27778vh;
  }
  
  #app > .characters > .info > .window > .dots {
    display: block;
    width: 0.55556vh;
    height: 2.22222vh;
    background: url("../assets/svg/3dots.svg") no-repeat center center;
    background-size: cover;
    position: absolute;
    top: 2.31481vh;
    right: 2.31481vh;
  }
  
  #app > .characters > .info > .window > .dots:active {
    -webkit-filter: brightness(0.8);
            filter: brightness(0.8);
  }
  
  #app > .characters > .info > .window > .name {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: #fff;
    font-family: 'Montserrat-SemiBold', sans-serif;
    font-weight: 600;
    font-size: 3.7037vh;
    text-shadow: 0 0.41667vh 0.41667vh rgba(0, 0, 0, 0.25);
    margin-bottom: 0.37037vh;
    position: relative;
    z-index: 1;
  }
  
  #app > .characters > .info > .window > .faction {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: #fff;
    font-family: 'Montserrat-Regular', sans-serif;
    font-weight: normal;
    font-size: 1.66667vh;
    margin-bottom: 1.85185vh;
  }
  
  #app > .characters > .info > .window > .stats {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 1.85185vh;
  }
  
  #app > .characters > .info > .window > .stats > .stat,
  #app > .characters > .info > .window > .current-coins {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  
  #app > .characters > .info > .window > .stats > .stat:not(:first-child),
  #app > .characters > .info > .window > .current-coins:not(:first-child) {
    margin-top: 1.2037vh;
  }
  
  #app > .characters > .info > .window > .stats > .stat.current-coins,
  #app > .characters > .info > .window > .current-coins.current-coins {
    margin-bottom: 1.85185vh;
  }
  
  #app > .characters > .info > .window > .stats > .stat > i,
  #app > .characters > .info > .window > .current-coins > i {
    display: block;
    width: 3.7037vh;
    height: 3.7037vh;
    background: url("../assets/svg/exp-icon.svg") no-repeat center center;
    background-size: contain;
    -webkit-filter: drop-shadow(0 0.46296vh 0.46296vh rgba(0, 0, 0, 0.25));
            filter: drop-shadow(0 0.46296vh 0.46296vh rgba(0, 0, 0, 0.25));
  }
  
  #app > .characters > .info > .window > .stats > .stat.wallet > i,
  #app > .characters > .info > .window > .current-coins.wallet > i {
    background-image: url("../assets/svg/wallet-icon.svg");
  }
  
  #app > .characters > .info > .window > .stats > .stat.bank > i,
  #app > .characters > .info > .window > .stats > .stat.current-coins > i,
  #app > .characters > .info > .window > .current-coins.bank > i,
  #app > .characters > .info > .window > .current-coins.current-coins > i {
    background-image: url("../assets/svg/bank-icon.svg");
  }
  
  #app > .characters > .info > .window > .stats > .stat > .value,
  #app > .characters > .info > .window > .current-coins > .value {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 24.53704vh;
    height: 3.7037vh;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-family: 'Montserrat-Medium', sans-serif;
    font-weight: 500;
    font-size: 1.85185vh;
    border-radius: 0.92593vh;
    -webkit-box-shadow: 0 0.46296vh 0.46296vh rgba(0, 0, 0, 0.5);
            box-shadow: 0 0.46296vh 0.46296vh rgba(0, 0, 0, 0.5);
  }
  
  #app > .characters > .info > .window > .empty-slot-title,
  #app > .characters > .info > .window > .lock-slot-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: #fff;
    font-family: 'Montserrat-SemiBold', sans-serif;
    font-weight: 600;
    font-size: 3.7037vh;
    text-shadow: 0 0.46296vh 0.46296vh rgba(0, 0, 0, 0.25);
    margin-bottom: 1.2037vh;
  }
  
  #app > .characters > .info > .window > .empty-slot,
  #app > .characters > .info > .window > .lock-slot {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    color: #fff;
    font-family: 'Montserrat-Regular', sans-serif;
    font-weight: normal;
    font-size: 1.48148vh;
    letter-spacing: -0.05926vh;
    text-align: center;
    margin-bottom: 2.22222vh;
  }
  
  #app > .characters > .info > .window > .empty-slot.lock-slot,
  #app > .characters > .info > .window > .lock-slot.lock-slot {
    letter-spacing: -0.07407vh;
  }
  
  #app > .characters > .info > .window > .newname {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: #fff;
    font-family: 'Montserrat-Regular', sans-serif;
    font-weight: normal;
    font-size: 1.48148vh;
    letter-spacing: -0.05926vh;
    text-align: center;
    margin-bottom: 0.92593vh;
  }
  
  #app > .characters > .info > .window > .inputinform {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 30.55556vh;
    height: 3.7037vh;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-family: 'Montserrat-Medium', sans-serif;
    font-weight: 500;
    font-size: 1.85185vh;
    border-radius: 0.92593vh;
    -webkit-box-shadow: 0 0.46296vh 0.46296vh rgba(0, 0, 0, 0.5);
            box-shadow: 0 0.46296vh 0.46296vh rgba(0, 0, 0, 0.5);
    margin-bottom: 1.85185vh;
  }
  
  #app > .characters > .info > .window > .vip {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    color: #FFCD00;
    font-family: 'Montserrat-Medium', sans-serif;
    font-weight: 500;
    font-size: 1.85185vh;
    text-shadow: 0 0.18519vh 0.37037vh rgba(0, 0, 0, 0.5);
  }
  
  #app > .characters > .info > .window > .vip > i {
    display: block;
    width: 2.22222vh;
    min-width: 2.22222vh;
    height: 1.2963vh;
    min-height: 1.2963vh;
    background: url("../assets/svg/vip-corona.svg") no-repeat center center;
    background-size: cover;
    margin: 0 0.55556vh;
  }
  
  #app > .characters > .info > .window > button {
    width: 100%;
    height: 4.16667vh;
    background: #298AEE;
    color: #FFFFFF;
    font-family: 'Montserrat-Medium', sans-serif;
    font-weight: 500;
    font-size: 1.85185vh;
    border: unset;
    border-radius: 0.83333vh;
    position: relative;
    z-index: 1;
  }
  
  #app > .characters > .info > .window > button:active {
    -webkit-filter: brightness(0.8);
            filter: brightness(0.8);
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
                    <div class="characters">
                      <div v-if="account.vip" class="logo vip">
                        <span>VIP Gold до {{ account.vip }}</span>
                      </div>
                      <div v-else class="logo"></div>
                      <div class="menu">
                        <div class="account as-tab">
                          <i></i>
                          <div class="data">
                            <span>{{ account.username }}, у вас ${{ account.coins }}</span>
                            <span @click="refillBalance">Пополнить cчет</span>
                          </div>
                        </div>
                       <div v-for="(s, i, index) in slots" :key="i" :class="['slot as-tab', {active:slot===i}]" @click="currentSlot(index)">
                          <div v-if="!s.lock" class="level-icon">
                            <span v-if="s.empty">?</span>
                            <span v-else class="level">{{ s.level }}</span>
                          </div>
                          <div v-else class="lock-icon"></div>
                          <div v-if="s.lock" class="data">
                            <span>Слот {{ i+1 }}: Заблокирован</span>
                            <span>Разблокировать слот</span>
                          </div>
                          <div v-else-if="!s.lock && s.empty" class="char empty">Слот {{ i+1 }}: Пустой</div>
                          <div v-else class="char">Слот {{ i+1 }}: {{ s.name }}</div>
                        </div>
                      </div>
                      <div class="info">
                        <div v-if="!currentSlot.empty" class="window">
                          <div class="level"><span>{{ currentSlot.level }}</span></div>
                          <div class="dots" @click="onClickDots"></div>
                          <div class="name">{{ currentSlot.name }}</div>
                          <div v-if="currentSlot.fraction" class="faction">{{ currentSlot.fraction }}</div>
                          <div v-else class="faction">Не во фракции</div>
                          <div class="stats">
                            <div class="stat xp">
                              <i></i>
                              <div class="value">{{ currentSlot.current }} / {{ currentSlot.max }}</div>
                            </div>
                            <div class="stat wallet">
                              <i></i>
                              <div class="value">{{ currentSlot.wallet }}</div>
                            </div>
                            <div class="stat bank">
                              <i></i>
                              <div class="value">{{ currentSlot.bank }}</div>
                            </div>
                          </div>
                          <button class="login" @click = "SelectChar">Bойти</button>
                        </div>
                        <div v-else-if="currentSlot.empty && !currentSlot.lock" class="window">
                          <div class="empty-level"><span>?</span></div>
                          <div class="empty-slot-title">Пустий слот</div>
                          <div class="empty-slot">
                            Lorem ipsum dolor sit, amet consectetur <br>
                            adipisicing elit. Totam numquam rerum ea <br> 
                            sunt, accusantium cupiditate laudantium quia <br>
                            veritatis assumenda odio.               
                          </div>
                          <div class="newname">Имя Фамилия персонажа:</div>
                          <input v-model="name" class="inputinform">
                          <button @click="" class="create">Создать персонажа</button>
                        </div>
                        <div v-else class="window">
                          <div class="lock-icon"></div>
                          <div class="lock-slot-title">Заблокирован</div>
                          <div class="lock-slot">
                            Lorem ipsum dolor sit amet, <br> 
                            consectetur adipisicing elit. <br> 
                            Assumenda dolorem consectetur beatae <br> 
                            porro eligendi ad.
                          </div>
                          <div class="vip">+ Бонус <i></i> VIP Gold на месяц</div>
                          <div class="current-coins">
                            <i></i>
                            <div class="value">{{ account.coins }} MsMoney</div>
                          </div>
                          <button class="unlock" @click="unlockSlot">Разблокировать</button>
                        </div>
                      </div>
                    </div>
                </div>