0xD34F

const input = document.querySelector('#textLink');
const buttonSelector = '.link';

Делегирование, назначаем обработчик клика один раз:

document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    input.value = button.innerText;
  }
});

Или, назначаем обработчик клика каждому элементу индивидуально:

document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => input.value = e.currentTarget.textContent);

Указывать атрибут selected бессмысленно - v-model его игнорирует. Вместо этого, задайте свойству selectedSport в качестве начального значения пустую строку - как в value нужного вам option'а.

Не работает

Всё правильно, так и должно быть. Чего ещё вы ожидали, вешая disabled?

есть вариант решения?

Решения чего? Что вы вообще пытаетесь сделать? Ничего не понятно.

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

Я хочу что бы у инпутов focus срабатывал только по клику

Используйте readonly вместо disabled. Как-то так.

arr.map(n => ({
  ...n,
  items: n.items.filter(m => m.checked).map(m => ({ ...m })),
}))

возможно, computed надо высчитывать?

Если при изменении исходного массива должен обновиться массив c отмеченными элементами, то да, надо:

computed: {
  checkedArr() {
    return this.arr.map(/* ... */);
  },
},

$('select')
  .last()
  .clone()
  .attr('id', (i, id) => id.replace(/\d+$/, m => +m + 1))
  .appendTo('body');

const data = [
  { title: 'a', value:   0 },
  { title: 'b', value: 100 },
  { title: 'c', value: 200 },
];

d3.select('#svg')
  .selectAll('g')
  .data(data)
  .enter()
  .append('g')
  .append('rect')
  .attr('x', d => d.value)
  .attr('y', d => d.value)
  .attr('width', 50)
  .attr('height', 50)
  .attr('fill', '#F0A');

В интересующем вас компоненте определяете хук beforeRouteEnter - в нём и инициируете получение данных. Как оно конкретно выглядит - непосредственно выполнение запроса, или вызов экшена - тут вам виднее. После получения данных дёргаете next. Всё.

UPD. Не, не всё. Если не очень поняли, о чём я - сделал небольшой пример. Три роута, первые два ни о чём, последний - показывает данные из хранилища. И при каждом переходе инициирует их обновление.

Не вижу явного удаления из дом дерева.

Неявно тоже ничего не удаляется - элемент перенесён в .js-select-tabs-head, неужели этого не видно? Или вы думаете, что там другой элемент, копия? Это не так - можете получить элемент до вызова html, после, сравнить их, увидите, что это один и тот же элемент.

Хотите, чтобы происходило копирование вместо перемещения... Ну, очевидно же:

$head.html($text.filter('.is-active').clone()).

$str = preg_replace('/[^\n\w]+/', ' ', $str);

Раз у вас список - значит, наверное, за цвет каждого элемента должно отвечать отдельное значение, а не как у вас - одно на всех. Наверное, эти отдельные значения должны быть свойствами элементов массива, на основе которого разметка будет создаваться с помощью v-for, а не как у вас - вручную. Наверное, если элементы должны менять цвет независимо, соответствующий класс и обработчик клика должны назначаться самим элементам, а не как у вас - контейнеру.

UPD. jsfiddle.net/42bfx93e

При подключении обработчиков клика к кнопкам навигации, сами кнопки вы ищите внутри формы - а их там нет.

Замените

form.on("click", ".next", function(event) {

на

$(".next").on("click", function(event) {

Аналогично и с .back.

Ну или засуньте кнопки в форму.

Надо указать пространство имён, к которому относится добавляемый элемент.

Т.е., вместо append('div') должно быть append('xhtml:div').

Если захотите добавить внутрь div'а ещё что-то - указывать пространство имён уже не нужно, по умолчанию оно наследуется от родительского элемента.

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

Чтобы работало так, как вы хотите, popup в каждом отдельном экземпляре должен быть уникальной функцией, т.е. в methods ему не место:

created() {
  this.popup = _.throttle(function(state) {
    this.show = ({
      enter: true,
      leave: false,
    })[state];
  }, 500, {
    leading: false,
    trailing: true,
  });
},

Ну и как-то громоздко выглядит. Может ну их, эти enter/leave:

this.popup = _.throttle(show => this.show = !!show, 500, {
  leading: false,
  trailing: true,
});

<a href="#" @mouseenter="popup(1)" @mouseleave="popup(0)">

??

При замене вместо строки используйте регулярное выражение, соответствующее строке и произвольному количеству символов. Т.е, замените

this.api = this.api.replace(word, 'BOOM')

на что-то вроде

this.api = this.api.replace(RegExp(`\\b${word}[a-z]*\\b`, 'ig'), 'BOOM')

решил использовать фильтр

Почему? Зачем? Вот вы выше говорите, что "есть много готовых плагинов" - так посмотрели бы, как там реализована подобная функциональность. Увидели бы, что для таких вещей применяются директивы. Как-то так, например.

Возвращайте this из всех методов, которые могут быть не последними в цепочке вызовов:

function calc(val) {
  const self = Object.create(calc.prototype);
  self.val = val;
  return self;
}
calc.prototype = {
  plus(val) {
    this.val += val;
    return this;
  },
  minus(val) {
    this.val -= val;
    return this;
  },
  valueOf() {
    return this.val;
  },
};

+calc(0).plus(1); // 1
+calc(1).plus(1).plus(1); // 3
+calc(1).plus(2).plus(3).plus(4).minus(5); // 5
calc(3).plus(7).minus(2) * 3; // 24
99 + calc(1); // 100

Создаём новый массив:

const newArr = arr.slice(-5);

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

arr.splice(0, arr.length - 5);

const kebab = str => str.replace(/\b([A-Z][a-z]*)+\b/g, n => n.replace(/([A-Z])/g, '-$1').replace(/^-/, '').toLowerCase());

console.log(kebab('KebabCase noKebabCase No_Kebab_Case And FuckDonaldTrump!!')); // "kebab-case noKebabCase No_Kebab_Case and fuck-donald-trump!!"

for (const n of words) {
  string = string.replace(RegExp(`\\b${n}\\b`, 'gi'), m => `<a href="#">${m}</a>`);
}

или

const newString = words.reduce((acc, n) => {
  return acc.replace(RegExp(`\\b${n}\\b`, 'gi'), '<a href="#">$&</a>');
}, string);