Как сделать такой слайдер на Vue.js?

Всё уже украдено до нас ©
https://yandex.ru/search/?text=vue%20slider%20carousel

Можно ли это как то упростить?

olya_097, так проще

$('.main-header__button').on('click', function(e) {
    var $parent = $(this).parent();
    $parent.find('.main-header__input').trigger('focus');
    $parent.find('.main-header__search').addClass('main-header__search-active');
});

Как сохранить добавленный класс через JS?

js_123, после обновления класс обязательно пропадет. Ваша задача - при загрузке страницы проверить запись в локалсторейжд и вернуть его обратно.

Как будет правильно по БЭМ именовать слайдер?

Genri_Rus, примерно так

.info-slider
.info-slider__item.slide
.slide__photo
.slide__preview
.slide__name

PS. имя slide плохое. Лучше чтобы оно описывало содержимое слайда.

Как будет правильно по БЭМ именовать слайдер?

Я бы item вынес в отдельный блок. Всё-таки слайд — самостоятельная сущность, слайды могут быть разными, в общем их содержимое к самому слайдеру мало отношения имеет.

Как скрыть placeholder при клике на поле ввода без js?

sunnyrio, https://webref.ru/css/placeholder (см примечания и комментарий Сергея Храпина)

Почему Live Sass Compiler компилирует без точки с запятой в CSS?

css не изучили, но уже знаем про sass =))

Как решить задачку (шахматная доска, ход конем) без использования js?

Александр Буки, ну да. можете его делать только при фокусе, если хочется.

Как решить задачку (шахматная доска, ход конем) без использования js?

Проблема заключается в том, что в css нельзя стилизовать предыдущие элементы.
И она не решаема в данном случае (когда стилизовать требуется и предыдущие, и последующие). Так что единственное решение, которое так же пришло в голову - то, что предложил Алексей Тен

Чтобы не загрязнять разметку, это могут быть псевдоэлементы (в принципе, даже одного хватит), которые спозиционированы абсолютом и разрисованы линейным градиентом на квадратики.

Как восстановить изменения, если файлы были удалены и восстановлены?

А вообще, на будущее, почкуешь отдельную ветку по фичу, и и делаешь в ней минимальные атомарные коммиты

Как восстановить изменения, если файлы были удалены и восстановлены?

В phpstorm есть локальная история изменений файлов. Иногда выручала в подобных случаях.
В других редакторах, возможно, тоже есть.

Как выровнять элементы по высоте?

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

Как выровнять элементы по высоте?

в общем случае - flex-direction: column и для линии margin-top:auto

Как выровнять элементы по высоте?

Если красные и черные блоки имеют неопределенную высоту, то скорее всего, никак.

Для чего используется резиновая верстка?

Разве одно исключает другое? Оба подхода отлично совмещаются и позволяют делать то, чего не получится сделать лишь одним из них.

Сделать каждую ссылку как кнопку?

Равно как и ответ Дмитрия ниже. Одна и та же суть в разных воплощениях.

Сделать каждую ссылку как кнопку?

xmoonlight, Ответ Егора вполне тянет на решение. Я лишь немного скорректировал под требования вопрошающего.

Сделать каждую ссылку как кнопку?

RuhHost, что? что там дублируется, не ясно.
Всё отлично работает https://jsfiddle.net/95bh6Lfr/

Сделать каждую ссылку как кнопку?

RuhHost, с for..of тоже какие траблы были, не помню уже, может сейчас и нормально. Обычно этот код через бабель прогоняется. Иил пишется по старинке, без новых фич языка.

Сделать каждую ссылку как кнопку?

RuhHost,
{href} - эта хрень не работает наверное пока в браузерах

пишите href = event.target.href;