Aetae

Имя файла в принципе можно получить как-то так:
vue.config.js:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData({resourcePath}) {
          const vueFileName = resourcePath.match(/([^\\\/]+).vue$/i);
          if(vueFileName)
            return `$vue-file-name: "${vueFileName[1]}"`
        }
      }
    }
  }
}

В каждом Vue компоненте в sass у вас будет теперь переменная $vue-file-name с именем файла.
Но зачем?

Используем телепатию.

const data = [0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9];
const data2 = [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9, 2];


function narrow(data, length, precision) {
  const start = data[0];
  const end = data[data.length-1];
  const result = new Array(length);
  let step = (end - start) / (length - 1);

  if(precision) {
    if(step < precision) 
      throw new RangeError(`Шаг не может быть кратен ${precision} при длине результирующего массива ${length}`);
    step = (step / precision | 0) * precision; 
  }

  result[0] = start;

  while(--length)
    result[length] = step * length;

  return result;
}



console.log(
  narrow(data, 5, 0.5)
)
console.log(
  narrow(data2, 5)
)
console.log(
  narrow(data, 5)
)

Ну, во первых, так делать не надо.
А так два варианта:
1. Делать так как без всякого Vue - querySelector там, addEventListener... Вы сами отказались от удобства Vue использовав innerHTML.
2. Повесить @click на playField и смотреть на event.target.

Современное решение: современные фреймворки Vue, React, Angular и др.
Вы просто пишете шаблон, все биндинги осуществляет фреймворк.

Решение предыдущего поколения: шаблонизаторы типа Handlebars, Pug и др.

Ну какбэ очевидно, что вместо трёх колонок надо шесть и элементы, соответственно, двух и трёх колоночные.
Вообще же для такого лучше флекс подходит.

Замыкания.

Если svg - то иконка - currentColor, самому svg - boreder-radius и background-color.
Чтобы currentColor работал - svg надо подключать как svg, а не img: либо всем кодом, либо через use href.
По hover, соответственно для svg меняется color и background-color.

Если используешь img - то менять тебе придётся две img местами.

Ещё, как извращение, можно заюзать filter: invert(1) на картинке самолёта.)

Не слишком понял захрена оно именно в одном файле, но можете разложить es модулями логически по папочкам и собирать в один экспорт какой нить такой штукой:

Если юзаешь webpack то можно использовать require context.
Но тут уж никакого treeshaking'a или подсказок IDE.
Проще написать скрипт который будет тебе эти индексные файлы на лету генерить.

Ну, во-первых, тут у вас написана ложь.
console.log не вызывает неявного приведения к строке, а потому в консоли мы увидим не 8, а то что там и есть на самом деле, т.е. function inner() {}
toString же неявно вызывается именно в случае использования объекта как строки.
Например: console.log(sum(1)(2)(2)(3) + 'px') // 8px.
В целом же я бы не рекомендовал так делать.

Мб вам нужна просто meta viewport, а не извращаться?

function mod5(number) {
  var digit = number % 10;
  
  if(digit === 5 || digit === 0)
    return number;
  if(digit > 5)
    return number + 10 - digit;
  return number + 5 - digit;
}