0xD34F

list(map(list, zip(*arr)))

разберитесь с используемой версией vue

Проверяем факт наличия дубликатов:

const hasDuplicates = map.size > new Set(Array.from(map, n => n[1].id)).size;

Смотрим, кто конкретно повторяется:

const duplicates = Array
  .from([...map].reduce((acc, [ , { id } ]) => acc.set(id, acc.has(id)), new Map))
  .reduce((acc, n) => (n[1] && acc.push(n[0]), acc), []);

Вычисляем, кто сколько раз представлен в исходных данных:

const count = Array
  .from(map.values())
  .reduce((acc, { id }) => acc.set(id, -~acc.get(id)), new Map);

Сделать markSlider из обычного свойства вычисляемым:

computed: {
  markSlider() {
    switch (this.selectedCoin) {
      case 'BTC': return что-то одно;
      case 'ETH': return что-то другое;

      default: return null;
    }
  },
  ...

если я ставлю параметр :interval="100", то у меня появляется черная полоса под слайдером и все начинает очень лагать

Разница между максимальным и минимальным доступными значениями 150000. Делим на 100, получаем 1500. Это количество отметок под слайдером. Ширина экрана в пикселях имеет тот же порядок - естественно, все эти 100, 200, ... наслаиваются друг на друга до степени абсолютной неразличимости - отсюда "черная полоса".

Сами отметки представлены тремя div'ами каждая. Изменили значение с 1000 на 10000, например - надо переназначить классы (с последующей перерисовкой) у 27000 элементов. Как думаете, может ли это быть причиной вашего "очень лагать"?

Что делать? - рисовать меньше отметок. Скажем, одну через каждые двадцать тысяч:

methods: {
  marks: v => !(v % 20000),
  ...

<vue-slider
  :marks="marks"
  ...

Где элементы находятся, что за элементы, какой класс у них надо переключать:

const containerSelector = '.block-btn';
const itemSelector = `${containerSelector} [data-cost]`;
const activeClass = 'active';

Какие тут возможны варианты:

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

const onClick = ({ currentTarget: t }) => t
  .closest(containerSelector)
  .querySelectorAll(itemSelector)
  .forEach(n => n.classList.toggle(activeClass, n === t));

document.querySelectorAll(itemSelector).forEach(n => {
  n.addEventListener('click', onClick);
});

Делегированный обработчик клика назначается контейнерам. Проверяем, что кликнут был интересующий нас элемент (пробуем до него подняться от элемента, на котором случилось событие). Если да, ищем внутри контейнера активный элемент, снимаем класс. Кликнутому элементу класс добавляем:

for (const n of document.querySelectorAll(containerSelector)) {
  n.addEventListener('click', onClick);
}

function onClick(e) {
  const item = e.target.closest(itemSelector);
  if (item) {
    this.querySelector(`.${activeClass}`)?.classList.remove(activeClass);
    item.classList.add(activeClass);
  }
}

Делегированный обработчик для всей страницы. От элемента, где случился клик, поднимаемся до элемента, которому должен быть назначен класс, если таковой нашёлся, получаем также и его соседей, перебираем их, переключаем класс в зависимости от наличия внутри элемента, где случился клик:

document.addEventListener('click', ({ target: t }) => t
  .closest(itemSelector)
  ?.closest(containerSelector)
  .querySelectorAll(itemSelector)
  .forEach(n => n.classList.toggle(activeClass, n.contains(t)))
);

Храните значения, отвечающие за цвет текста, в родительском компоненте, можно вместе с остальными данными:

const [ items, setItems ] = useState([
  { id: ..., text: '...', active: false },
  { id: ..., text: '...', active: false },
  ...
]);

Тогда сброс этих значений оказывается делом тривиальным:

const reset = () => setItems(items.map(n => ({ ...n, active: false })));

<button onClick={reset}>reset</button>

Ну а переключение значений изнутри экземпляров компонента Text придётся переписать. Сделаем функцию, которая принимает id, и изменяет соответствующий элемент:

const toggle = id => setItems(items.map(n => n.id === id ? { ...n, active: !n.active } : n));

Передадим эту функцию в экземпляры компонента Text:

{items.map(n => <Text key={n.id} {...n} toggle={toggle} />)}

Назначим её в качестве обработчика клика:

const Text = ({ id, text, active, toggle }) => (
  <p
    className={active ? 'active' : ''}
    onClick={() => toggle(id)}
  >
    {text}
  </p>
);

Всё.

let linkIndex = link.dataset.first;
<...>
mySwiper.slideToLoop(linkIndex);

Значения какого типа содержаться в dataset? Строки. А индекс - это что? Число. Ну так сделайте из строки число.

Самый простой способ - перенести вызов setIsDeleted из finally в catch.

Понимаю, что это как-то связано с преждевременным размонтированием компонента перед завершением api запроса.

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

print('\n'.join(f'{i}. {n}' for i, n in enumerate(arr, 1)))

я так понимаю - это называется label

не понимаете

Соответствующую настройку просили добавить, но безрезультатно. Так что придётся закостылить.

Добавляем ссылку на компонент графика:

<apexchart
  ref="chart"
  ...

После монтирования скрываем лишнее:

mounted() {
  this.$nextTick(() => {
    this.$refs.chart.hideSeries('здесь имя набора данных, который не хотите показывать');
  });
},

Разделитель - первый символ, не являющийся цифрой. Так что

const delimiter = str.match(/\D/)[0];

// или

const delimiter = str[str.search(/\D/)];

// или

const [ delimiter ] = str.replace(/^\d+/, '');

// или

const delimiter = Array.prototype.find.call(str, n => Number.isNaN(+n));

// или

const delimiter = [...str].filter(n => !'0123456789'.includes(n)).shift();

Где элементы находятся, какой класс надо добавить и начиная с какого по счёту элемента:

const parent = document.querySelector('.container');
const className = 'green';
const startFrom = 4;

Добавляем:

parent
  .querySelectorAll(`:scope > :nth-child(n + ${startFrom + 1})`)
  .forEach(n => n.classList.add(className));

// или

for (const n of Array.prototype.slice.call(parent.children, startFrom)) {
  n.classList.add(className);
}

// или

for (let el = parent.children[startFrom]; el; el = el.nextElementSibling) {
  el.classList.add(className);
}

// или, также удаляем класс (если вдруг есть) у тех, кому он не должен быть добавлен

for (let i = 0; i < parent.children.length; i++) {
  parent.children[i].classList.toggle(className, i >= startFrom);
}

chunk_size = 3
arr = [ int(data[i:i + chunk_size]) for i in range(0, len(data), chunk_size) ]

Какие есть способы создания массива:

• Создавать случайные числа, пока не наберётся сколько надо.
  
• Создать массив, состоящий из всех чисел интервала, выдернуть из него сколько надо случайных.
  
• Создать массив, состоящий из всех чисел интервала, перемешать его, взять из начала сколько надо.
  

Что делать при попытке создать массив с длиной больше указанного интервала:

• Кидать ошибку.
  
• Создавать массив с длиной меньше указанной.
  

Вот как-то так:

function createRandomArr(length, min, max) {
  if (length > max - min + 1) {
    throw 'такого массива быть не может';
  }

  const values = new Set;
  for (; values.size < length; values.add(min + Math.random() * (max - min + 1) | 0)) ;
  return [...values];
}

const createRandomArr = (length, min, max) => Array
  .from({ length }, function() {
    return this.splice(Math.random() * this.length | 0, 1);
  }, Array.from({ length: max - min + 1 }, (n, i) => i + min))
  .flat();

function createRandomArr(length, min, max) {
  const arr = Array.from({ length: max - min + 1 }, (n, i) => min + i);

  for (let i = arr.length; --i > 0;) {
    const j = Math.random() * (i + 1) | 0;
    [ arr[i], arr[j] ] = [ arr[j], arr[i] ];
  }

  return arr.slice(0, length);
}

Что имеет сказать по этому поводу документация:

Components can recursively invoke themselves in their own template. However, they can only do so with the name option

Значения собрать в массив: const values = [ id, sum, system, date ];.

Дальше есть варианты:

payment.innerHTML = values.map(n => `<td>${n}</td>`).join('');

// или

values.forEach(n => payment.insertCell().textContent = n);

// или

payment.append(...values.map(n => {
  const td = document.createElement('td');
  td.innerText = n;
  return td;
}));

Или, то же самое, но с массивом ключей вместо значений:

- function createPayment({id, sum, system, date}) {
+ function createPayment(data) {

- const values = [ id, sum, system, date ];
+ const keys = [ 'id', 'sum', 'system', 'date' ];

- values.forEach(n => payment.insertCell().textContent = n);
+ keys.forEach(n => payment.insertCell().textContent = data[n]);

Почему же? Смысл есть - так вы станете говнокодером.

Пытаться осваивать фреймворк без знания языка всё равно что получать высшее образование не имея среднего - на блестящие результаты можете не рассчитывать.

UPD. Вынесено из комментариев:

мне ж понятно будет

Не будет. Начните с изучения языка.

const getKeys = obj =>
  obj instanceof Object
    ? Object.entries(obj).flatMap(n => [ n[0], ...getKeys(n[1]) ])
    : [];