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/

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

<span class="prev" data-step="-1">Prev</span>
<span class="next" data-step="+1">Next</span>

Индекс нового активного элемента будет суммой индекса текущего и относительного положения нового. Чтобы произошёл переход из конца в начало - необходимо брать остаток от деления суммы на количество элементов, индекс несуществующего элемента, расположенного за последним, превратится в 0. Переход из начала в конец - в случае jquery ничего делать не надо, метод eq позволяет указывать отрицательные индексы, которые используются для отсчёта позиции элемента начиная с конца; в случае чистого js надо будет добавить к сумме количество элементов, чтобы потенциальное отрицательное значение стало положительным, и при этом не изменился остаток от деления.

const itemSelector = 'li';
const buttonSelector = '[data-step]';
const activeClass = 'active';

$(buttonSelector).click(function() {
  const { step } = this.dataset;
  const $items = $(itemSelector);
  const $active = $items.filter(`.${activeClass}`);

  $active.removeClass(activeClass);
  $items.eq(($active.index() + +step) % $items.length).addClass(activeClass);
});

// или

const items = document.querySelectorAll(itemSelector);
let index = 0;

document.querySelectorAll(buttonSelector).forEach(n => {
  n.addEventListener('click', onClick);
});

function onClick({ currentTarget: { dataset: { step } } }) {
  items[index].classList.remove(activeClass);
  index = (index + items.length + +step) % items.length;
  items[index].classList.add(activeClass);
}

.xxx {
  background: silver;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  padding: 0.3em 0.6em;
  position: relative;
}

.xxx::before {
  content: "";
  width: 1em;
  height: 1em;
  left: -0.2em;
  top: -0.2em;
  background: orange;
  position: absolute;
  z-index: -1;
}

https://jsfiddle.net/km85s9fv/

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

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

Преобразовать число в строку, убрать всё, что не цифра (знак, если число отрицательное; точка, если число не целое) или достать только цифры, найти минимум (Math.min или перебираем вручную и сравниваем):

const minDigit = num =>
  Number.isFinite(num)
    ? Math.min(...`${num}`.replace(/\D/g, ''))
    : null;

// или

const minDigit = num =>
  (String(num).match(/\d/g) || []).reduce((min, n) => {
    return min === null || n < min ? +n : min;
  }, null);

minDigit(1)                // 1
minDigit(759486394)        // 3
minDigit(-56.209)          // 0

minDigit(Infinity)         // null
minDigit(NaN)              // null
minDigit('hello, world!!') // null

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

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

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

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

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

Заменяем содержимое li на его же текст:

$('.breadcrumb').children().last().text((i, text) => text);

// или

document.querySelector('.breadcrumb').lastElementChild.innerText += '';

Или, заменяем вложенный элемент на его содержимое (т.е., если внутри a есть элементы, они не будут удалены):

$('.breadcrumb > :last > *').replaceWith((i, html) => html);

// или

(el => el.replaceWith(...el.childNodes))
(document.querySelector('.breadcrumb > :last-child > *'));

Где и по кому надо кликать, кого надо переместить:

const containerSelector = 'ul';
const buttonSelector = 'a';
const elementSelector = '.drop';

Перемещаем:

const $el = $(elementSelector);
$(containerSelector).on('click', buttonSelector, function(e) {
  $(e.currentTarget).after($el);

  // или

  $(this).parent().append($el);

  // или

  $el.insertAfter(this);
});

или

const el = document.querySelector(elementSelector);
document.querySelector(containerSelector).addEventListener('click', ({ target: t }) => {
  if (t = t.closest(buttonSelector)) {
    t.after(el);

    // или

    t.insertAdjacentElement('afterend', el);

    // или

    t.parentNode.insertBefore(el, t.nextSibling);

    // или

    t.parentNode.append(el);

    // или

    t.parentNode.appendChild(el);
  }
});

<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);
  },
},

Уберите fade: true из настроек слайдера, из обработчиков клика - второй параметр из вызова slickGoTo (это который тоже true). Кстати, а зачем отдельный обработчик каждой кнопке? - можно повесить один общий:

const $slider = $('#slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  adaptiveHeight: true,
  dots: false,
  prevArrow: false,
  nextArrow: false,
  speed: 900,
});

const $buttons = $('button').click(function() {
  $slider.slick('slickGoTo', $buttons.index(this));
});

var pos = this.getAttribute('data-goto'); 

myMap.panTo(pos, {

data-goto="[59.938531, 30.313497]"

Как подсказывает документация, метод panTo в качестве координат ожидает массив чисел, в то время как вы подсовываете строку.

Поскольку строка представляет собой корректный JSON, который, в свою очередь, представляет собой требуемый массив, то заставить всё работать как надо - дело тривиальное:

this.getAttribute('data-goto') ---> JSON.parse(this.dataset.goto)

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

item.price

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

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

words.replace(index, 1, word.charAt(0));

Метода replace у массивов нет. Есть splice.

как реализовали бы данную задачу вы?

Собираем новый массив:

const newWords = words.flatMap(RegExp.prototype.exec.bind(/.{0,1}/));

// или

const newWords = [];
for (const n of words) {
  newWords.push(n[0] || '');
}

// или

const newWords = (function get(i, n = words[i]) {
  return n != null ? [ n.slice(0, 1), ...get(-~i) ] : [];
})(0);

Обновляем существующий:

words.forEach(([ n = '' ], i, a) => a[i] = n);

// или

words.splice(0, words.length, ...words.map(n => n.charAt()));

// или

for (let i = 0; i < words.length; i++) {
  words[i] = words[i].replace(/(?<=.).+/, '');
}

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

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

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

showOtherMonths

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

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

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

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

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

Смотрел в документации angular material, но не нашёл такой функции. Это странно, потому что такая функция скорее всего есть в любой подобной таблице.

И действительно - есть (closeAll). Надо только версию material повыше взять (в вашем демо используется 5.2.4, надо минимум 6.0.0-beta-0).

Пусть у каждой новости будет своё свойство, отвечающее за отображение тэгов:

<span (click)="item.showTags = !item.showTags">Теги:</span>
<div *ngIf="item.showTags">

const $form = $('.order__form-contacts').on('change', '[name="legal-status"]', e => {
  $form.find('.order__form-file')[e.target.value === '2' ? 'slideDown' : 'slideUp']();
});