Aetae

Если я правильно тя понял:

<template>
  <input
    class="input border border-gray-400 appearance-none rounded w-full px-3 py-3 pt-5 pb-2 focus focus:border-indigo-600 focus:outline-none active:outline-none active:border-indigo-600"
    :value="name === null ? max_slippage : name"
    @input="name = $event.target.value"
    name="inputSlipage"
    id="slipage"
    type="text"
  >
</template>

<script>
  export default {
    data() {
      return {
        max_slippage: null,
        name: null
      }
    }
  }
</script>

P.S. Ты явно переборщил с универсальными классами. Используй лучше sass с переменными и миксинами.)

Как всегда с любым фронтом, очевидно.
Открываем терминал в нужной папке,
npm i - установить зависимости(чтоб была папка node_modules).
Если пишет, что команда npm неизвестна - надо поставить Node.js (LTS версию), перезапустить терминал и повторить.

Дальше смотрим какие там команды в scripts в package.json и запускаем то что похоже на нужное. Для vue это обычно:
npm run serve - для разработки;
npm run build - для сборки.

Вообще если такие проблемы возникают - стоит нагуглить какой-нить вводный урок в современный фронт.

Ты путаешь тёплое с мягким.
ES-modules - это стандарт javascript и работает он с файлами .js. Ни о каких .vue он знать не знает. Нельзя просто написать module и ожидать что оно само заработает.

Для отднофайловых компонентов сборка в любом случае нужна. Сборщики используют loader'ы, которые собственно и творят всю магию. Когда ты пишешь

import componentName from './components/template.vue'

сборщик находит в конфиге специальный loader для .vue и запускает его, тот обрабатывает файл и выдаёт в результате валидный js, который уже в свою очередь и импортируется. Вне сборщиков, в чистом браузере, поддержки loader'ов само собой (пока?) нет.

Пока asyncData не отработает - компонент не отрендерится и не замнотируется.
При стандартном подходе компонент сначал рендерит заглушку, потом грузит данные, потом рендерит что-то на основе данных, при asyncData он ничего не делает пока нет данных. Это удобнее.
Увы asyncData не идеальна, из-за архитектуры vue-router(я в своё время глубоко разбирался, увы без полного переписывания vue-router особо лучше не сделаешь), но всё равно удобней чем делать то же самое руками.

..// - это наркомания, поменяй на ../.
Но проблема не в этом. Vue - умный и для строковой img src неявно делает require.
Если же вы хотите использовать переменную, то тут уж придётся присать явно: loading: require('../../bla/bla.png').

В getPages замени все this.tableList на this.filteredTableList. В чём проблем?)

Без бэка нельзя. Нода и сокеты - бэк. У тебя уже есть firebase. Вот и юзай его.

В Vue 3 можно декларировать. А пока можно использовать web-types.

Ответ в тексте ошибки. На момент компиляции нет файла по адресу:

[папка где лежит компонент]/assets/svg/gas-station/refueling-nozlle.svg

Не надо так делать. Вместо этого watch на step и там делай запрос.

Всё работает, проблема где-то в другом месте:

Роутер экранироует все params, кроме специального исключения для *.

Если отдельный slug вам не очень нужен, то можно сделать так:

{
    path: '/product/*',
    name: 'Product',
    params: true,
    component: () => import(/* webpackChunkName: "Category" */ '../views/ProductCard')
 },

<router-link :to="{name:'Product',  params: {pathMatch: item.url}}</router-link>

v-bind: это то же самое что :. А key должен стоять на каждом итерируемом элементе. Уникальный для каждого элемента. Это очевидно, если понимать нахрена он вообще нужен(для обновления только тех кусков, что действительно обновились и сохранения тех, что не изменились).
Т.е. key тебе нужен ещё и на label.

Может стоит прочитать документацию?
Желательно всю. Там всё очень понятно и текста не много.

require не "берёт картинки из папки", require обрабатывает картинки loader'om и выдаёт в ответ результат. Статический результат, который попадает в бандл.
require(`./img/${name}.png`);- не значит "взять картинку по имени name из папки img во время исполнения", это значит "во время компиляции взять все картинки с маской './img/*.png', обработать loader'ом, получить для каждой статическую ссылку, и положить в бандл".
loader'ы по умолчанию превращают маленькие картинки в data:uri строки, а большие перекладывают в папочку imgs и переименовывают с хэшем, возвращая путь. Но это по-умолчанию, а так они способны много всякой магии творить.

Суть: новые картинки ты, которых не было во время сборки, таким образом не подцепишь.
Но это и не нужно, картинки лежащие в папке public копируются в результирующую папку как есть и доступны по /name.png без require, просто через обычный html и css.

1. computed не будет пересчитаться при обновлении ref'ов или dom-значений. Он работает с реактивными данными.
2. Рефы доступны только после загрузки соответствующих элементов(очевидно), а вы, судя по всему, обращаетесь к ним раньше.

Итого: уберите этот код из computed и поместите в mounted, вручную присваивая значения переменной в data. Не забудьте добавить значения по умолчанию, а также обновлять их при необходимости(по событию resize или ещё какому, способныму повлиять на эти размеры).

P.S. В большинстве случаев то, что вы пытаетесь решить подобным кодом делается на css.

Всё просто - опциональный параметр: /catalog/:slug/:option?.
Если нужно много всякой фигни накрутить, то можно и вообще regexp: /catalog/:slug/(.*)? и ловить любые пути.