Как определиться с направлением программирования или ЯП?

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

Какие плюсы с перехода на react c vue?

Слава, спросите своего оставшегося для чего нужен vuex. Если ответит, что там надо все запросы к апи делать или можно хранить данные компонента (не состояния приложения, а компонента) то отправьте учиться:)
Это к чему - возможно проблема не в новых соискателях. Но это лишь предположение. Мв тут гадать модем долго и много.
А по факту и правда вам уже много раз сказали, что нет выигрыша от смены технологии

Какие плюсы с перехода на react c vue?

Слава, получается вы сами не знаете?
Это все слишком общее, что вы описали.
Из практики: правил я как-то проект, в котором и архитектура есть и код не дублируется (по большей части), но написано все через vuex и это так больно, что каждая фича или правка бага - неописуемая боль + кучу багов отловил и все они из-за сильной завязки на vuex.
Мое скромное мнение - главное, что должно быть - понимание принципов фреймворка, т к. работа идет с фреймворком, а остальное можно подсказать.
Архитектуру можете задать сами императивно для всех проектов. В итоге человек ни бум-бум в архитектуре, но приложение ей следует, т.к. в мануале вашем сказано "делать так". Параллельно научить почему именно так, а не иначе.
А так, прыгать с технологии на технологию... не дороже ли это выйдет? Тут только вам решать

Какие плюсы с перехода на react c vue?

Слава, правильно писать компоненты это размытое понятие. Если не секрет, что вы под этим подразумеваете? Несколько примеров можете привести?

Почему push 2 массива добавляет?

Валерий Воронков, не в этом оказалась проблема, а в мутации пропа, танцы с бубном пришлось делать, чтобы обойти мутацию и удалить вообще весь выше код:)

Почему push 2 массива добавляет?

Валерий Воронков, я вижу где он удваивается - после какого действия, а вопрос в том - почему это происходит?
т.е. вопрос, то не где, а почему...
Получается, что реактивно считывается contact + добавляются значения input.value - вот и удвоение, а из-за чего это - не понятно

Почему push 2 массива добавляет?

он на страницу выводится для этого - history: {{ history }}

Как создать динамический шаблон при компонентном подходе без создания и дальнейшего перебора массива в массиве в еще одном массиве?

Спасибо!
Пришлось помучаться с некоторыми другими функциями - переписать, но в итоге всё ок:)

Обязательна ил функция в js?

WbICHA, да мне хотя бы понять как в js кодить:)
Пишу код для фильтров товаров - до этого написал на jQuery его и решил переписать на нативный js.
Столько нюансов в нативке оказалось, которые мне кажутся костылями:)

Обязательна ил функция в js?

WbICHA, т.е. все массивы объявлять тоже через const, а не let, если массив не будет меняться?
И перед forEach тоже добавить?

Обязательна ил функция в js?

WbICHA, я не хочу.
Меня интересует только стандарт и эстетика:)
А то мало ли я такой красавец пишу и работает, а потом мидл посмотрит и кровь из глаз:)

Обязательна ил функция в js?

Спасибо, за разъяснение.
А если не делать стрелочной функцией, а сделать по типу: "elements.forEach(function(name) {...} )", то оборачивать тоже не важно?

Как сверстать такой список?

Aetae, Спасибо!

Как сверстать такой список?

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

Как правильно настроить polyfill для closest в IE10-11?

Это да - это знаю:)
Хоть ответа я не получил, но вот что значит - отпустить проблему. Пол дня бился и не понимал, что да как, а оказалось, что я надумал много чего, потому что в сети куча примеров где вставлены классы, теги и т.д. в полифил.
Сел через 2 часа и всё получилось - заработало, потому что я не модифицировал в этот раз ничего и добавил 3 полифила нужных, а не 2.

Оказалось, что всё работает "из коробки":)

Как правильно настроить polyfill для closest в IE10-11?

Kovalsky, closest не работает, а еще я выяснил, что forEach не поддерживается в IE10-11 и для него тоже надо искать полифил:)

Когда же он сдохнет то до конца...

Но суть в том, что я не понимаю нужно ли мне изменять что-то в тех полифилах, что написаны в теме или они используются "как есть"

Как правильно настроить polyfill для closest в IE10-11?

https://caniuse.com/#search=let

Как менять нумерацию блоков?

Код html:

<div id="order-1" class="order__wrap dflex">
  <div class="order__half dflex">
    <div class="order__nav dflex">
      <div id="pos_up" class="nav__triangle-up dflex"> //кнопка перемещения заказа вверх на 1 строку
        ....	
      </div>				
      <div id="pos_down" class="nav__triangle-down dflex">  //кнопка перемещения заказа вниз на 1 строку
        ....
      </div>
    </div>
    <div class="order_position">
      <span id="position1">1)</span>    //вот это число надо менять на +1 или -1 при переходе строки вверх/вниз
    </div>
    <div class="order__data">
      ...
    </div>
  </div>
</div>
<div id="order-2" class="order__wrap dflex">
  <div class="order__half dflex">
    <div class="order__nav dflex">
      <div id="pos_up" class="nav__triangle-up dflex"> //кнопка перемещения заказа вверх на 1 строку
        ....	
      </div>				
      <div id="pos_down" class="nav__triangle-down dflex">  //кнопка перемещения заказа вниз на 1 строку
        ....
      </div>
    </div>
    <div class="order_position">
      <span id="position2">2)</span>    //вот это число надо менять на +1 или -1 при переходе строки вверх/вниз
    </div>
    <div class="order__data">
      ...
    </div>
  </div>
</div>

Код на jquery (меняет местами order-1 и order-2, но полностью, без смены порядкового номера id="position1):

$(function() {
    var images = $('order__wrap');
    
    $('.nav__triangle-up').click(function() {
        var currentBlock = $(this).parent().parent().parent();
        var prevBlock = currentBlock.prev();
        swap(currentBlock, prevBlock);
        return false;
    });
    
    $('.nav__triangle-down').click(function() {
        var currentBlock = $(this).parent().parent().parent();
        var nextBlock = currentBlock.next();
        swap(nextBlock, currentBlock);
        return false;
    });
});

function swap(a, b) {
  var up = $('.nav__triangle-up');
    if (a.size() > 0 && b.size() > 0) {
        a.insertBefore(b);
    }
}

Почему на телефоне цвет не применяется?

Рустам Байназаров, спасибо. Первый раз решил использовать, чтобы не использовать библиотеку и вот те на:)

Почему на телефоне цвет не применяется?

хм... Смотрели на Galaxy a5 и a6, на HTC смотрели и в разных браузерах - везде черный. только на пк красный