0xD34F

Уберите слэши, они тут не нужны - просто new RegExp(tags, 'gi').

Сделать функцию, которая будет принимать в качестве параметров элемент/селектор и текст, который надо отобразить. Как-то так.

И зачем тут регулярные выражения? Если у вас число - то и проверяйте его как число. Трёхзначное число, начинающееся с 3 - это >= 300 и < 400.

Но вообще - 3\d{2}. Или ^3\d{2}$. Или \b3\d{2}\b. В зависимости от того, каковы входные данные, и что надо получить в результате.

Потому что нечего находить - ваш шаблон не существует в DOM-дереве (при сборке компилируется в render-функцию); искать элементы вы пытаетесь в хуке created, это слишком рано, создание экземпляра vue и его монтирование происходит не единовременно - используйте хук mounted.

В хуке App.vue выглядит не очень уместно, хочется вынести эту логику в другое место.

Это какую такую логику? У вас там в created будет простой вызов экшена, это одна строка. Уместно, делайте.

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

Почему я не могу блокировать загрузку приложения до выполнения нужного мне действия (запрос на апи, возврат ответа и наполнение стора)?

Можете в своём main.js завернуть создание экземпляра vue в коллбек экшена, который загружает данные:

store.dispatch('получитьДанные').then(() => {
  new Vue({
    el: '#app',
    store,
    router,
    ...

Только пользователь ничего не увидит в процессе загрузки. А если инициировать загрузку данных внутри, можно показывать какой-нибудь прелоадер, пока данные не будут получены:

<div v-if="данные в хранилище есть">
  основной контент приложения
</div>
<div v-else>
  данные загружаются, надо подождать
</div>

Во-первых - никаких getElementById, ставьте ref на интересующий вас элемент.

Во-вторых - если вам надо сделать прокрутку в самый низ, не надо указывать какое-то определённое число. У элемента есть свойство scrollHeight.

Во-третьих - надо дождаться, пока будет показан дополнительный контент, и только потом выполнять прокрутку, т.е., используйте nextTick:

this.$nextTick(() => {
  const el = this.$refs.container;
  el.scrollTop = el.scrollHeight;
});

И второй вопрос, если у меня в реальном проекте при таком коде не спускается никак, потому что идет погрузка через вкладки и используется keep-alive.

Информации примерно 0. Что за вкладки, где используется keep-alive... Ничего непонятно.

Если в keep-alive завёрнуто ваше окно, то выполняйте проверку this.show и прокрутку (можно вынести этот код в отдельный метод, чтобы не дублировать) и в хуке activated.

UPD. https://codesandbox.io/s/vue-template-ow505

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

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

Можно.

Только разберитесь, что это за штука такая, Object.assign, что делает. А то вы явно чего-то не до конца понимаете, судя по показанному коду. Ну и имейте в виду, что если какое-то из свойств payload отсутствует в стейте, то после добавления оно не будет реактивным.

Вместо того, чтобы зашивать в шаблон варианты выбора, делаете массив и отдаёте его в 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() {
      /*
       * здесь идёт выполнение каких-то действий,
       * направленных на обновление компонента - запрос данных, например...
       * тут уж вам виднее, что это должно быть
       */
    },
  },
},

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

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

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

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

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

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

или

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

$('ul').on('click', 'a', function() {
  $(this).after($('.drop'));
  // или
  $('.drop').insertAfter(this);
});

или

document.querySelector('ul').addEventListener('click', e => {
  if (e.target.tagName === 'A') {
    e.target.after(document.querySelector('.drop'));
  }
});

или

const dropEl = document.querySelector('.drop');
const onClick = e => e.target.insertAdjacentElement('afterend', dropEl);
document.querySelectorAll('ul a').forEach(n => n.addEventListener('click', onClick));

<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.map(n => n[0] || '');

// обновляем существующий
words.forEach(([ n = '' ], i, a) => a[i] = n);