Alianos

alert(i18n("Привет мир"))

Можно воспользоваться комментарием, вида:
Для строки

// eslint-disable-line no-unused-vars
... или ...
// eslint-disable-next-line no-unused-vars

или для блока:

/* eslint-disable no-unused-vars */
...
/* eslint-enable no-unused-vars */

Для того чтобы проигнорировать такое предупреждение один раз, нужно добавить специальный комментарий над строкой с объявлением функции:

// eslint-disable-next-line no-unused-vars
function unused() {}

Описание более продвинутой регулировки правил находится тут.

@mixin superVar($var, $number, $vh, $vw) {
  @media (min-aspect-ratio: 2/1) {
    #{$var}: $number * $vh;
  }
  @media (max-aspect-ratio: 2/1) {
    #{$var}: $number * $vw;
  }
}
.frame {
  @include superVar(--superVmin, 1, 2vh, 1vw);
  width: calc(10 * var(--superVmin));
  height: 10vmin;
  background: red;
}

Если я правильно понял о чем ты

Это происходит потому что классу .body задан режим отображения в виде display: flex с направлением flex-direction: row - таким образом два элемента выстраиваются на странице друг за другом в ряд по горизонтали (row), а свойство overflow: hidden скрывает содержимое выходящее за границы элемента, которому был назначен класс .body.
Отключив свойство overflow через DevTools браузера или в коде, увидите ту самую вторую кнопку (её маленький кусочек), а на странице в браузере появится горизонтальный скроллбар. Либо можно через DevTools просто навести на второй div и браузер подсветит где этот элемент находится в окне, скриншот:

Почему при нажатии tab одна кнопка будто пропадает, а другая появляется?
- потому что при помощи tab вы изменяете фокус с одного элемента на другой, и браузер автоматически фокусирует вас на вторую кнопку, учитывая при этом значение свойства overflow - оно как раз и скрывает от нашего взора вторую, не "активную" кнопку (потому что она становится за пределами фокуса, и не вмещается в текущий viewport страницы).
Как исправить это поведение в браузере?
- способов несколько и зависит от того что хотите в итоге получить.
Но пожалуй самыми правильными в рамках текущего кода будут один из этих:

1. Установить значение column в свойство flex-direction у класса .body
   
2. Убрать свойство flex-shrink у CSS селектора .body>div, тогда браузер не будет пытаться переносить элементы на новую строку/колонку согласно настройкам flex
   
   

Чувак, это называется циклы.

Что вы пристали к этим директивам. Директивы - нишевая фича, нужная в специфических общих случаях. Если вы пишите директиву для одного компонента - вы делаете что-то не так(99%).

Так вот @transitionend="mymethod" должно работать само по себе, без лишних телодвижений. В крайнем случае @transitionend.native="mymethod" если цель - другой компонент.

Или проще:

{
  computed: {
    divs() {
      // Массив ваших дивов, со всеми необходимыми параметрами
      return [{bg: ''}, {bg: ''}]
    }
  }
}

<div v-for="(div, index) of divs" :key="index" class="frame" :style="`background-image: url(${div.bg})`" >
  {{ index }}
</div>

Псевдокод компонента:

<div v-for="index of 10" :key="index" class="frame" :style="`background-image: url(${getImageUrl(index)})`" >
  {{ index }}
</div>

{
  methods: {
    getImageUrl(index) {
      return `/images/slides/${this.$assetsResolution}/${index}.jpg`;
    }
  }
}

В общем типа такого что-то. И никакого require, работать не будет.

P.S. Писал с телефона, не проверял.