0xD34F

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

data: () => ({
  items: [
    { name:      'PHOTOSHOP', val: 88, color:    'red' },
    { name:    'ILLUSTRATOR', val: 92, color:  'green' },
    { name:         'SKETCH', val: 90, color: 'orange' },
    { name: 'AFFTER EFFECTS', val: 98, color:   'blue' },
  ],
}),

Затем сделаем методы, который будут генерировать текст и стили для рисования линии (в качестве линии можно использовать границу элемента, border-bottom например) у элемента списка:

methods: {
  liText: item => `${item.name} ${item.val}%`,
  liStyle: item => ({
    'border-bottom': `3px solid ${item.color}`,
    width: `${item.val}%`,
  }),
},

И, наконец, отрендерим список:

<ul>
  <li
    v-for="n in items"
    v-text="liText(n)"
    :style="liStyle(n)"
  ></li>
</ul>

Делаем нормально: [...new Set(arr)].

И ненормально:

Object.values(arr.reduce((acc, n) => (acc[n] = n, acc), {}))

// или

Array.from(new Map(arr.map(n => [ n, n ])).values())

// или

arr.filter(function(n) {
  return !(this[n] = this.hasOwnProperty(n));
}, {})

// или

arr.filter(((picked, n) => !picked.set(n, picked.has(n)).get(n)).bind(null, new Map))

// или

arr.filter((n, i, a) => i === a.indexOf(n))

// или

arr.reduce((acc, n) => (acc.includes(n) || acc.push(n), acc), [])

https://jsfiddle.net/6eLg3a8v/1/

$('p select').change(function() {
  $(this)
    .parent()
    .find('.colors').hide()
    .end()
    .find(`.${this.value}`).show();
});

display: flex; для nav
flex-direction: column; (и ширину какую надо ещё не забудьте) для .navigation--blok

Так?

Метод openClick - кто вас такой мерзости научил? Срочно читаем документацию, как правильно работать с классами. Но вообще, чтобы скрывать/показывать элементы, переключать классы необходимости нет - под это дело предусмотрен специальный инструмент.

data: () => ({
  show: false,
  items: [ 'в сети', 'занят', 'отсутствую', 'в самолете', 'в пути' ],
  status: 'статус',
}),
methods: {
  selectStatus(status) {
    this.status = status;
    this.show = false;
  },
},

<div
  v-text="status"
  @click="show = !show"
></div>
<ul v-show="show">
  <li
    v-for="n in items"
    v-text="n"
    @click="selectStatus(n)"
  ></li>
</ul>

Передавайте в мутацию вместо просто состояния диалога объект вида { имя_диалога: состояние }. Тогда при обновлении состояния диалогов не будет необходимости обращаться к ним поимённо:

mutations: {
  dialogShow: (state, payload) => Object.assign(state.modals, payload),
},

В компоненте, вместо вычисляемого свойства modal, отвечающего за работу с одним диалогом, будет свойство modals, обеспечивающее получение состояния всех диалогов. А чтобы изменение состояния диалога по-прежнему выглядело как присваивание, воспользуемся Proxy, где будем перехватывать установку значений и вызывать мутацию:

modals() {
  return new Proxy(this.$store.state.modals, {
    set: (target, prop, value) => {
      this.$store.commit('dialogShow', { [prop]: value });
      return true;
    },
  });
},

Соответственно, в шаблоне заменяем установку значения просто свойства на установку значения свойства объекта:

<el-button @click="modals.dialogSignIn = true">sign in</el-button>

<el-dialog :visible="modals.dialogSignIn" @close="modals.dialogSignIn = false">
  <span slot="footer" class="dialog-footer">
    <el-button @click="modals.dialogSignIn = false">Закрыть</el-button>
  </span>
</el-dialog>

Посмотреть живьём.

По умолчанию задан padding-left для ul. 40 пикселей.

То есть если пользователь кликнул три раза по первой кнопке, то дочерний компонент значение "4" вывел только один раз.

А если кликнул по первой, потом по второй, а потом снова по первой? Что должно быть выведено в консоль? Если 4-2-4, тогда используйте ngOnChanges для вывода значений. Если 4-2-ничего - добавьте в дочерний компонент массив, куда будете складывать выводимые значения, и перед выводом проверяйте, есть ли там то, что собираетесь отправить в консоль.

В Network указывается не jpeg, а text/html

Путь неправильный. Или сервер файл не отдаёт. Вы бы посмотрели, что там в этом text/html - должно быть написано.

Ну и зачем тут requestAnimationFrame - я без понятия. Выглядит бредово. Есть же обработчик onload - в нём и рисуйте:

mounted() {
  const img = new Image();
  img.onload = () => this.$refs.canvas.getContext('2d').drawImage(img, 0, 0);
  img.src = '...';
},

https://jsfiddle.net/bd0ro2yL/

Работа с формами, это извините, основы. Читайте документацию.

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()).