Сергей Соколов

т.к. используется typicode/json-server
можно видимо изменять сохранённые данные по их id, запросом PATCH:

const obj = {
  todos: [
    {title: "QnA", description: "прочитать документацию"},
  ],
}
fetch('http://192.100.0.0:3000/usersTodos/1000', { // здесь 1000 это id
          method: 'patch',
          headers: {
            'Accept': 'application/json, text/plain, */*',
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(obj)
        })

Чтобы добавить, надо сначала вытащить по id сохранённую запись, и в её поле todos запушить новый туду.

Какой-то язык обозначаете основным при начальном заполнении инфы.
Потом в редакторе видео на YouTube – Subtitles – Add Language
и добавляете новый язык, в нём новые Title и Description на новом языке.
Пользователи, у которых выбран один из доступных в вашем видео языков, сразу увидят название и описание именно на нём.

const rangeMult = (first, last) => {
  if (last < first) [first, last] = [last, first];
  let result = first;
  while (last > first) result *= last--;
  return result;
}

const process = (obj) => {
  if (obj.hasOwnProperty('children')) {
    obj.children = Object.values(obj.children);
    obj.children.forEach(process);
  }
}

const result = Object.values(response[0]);
result.forEach(process);

Показывать кнопку через удаление у неё класса hide, который её скрывает.

По нажатию на любую из 4 кнопок, надо вызвать функцию showButton, описаннуюю выше.

Вряд ли можно дать однозначный ответ. YMMV — зависит от эксплуатации, аккуратности, ухода, апгрейдов, везения.
Например, из старья:
13 лет: MacBook Pro 2008 жив, тьфу-тьфу, для музыки Ableton Live с небольшим количеством плагинов-инструментов хватает
10 лет: MacBook Pro 2011 тоже жив, т-т, не супер быстр, но и 3к видео с прокси можно редактить, и фотки пошопить.

Вариант 1. События: по кнопке компонент эмитит событие. «Страница» его слушает и переключает свои данные.

<!-- template компонента -->
<button @click="this.$emit('buttoned')">не нажимать</button>

<!-- template страницы -->
<Component1 v-on:buttoned="triggerComponents" />
<!-- надо написать метод triggerComponents(), который поменяет данным true/false -->

Вариант 2, навырост: Vuex. Хранить oneActive, twoActive не в data, а в state глобально доступного store. По кнопкам из компонентов запускать мутации.

Оператор === это строгое равенство — сравнивает ещё и типы.

number === "666" // сравнение со строкой (текстом)

number === 666 // сравнение с числом — то, что надо

Без регулярок можно )

parseInt(str.split("").filter((c) => c !== " ").join("").split("—")[1])

Удалить все пробелы, разбить по тире, парсить как целое (проигнорирует символ валюты).

Написать Shared Web Worker.
Подписаться на сообщения от него: он может прислать команду «деактивируйся!» (и «активируйся снова!» – в сложном варианте).

При старте отправлять в него сообщение, регистрирующее вкладку по уникальному ID. Случайное-уникальное, хранится в скрипте во вкладке, запоминается и в воркере.

Воркер по такому сообщению принимает новый ID и деактивирует остальные (отправляет им сообщения).
Принцип «каждый новый побеждает предыдущих».

Если нужно реализовать возврат полномочий к предыдущей вкладке, когда закрыли «активную» – можно придумать протокол. Воркер может по очереди пинговать ID вкладок: «жив?» – нет (таймаут) – следующий «жив?» – жив — «будешь главным».

У текста же и так класс родительского дива class="red"

document.querySelectorAll('div.red').forEach((el) => {
  el.childNodes.forEach((node) => {
    if (node.nodeType === Node.TEXT_NODE) {
      const wrap = document.createElement('span');
      wrap.classList.add('violet');
      el.replaceChild(wrap, node);
      wrap.appendChild(node);
    }
  })
})

Для движения лучше менять атрибут transform группы со зрачком.
Маской сделать видимость зрачка только внутри формы глаза.

CSS правила обычных HTML-элементов для элементов SVG не работают.