inzeppelin

Кажется вам лучше оставить для индексации пагинацию (pagen), а вопрос с другими параметрами типа view разрешить через rel="canonical". Это намного более правильный способ избавиться от дубликатов, чем запрет на индексирование.

У вас исходное состояние описано в самом начале. Если вы хотите чтобы "исходное состояние" было с невидимой картинкой, то скажите об этом явно :)

.logo{
    margin-left: 570px;
    margin-top: 150px;
    overflow:hidden;
    overflow-y:hidden; 
    overflow-x:hidden;
    animation-name: Appearance;
    animation-duration: 5s;
    animation-timing-function: cubic-bezier(.1,-.6,.2,0);

    opacity: 0; // вот тут говорим, что "исходное состояние" картинки – прозрачная
}

let clicked = false;

$(".toggles").on("click", function (e) {
       if (!clicked) { 
          e.preventDefault();
          clicked = true;
        }
        
        $(this).find('ul').toggle('slow');
    });

document.querySelector('.t744 .t-product__option-select');

Если выпилить абсолютное позиционирование, то можно так:

Запишите все, что идет до "// Начало foreach" в переменную, типа
let markup = `...`

потом сделайте свой forEach и в каждой итерации конкатенируйте переменную "markup" с новым home-point, типа

[...].forEach(item => {
  markup += item;
})

И в самом конец добавьте закрывающий див, типа
markup += '</div>';

А потом просто сделайте так:
homeItem.innerHTML = markup;

Сложно понять, но возможно вы хотите так:

.wrap {
  margin: 0 auto;
  width: 400px;
  background: red;
  overflow-x: auto; // скролл уводим наверх
}

.table {
  background: yellow;
  display: inline-block; // блок шириной по содержимому
}

остальное без изменений

LIVE

Зачем эмулировать нажатие на кнопку, если можно сделать так?

setTimeout(toggleFullScreen, 2000);

Но все равно, как выяснили ниже в комментариях,
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture

Иначе, говоря, сделать это без клика невозможно.

Вам нужен SVG или Canvas. Но самостоятельно реализовать такое будет довольно сложно. Попробуйте посмотреть в сторону каких-то готовых решений по построению блок-схем.

Что касается проверки: кажется, ваш подход имеет место быть. Я не знаю, какие у вас есть условия для проверки корректности соединений, но в любом случае вам нужна какая-то абстракция, которая будет представлять вашу модель в виде некой структуры данных. Например, так:

// device - это ваш прибор, input# - это разъемы, массивы содержат подсоединенные элементы.
const device = {
  input1: [],
  input2: [],
  ...
};
// это объект, в котором есть список разъемов с разрешенными элементами
const allowedConnnections = {
  input1: ['element1', 'element2'],
  input2: ['element3'],
  ...
};

Таким образом при добавлении нового элемента в разъем, нужно проверять, разрешен он или нет

// функция должна вызываться каждый раз на добавление нового элемента
function checkInput(inputId, elementId) {
  // возвращает true/false если элемент есть в списке разрешенных для разъема
  return allowedConnnections[inputId].indexOf(elementId) !== -1;
}

Просто запишите в переменную. Примерно так:

let inputValue = '';

// затем на onchange инпута записываете значение в переменную
const inputElement = document.querySelector('.radio-input');
inputElement.addEventListener('change', function() {
   inputValue = this.value;
});

// дальнейший код будет брать значение из замыкания
const someFunction = () => {
 console.log(inputValue);
};

Вам нужно в родительском компоненте хранить некий объект, который будет содержать состояния дочерних checkbox.

values = {
     id: value,
     ....
};

Соответственно на $emit вы обновляете значение в values. И эти же значения прокидываете в дочерние компоненты через props.