Aetae

Потому что на этапе исполнения пути @/assets/images/image.jpeg не существует. Это не волшебство. На этапе компиляции vue-compiler проходится по известному списку атрибутов, а postcss по стилям и заменяют такие пути на результаты loader'a(по умолчанию: data-uri для мелких файлов и внутренние пути относительно spa для остальных). Простые произвольные строки(которой и является `url(@/assets/images/image.jpeg) no-repeat center`) само собой анализу и замене не подвергаются.
Надо явно получить результат loader'a(через require('путь')) и использовать его где нужно.

Условно так:

:style="`background: url(${require('@/assets/images/image.jpeg')}) no-repeat center`"

Т.к. webpack при сборке никак не может знать, что у вас окажется в this.name, а проект должен работать в любых условиях, то для работы import(`mdi-vue/${this.name}`) собирается вообще всё, что лежит в папке mdi-vue/.

Вы не может создать компонент "который будет подключать иконки за вас", потому чтобы иконка была подключена, она должна иметься в наличии. Чтобы она имелась в наличии на этапе исполнения, она должна быть собрана на этапе компиляции. Учитывая что заранее (из кода) неизвестно какая именно иконка вам понадобится на этапе исполнения, собраны на этапе компиляции вынуждены быть все иконки что есть.

Если у вас используется ограниченный набор иконок, то вам придётся в любом случае прописать импорт каждой вручную. Это можно оптимизировать написав собственный генератор, который на этапе сборки(или перед ним) пройдётся по файлам и соберёт использованные иконки и выплюнет их в файл с соответствующими импортами. Но проще импортировать что надо, там где надо.

C localStorage можно работать как с обычным объектом.

for(let [key, value] of Object.entries(localStorage)) {
  console.log(key, value)
}

Или просто сделать так:

<ul class="nav flex-column nav-pills side-nav" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  <router-link tag="li" class="list-group-item" active-class="activ" to="/nutrition/foodmenu">Перспективное меню</router-link>
  <router-link tag="li" class="list-group-item" active-class="activ" to="/nutrition/journal">Журнал питания</router-link>
  <router-link tag="li" class="list-group-item" active-class="activ" to="/nutrition/ambarbook">Амбарная книга</router-link>
</ul>

Можно просто положить где-то(во включённой в tsconfig.json) директории какой-нить global.d.ts и просто накидать туда часто используемых интерфейсов. )
Но, конечно, если интерфейсы связанны с какими-то модулями, правильно и хранить их в соответствующих модулях. Всё равно же используя модуль, вы оный импортируете, добавка к импорту ещё и интерфейса погоды не делает.

:class="{ text: login === item.liked }"

Имя файла в принципе можно получить как-то так:
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.
Проще написать скрипт который будет тебе эти индексные файлы на лету генерить.