Vue.js @click регистрируется только половину времени

Question

Мне нужно переключать класс при нажатии на поле выбора, чтобы анимировать стрелку раскрывающегося списка.Это работает, но только в половине случаев.В приведенном ниже скриншоте вы можете увидеть, как стрелка, если отражает состояние класса, «расширилась».

Это HTML:

<div :class="{ expanded: compActive }" class="select-wrapper">
  <select v-model="companyId" @click="compActive = !compActive" @change="changeComp" name="company" id="company" >
    {% for company in companies %}
        <option value="{{ company.id }}">{{ company.name }}</option>
    {% endfor %}
  </select>
</div>

В моем экземпляре Vue.js есть простой ввод данных compActive: false

var app = new Vue({
  el: '#app',
  data: {
    compActive: false
  },
  ...

EDIT: добавлены стили источника

SASS

.select-wrapper {
  margin: 0 auto;
  position: relative;
  max-width: 450px;

  &:after {
    content: url("../img/arrow_right.png");
    position: absolute;
    right: 15px;
    top: 22px;
    transition-property: all;
    transition-duration: .2s;
  }

  &.expanded {
    &:after {
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      transform: rotate(90deg);
      transform-origin: 40% 45%;
    }
  }
}