VueJS Ссылки на панели навигации активируются только после уменьшения в браузере

Question

Моя панель навигации выглядит следующим образом:

    <ul>
      <li @click="ClickedLink(1)" :class="{'li-active': currentActive == 1}">
        <div class="line-break"></div>
        <p>Goals</p>
      </li>
      <li @click="ClickedLink(2)" :class="{'li-active': currentActive == 2}">
        <div class="line-break"></div>
        <p>Praise</p>
      </li>
      <li @click="ClickedLink(3)" :class="{'li-active': currentActive == 3}">
        <div class="line-break"></div>
        <p>Ideas</p>
      </li>
      <li @click="ClickedLink(4)" :class="{'li-active': currentActive == 4}">
        <div class="line-break"></div>
        <p>Rewards</p>
      </li>
      <li @click="ClickedLink(5)" :class="{'li-active': currentActive == 5}">
        <div class="line-break"></div>
        <p>Profile</p>
      </li>
    </ul>

Проблема в том, что первые две ссылки не работают / не активируются, но когда я уменьшаю масштаб и устанавливаю уровень масштабирования браузера на 80% , тогда они работают / кликабельны.

Кто-нибудь имеет какое-либо представление о том, что проблема может быть?