0xD34F

Вместо гамбургера отображается надпись "Меню"

Нужно подключить иконочный шрифт. Как это сделать - можете прочитать в документации.

Вместо того, чтобы зашивать в шаблон варианты выбора, делаете массив и отдаёте его в v-for, предварительно прогнав через функцию-фильтр, где будут отброшены уже выбранные варианты (кроме текущего):

<select v-model="user.name">
  <option value="">Выбрать</option>
  <option v-for="o in getOptions(index)" :value="o.value" v-text="o.label"></option>
</select>

getOptions(index) {
  return this.options.filter(o => this.users.every((u, i) => u.name !== o.value || i === index));
},

https://jsfiddle.net/gs0oenxq/

Отслеживайте в компоненте изменения параметра роута:

watch: {
  '$route.params.id': {
    immediate: true,
    handler() {
      /*
       * здесь идёт выполнение каких-то действий,
       * направленных на обновление компонента - запрос данных, например...
       * тут уж вам виднее, что это должно быть
       */
    },
  },
},

запрос на сервер отправляется два раза, хотя есть переменная, которая это блокирует

Нет такой переменной. Есть переменная, которая могла бы в подобном качестве использоваться - loading, если проверять в начале метода upload, что она не true - но она не используется никак (по крайней мере, в показанном вами огрызке кода).

UPD. Вынесено из комментариев:

есть переменная end, статус которой проверяется постоянно

А какой смысл в этой проверке, если вы сбрасываете значение end в false сразу после того, как выставили true? Можно дожидаться выполнения запроса - перенеся this.end = false в finally (однако, само по себе это не гарантирует, что вы не сможете отправлять следующий запрос до окончания предыдущего).

<span class="b-span" :class="{ 'b-span_active': active }">hello, world!!</span>
<button @click="onClick">click me</button>

data: () => ({
  active: false,
  time: 300,
}),
methods: {
  onClick() {
    setTimeout(() => this.active = true, this.time);
  },
},

Замените в вычисляемом свойстве total

item.price

на (cartItems - это же массив, да?)

this.cartItems.reduce((sum, n) => sum + n.price, 0)

Вью держит значение индекса, почему он не может выполнить такую простую операцию?

А может, это вы чего-то не можете (или не понимаете)?

Может, вам надо что-то вроде :delay="i * 0.5"? - попробуйте, вдруг подойдёт.

проблема в том, что видимо когда по первому запросу поле name заполняется, соответственно поле name_changed становится равно true и кнопка сохранения получается изначально доступна

Можно запускать слежение после получения данных. Вырезаете

watch:{
  name(val, old){
    this.name_changed = true;
  }
}

А в коллбек запроса, после установки значения name, добавляете:

this.$watch('name', () => this.name_changed = true);

Как привязать обработку событию из слота

Не очень понятно, зачем такое надо.

Почему-то this.$slots.default[0].elm выводит undefined

Потому что элемента ещё нет, чтобы он появился, надо дождаться монтирования экземпляра компонента в DOM - если вместо created используете mounted, то увидите, что элемент есть.

Добавляете ref="features" своему списку, получение данных будет выглядеть как-то так:

this.$refs.features.forEach(n => console.log(n.getData()))

Функцию вызывайте при создании экземпляра компонента, результат записывайте в свойство (кажется, у вас уже есть подходящее - api). Ту странную штуку с computed свойством вырежьте. Выглядеть это будет примерно так:

created() {
  accessAPI().then(result => this.api = result);
},

<imgMap :api="api"></imgMap>

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

<imgMap v-if="api" :api="api"></imgMap>

v-for="i in num", где num - это ваше число

есть модальное окно-увеличение картинки, нажимая на него, маршрут сбивается

Это вы про

<a
     :id="item.id"
     v-b-modal="'img-'+item.id"
     href="#"
>

??

Попробуйте при клике блокировать действие по умолчанию: @click.prevent.

<button v-if="checkedNames.length">click me</button>

watch или обработка события input

Чё-то вы не то делаете, как мне кажется. Попробуйте так:

@focus="disabled = true"
@blur="disabled = false"
@mousedown="disabled = !disabled"

А обработчики keyup и click уберите.

Метаданные пусть будут массивом объектов, содержащих два свойства: имя компонента и объект с параметрами:

formMeta: [
  { type: '...', props: { ... } },
  { type: '...', props: { ... } },
  ....
],

<div v-for="{ type, props } in formMeta" class="form-item">
  <component :is="type" v-bind="props"></component>
</div>

https://jsfiddle.net/toLc2r59/

Тут явно напрашивается использование is, должно получится что-то вроде

<component :is="item.type" :data="item.data"></component>

А чтобы вручную не импортировать каждый из компонентов, воспользуйтесь require.context.

я меняю другие данные

Это вам так кажется. Чтобы не казалось, надо заполнить пробелы в знаниях основ js.

Хотите, чтобы не менялось - вырезаете created, в качестве начального значения columns устанавливаете

this.type === 'columns'
  ? this.items.slice(1).map(n => ({ ...n }))
  : []