lookingfor2

Включи предупреждения в консоли. Ты пытаешься изменять массив напрямую в store, чего делать нельзя.

const arr = this.$store.getters.templatesList.slice(0);

Ну и для сортировки есть встроенный метод sort:

arr.sort(({created_at:a}, {created_at:b}) => a < b ? -1 : a > b ? 1 : 0);

ответ:
@click="openHideBlock" в этом методе ты должен менять this.opened = !this.opened
далее тебе лучше сделать ещё одну "подложку" из дива, чтобы ты смог при открытии попапа сделать сзади невидимую зону, по типу width: 100%, height: 100%, opacity: 0.
и при клике на эту зону вызывается всё тот же openHideBlock, который меняет состояние и закрывает popup

Передавать массив пропсом

Найти элемент под фокусом можно вот так:
document.querySelector('input:focus');
Способ простой, но не все о нём знают.

Ответ на вопрос: document.activeElement.
Ответ на то что подразумевалось в вопросе:

function onInputFocus(){
   console.log(this)
}
var inputs = document.getElementsByTagName('input');
for(var i = inputs.length; i--;) 
  inputs[i].addEventListener('focus', onInputFocus);

или, если нужна поддержка динамически добавленного:

document.addEventListener('focus', function(event){
  var target = event.target;
  if(!target || target.tagName !== 'INPUT') return;
  console.log(target)
}, true)

Можно картинку поместить в ту же папку где и CSS файл. Тогда в CSSнике можно будет сделать url('./image.jpg'), а вебпак это дело разрулит во время компиляции и поместит картинку куда надо.

Если вы пришли в Реакт и модульные бандлеры (ака Вебпак) со старого доброго Галпа или вообще без него обходились раньше, то такой подход немного ломает стереотип. Мы привыкли хранить картинки в папке public/images, а стили в папке public/styles. Но в мире вебпака совершенно нормально хранить стили и статитику рядом с кодом. Собственно, вебпак и нужен для того чтоб это подключать и распределять как нужно.

В последнее время стал популярен подход так называемого Модульного ЦСС (CSSModules): это когда стили и статические файлы относящиеся к компоненту хранятся в папке компонента. Сам Вебпак позаботится о том чтоб во время компиляции положить стили и статику куда нужно. За это мы его и любим.

Попробуйте как-то так:

[[!FormIt?
    ...
    &fieldnames=`name==Имя, phone==Номер телефона`
]]

Официальный мануал.

1. Почему не используются нормальные ES6 классы или хотя бы классы на прототипах ES5?
   
2. Адская помесь jquery и ванили
   
3. Объявление функций в цикле (checkAttributeName, printErrorMessage, etc)
   
4. WTF?
   if(0 < 1){
   

   let div = document.createElement('div');
   div.innerHTML="";

   
   if(reg.test(value) == false) {
   

   if(..){
       var nextTab = resultNumberActiveTab + 1;
   }
   else if(...){
       var nextTab = resultNumberActiveTab - 1;
   }

   
   
   

Вызываешь метод внутри объекта input, меняется this. Попробуй

validateInput: function(){
                const checkAttributeName = this.checkAttributeName.bind(this)
                let field = [];
                let input = this.$el.find('input[data-validate]');
//   ... далее по тексту ...
if(this.getAttribute('name') === "name"){
                            checkAttributeName(value);
                        }
// ... далее по тексту ...

Intersection Observer API

Это скорее всего установленое расширение в браузере, судя по скрину ведёт она на этот
сайт

Выглядит странно ))
1) Конкретно в примере что на скринах - в метод не передается переменная, которая там нужна.
2) Если хотите перехватывать все исключения, используйте
catch(Throwable $e)

3) в комментариях вы привели код :

if (!empty($_FILES['Files'])) {
    $fileComponent = new fileComponent($_FILES['Files']); //Инициализируем класс
    try {
     $fileComponent->checkMime($mime); //$mime - атеншон!это откуда?незаметно подбросили полицаи?
..................

$mime ОТКУДА в нем ?