Владимир Сартаков

Если поменяете :key="comp.name" на :key="comp.isActive", то заработает.
Ключи vue использует для сопоставления данных и dom элементов из которых они генерируются. Поэтому анимации не знают момент перерисовки и не запускается
Можно составные ключи делать:
:key="comp.name + comp.isActive "

Попробуйте поменять порядок загрузчиков:

...
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
      }
...

<xsl:for-each select="key('dates', date)">
        <xsl:value-of select="title"/>
        <xsl:value-of select="$newline"/>

        <xsl:value-of select="@start"/>

</xsl:for-each>

$(document).ready(function(){
    $('#kart a > img').unwrap('a');
});

1. Используем препроцессор, любой: sass, less, stylus

2. Общие стили(все что используется или может использоваться часто) в общее.
Один файл точка входа, в него импортируется другие файлы с общими стилями.
Файлы с общими стилями, максимально разбиты, по назначению, разделам... Зависит от проекта. На огромных проэктах, можно дополнительно по подпапкам разбивать. Главное что бы удобно было в этом ориентироваться.

Все общие переменные обязательно в отдельный файл*
Все общие миксины обязательно в отдельный файл*
** Дает возможность быстро изменить препроцессор, если понадобится. У всех разные синтаксис переменных и миксинов

Если миксин статичный, без параметров, лучше заменить его на класс, например .some-mixin-class
И использовать его так:
.some-class {
@extend .some-mixin-class;
...
}
При этом .some-mixin-class нельзя использовать как обычный класс напримую, только экстендить в других классах

@extend .some-mixin-class - Работает одинаково во всех препроцессорах и хорошо читается

Все общие стили только по БЕМ

3. Специфичные стили для компонента пишем в файле компонента.
Или scoped или БЕМ - как удобней
Если таких стилей очень много, то выносим в отдельный файл и импортируем в компаненте
В эти стили по необходимости(если нужно использовать) и импортируем файл с общими переменными или миксинами

Самое сложное, научится определять, что общее а что специфичное, это не объяснить. Приходит с опытом и постепенно

1. У вложеных роутов path не от корня пишут, а от родительского path
path: '/settings' => path: 'settings'
path: '/settings/users' => path: '/users'
path: '/settings/users/fields' => path: '/fields'

2. Редиректы лучше заменить, на вывод компонентов
{ path: '', redirect: { name: 'users' } }, => { path: '', component: () => import('pages/settings/users/index.vue') },

Независимо от стека технологий:
Для разноцветных иконок, подойдет только 2 технологии:
inline svg
svg symbol sprite
- У обоих есть недостатки, но рабочиие. Все остальные подходы - вообще шлак.

Для одноцветных svg иконок, подходит генерация шрифтов из иконок.

Мне ближе svg symbol sprite: (не работают svg градиенты, некоторые не правильно сохраненные иконки могут сломать весь спрайт)
Причем меня устраивает, только когда кидаю иконки в определенную папку и она автоматом попадает в спрайт, то есть сразу могу ее использовать. Есть плагины для которых нужно делать import каждой иконки, перед использованием - они легко ставятся и настраиваются, но жутко не удобны

Модуль для nuxt:
https://github.com/nuxt-community/svg-sprite-module
* Может не работать с другими модулями для свг...

Vue cli:
https://github.com/swisnl/vue-cli-plugin-svg-sprite
* Не проверял, но вроде то что надо

Молодец что пишешь модульный код.
try/catch, кстати, вполне годный инструмент, если его правильно использовать.
Можно написать некий обьект или класс который этими модулями управляет, назову его Лоадер.
Этот Лоадер поочередно перебирает модули и инициализирует их(реализовать это можно по разному)
Момент инициализации модуля, оборачивается в try/catch, если при инициализации модуля возникает ошибка, Лоудер знает в каком модуле что то пошло не так и может что либо делать(высер в консоль, отправить ошибку куда либо), не запускать другие модули у которых этот модуль указан как зависимость... Любой функционал, можно в этот лоадер добавить, например измерять время инициализации каждого модуля...
Суть в том что бы try/catch - был один на весь сайт, был в Лоадере, и сами модули об этом try/catch даже не знали и не использовали.
Это при первичной инициализаци js, грубо говоря при при загрузке страницы, а по уму, основной поток выполнения(при нем любая ошибка, валит все)
А вот ошибки которые будут возникать потом в динамике, например когда пользователи нажимают кнопки или что то еще делается спустя некоторое время, уже не валят весь функционал, а только связный, то есть если это реально независимый модуль, то ошибка в нем сломает только его.

Второй способ без try catch:
Вырвать модуль из основного потока выполнения js, тогда ошибка в модуле, не будет ломать все без причин.
Есть много способов вырвать модуль из основного потока выполнения, приведу самый древний и дубовый:
setTimeout(()=>{
// здесь код модуля
}, 0)

> Как писать «отказоустойчивый» клиентский js?
- Самое главное ты уловил: "Писать модульный код", остальное мелочи

>/__webpack_hmr/client
- Это пересборка проекта при изменении кода - hotreload
* В production mode - вещь не нужная

Ну если вы пишите на node js, то нет ни чего быстрее, хранить данные в текстовых файлах и считывать построчно. )
p.s. Странный вопрос - странный ответ )

jsfiddle.net/Le9dza23

Попробуйте перед аяксом поставить return, если повезет ), функция вернет промис, у которого есть метод done:

function provnazvzn(name, type) {
  // alert("Вход в функцию проверки наименования узла");
  // alert("передаваемые данные - "+name+","+type);
  return $.ajax({  
      type: "POST",
                        url: "ob_oper_provnazvan.php",  
      dataType:"text",
      data:{"type": type, "name": name },
                        cache: false,  
                        success:function(resu){
        alert("Результат"+resu);
        return resu;
            },
            error:function (xhr, ajaxOptions, thrownError){
               	alert(thrownError); 
        alert("Ошибка работы скрипта проверки названия узла");
            }
    });
}

---
Или сделать без done, как в комментарии выше:
if provnazvzn(name_uz, type) { // ... }
Но сделать запрос синхронным, добавив async: false :

$.ajax({  
      type: "POST",
      async: false, // синхронный запрос
      url: "ob_oper_provnazvan.php",  
      dataType:"text",
      data:{"type": type, "name": name },
                        cache: false,  
                        success:function(resu){
        alert("Результат"+resu);
        return resu;
            },
            error:function (xhr, ajaxOptions, thrownError){
               	alert(thrownError); 
        alert("Ошибка работы скрипта проверки названия узла");
            }
    });

https://jsfiddle.net/pqvd43cr/22/

jsfiddle.net/epou69aL/2

return this.each(function() {
    // this - Это DOM элемент (input) без jquery методов, такой же как document.querySelectorAll('input[name=\'filter_name\']')[0]
   // а $(this) - это jquery  коллекция с одним элементом, как $('input[name=\'filter_name\']:eq(0)')
  );

( ~ ) - это братский селектор, применяется ко всем нижележащим братьям и сестрам
htmlbook.ru/css/selector/sibling
К body или header это подход можно применит, но к body будет не валидно, так как придется делать label вне body, перед ним, но работать должно

Здесь я делал слайдер без js, по этой технологии:
www.dendyemulator.myjino.ru/page-proofs/trailer-boat

jsfiddle.net/zbhfrkp3/2