0xD34F

Куда кликаем и что фильтруем:

// такого у вас сейчас нет, сами догадайтесь, кому надо класс добавить
const containerSelector = '.container';

const buttonsSelector = `${containerSelector} .filter__navigation`;
const buttonSelector = `${buttonsSelector} [data-filter]`;
const buttonActiveClass = '_active';

const itemsSelector = `${containerSelector} .search__body`;
const itemSelector = `${itemsSelector} .filter-column`;
const itemHiddenClass = '_hide';
const itemFilterClassPrefix = 'filter__column_';

Назначаем обработчик клика каждой кнопке индивидуально:

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

function onFilterButtonClick({ currentTarget: { dataset: { filter } } }) {
  const activeItemClass = itemFilterClassPrefix + filter;

  this.closest(buttonsSelector).querySelectorAll(buttonSelector).forEach(n => {
    n.classList.toggle(buttonActiveClass, n === this);
  });

  this.closest(containerSelector).querySelectorAll(itemSelector).forEach(({ classList: cl }) => {
    cl.toggle(itemHiddenClass, filter !== 'all' && !cl.contains(activeItemClass));
  })
}

Или, применяем делегирование:

document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    const { filter } = button.dataset;
    const activeItemSelector = filter === 'all' ? '*' : `.${itemFilterClassPrefix}${filter}`;

    for (const n of button.closest(buttonsSelector).children) {
      n.classList.toggle(buttonActiveClass, n === button);
    }

    for (const n of button.closest(containerSelector).querySelector(itemsSelector).children) {
      n.classList.toggle(itemHiddenClass, !n.matches(activeItemSelector));
    }
  }
});

Кого на что меняем, объект вида { 'старый ключ': 'новый ключ' }:

const keys = {
  x: 'a',
  y: 'b',
  z: 'c',
};

Собираем новый массив:

const renameKeys = (obj, keys) =>
  Object.fromEntries(Object
    .entries(obj)
    .map(([ k, v ]) => [ Object.hasOwn(keys, k) ? keys[k] : k, v ])
  );

// или

const renameKeys = (obj, keys) =>
  Object.keys(obj).reduce((acc, k) => (
    acc[keys[k] ?? k] = obj[k],
    acc
  ), {});


const newArr = arr.map(n => renameKeys(n, keys));

Обновляем существующий:

function renameKeys(keys, obj) {
  for (const k in keys) {
    if (obj.hasOwnProperty(k)) {
      obj[keys[k]] = obj[k];
      delete obj[k];
    }
  }
}


arr.forEach(renameKeys.bind(null, keys));

el.insertAdjacentHTML('afterend', html);
el.remove();

// или

el.outerHTML = html;

// или

el.replaceWith(...new DOMParser()
  .parseFromString(html, 'text/html')
  .body
  .children
);

// или

el.replaceWith(
  (t => (t.innerHTML = html, t.content))
  (document.createElement('template'))
);

Если отвечать ровно на то, что спрошено, тогда (уродливому результату - уродливый код)

const arr = str.split('&').map(n => (
  n = n.split('='),
  n[1] = isNaN(n[1]) ? n[1] : Number(n[1]),
  ({
    name: n[0].endsWith('[]')
      ? `${n[0].slice(0, -2)}${typeof n[1] === 'number' ? `_${n[1]}` : ''}`
      : n[0],
    value: n[1],
  })
));

Если же обойтись без лютого бреда с подклеиванием числовых значений к имени, то

const arr = Array.from(
  new URLSearchParams(str),
  ([ k, v ]) => ({
    name: k.replace(/\[\]$/, ''),
    value: Number.isNaN(+v) ? v : +v,
  })
);

или (раз уж в тегах присутствуют регулярные выражения, то вот ещё немного хренового кода)

const arr = [...str.matchAll(/([^&]+)=([^&]*)/g)].map(([ , k, v ]) => ({
  name: k.match(/(.*?)(\[\])?$/)[1],
  value: /^-?\d+(\.\d+)?$/.test(v) ? parseFloat(v) : v,
}));

Можно попробовать использовать sortable.js:

<el-table
  ref="table"
  ...
>
  ...

const table = ref();

onMounted(() => { 
  new Sortable(table.value.$el.querySelector('thead tr'), {
    handle: 'span',
    onEnd(e) {
      columns.value.splice(e.newIndex, 0, columns.value.splice(e.oldIndex, 1)[0]);
    },
  });
});

colors: markerColors, // Устанавливаем цвета маркеров в зависимости от результата

Эта настройка предназначена для назначения цветов не отдельных маркеров, а относящихся к одному набору данных. Так что, чтобы заработало так, как вы хотите, придётся данные разделить. После чего использовать эту настройку станет уже необязательно - цвета можно задавать непосредственно внутри наборов данных. Недостаток - общей линией точки на графике не будут соединены.

Другой вариант - воспользоваться свойством discrete, позволяющим индивидуально настраивать внешний вид каждого маркера. Всплывающую подсказку это никак не затрагивает, так что её придётся кастомизировать отдельно.

function bindRootContext(obj, context = obj) {
  return new Proxy(obj, {
    get(target, key) {
      const val = target[key];
      return (
        val instanceof Function ? val.bind(Object.hasOwn(target, key) ? context : target) :
        val instanceof Object   ? bindRootContext(val, context) :
                                  val
      );
    },
  });
}


const obj = bindRootContext({
  name: 'Root',
  a: {
    name: 'A',
    logName() { console.log(this.name); },
    b: {
      name: 'B',
      logName() { console.log(this.name); },
      arr: [
        {
          name: '666',
          logName() { console.log(this.name); },
        },
        function() { console.log(this.name); },
      ],
      c: {
        name: 'C',
        logName() { console.log(this.name); },
      },
    },
  },
});

obj.a.b.c.logName(); // Root
obj.a.b.logName(); // Root
obj.a.logName(); // Root
obj.a.b.arr[0].logName(); // Root
obj.a.b.arr[1](); // Root

Можно ли пользоваться структурами данных из SDK при решении алгоритмических секций?

Ваша цель какая? Решить задачу, и ничего больше - решайте как получится. Разобраться, как эти структуры устроены - реализовывайте их самостоятельно.

читинг или норм решение?

Да конечно "читинг". Но по другой причине:

mergedList.sort()

То решение, которое от вас тут ожидается, не предполагает применения сортировки - ни встроенной, ни вручную.

кнопка.addEventListener('click', () => {
  const [ li ] = шаблон.content.cloneNode(true).children;
  li.querySelector('.card__image').src = инпут_с_ссылкой.value;
  li.querySelector('.card__title').textContent = инпут_с_подписью.value;
  список.insertAdjacentElement('afterbegin', li);

  // или

  список.prepend(document.importNode(шаблон.content, true));
  список.querySelector('img').setAttribute('src', инпут_с_ссылкой.value);
  список.querySelector('h2').innerText = инпут_с_подписью.value;
});

К чёрту focus, используйте focusin, оно всплывает, в отличие от.

Делаем просто:

for (const i of arr[0]?.keys() ?? []) {
  res.innerHTML += i ? '<br>' : '';

  for (const n of arr) {
    res.innerHTML += `${n[i]} `;
  }
}

Или, немного посложнее - оформим таблицу.

Какие у неё будут столбцы: const columns = [ 'name', 'age', 'id' ];.

Можно собирать разметку:

res.insertAdjacentHTML('beforeend', `
  <table>
    <thead>
      <tr>${columns.map(n => `<th>${n}</th>`).join('')}</tr>
    </thead>
    <tbody>${arr[0]?.map((_, i) => `
      <tr>${arr.map(n => `
        <td>${n[i]}</td>`).join('')}
      </tr>`).join('') ?? ''}
    </tbody>
  </table>
`);

Или создавать элементы напрямую:

const table = document.createElement('table');

columns.forEach(function(n) {
  this.append(document.createElement('th'));
  this.lastChild.textContent = n;
}, table.createTHead().insertRow());

arr[0]?.forEach(function(_, i) {
  const tr = this.insertRow();
  arr.forEach(n => tr.insertCell().textContent = n[i]);
}, table.createTBody());

res.append(table);

Вариант раз. Нужно знать два индекса - элемента внешнего массива и элемента внутреннего, добавим в компонент соответствующее свойство:

data: () => ({
  active: [ 0, -1 ],
  ...

При переходе к следующему/предыдущему элементу изменяем внутренний индекс, если вышли за границу внутреннего массива, переходим к следующим/предыдущим элементам внешнего массива, пока не встретится такой, у которого внутри что-то есть; внутренний индекс при этом сбрасываем в крайнее положение - чтобы соответствовал первому или последнему элементу вложенного массива, в зависимости от направления движения:

methods: {
  onKeyDown(e) {
    const { items } = this;
    const step = ({
      ArrowUp: -1,
      ArrowDown: 1,
    })[e.key];

    if (step && items.some(n => n.children?.length)) {
      let iItem = this.active[0];
      let iChild = this.active[1] + step;

      while (!items[iItem].children?.[iChild]) {
        iItem = (iItem + step + items.length) % items.length;
        iChild = step === 1 ? 0 : ~-items[iItem].children?.length;
      }

      this.active = [ iItem, iChild ];
    }
  },
  ...

Осталось выделить как активный тот DOM-элемент, индексы которого совпадают с сохранёнными в экземпляре компонента, назначаем класс при равенстве обоих пар значений:

<ul>
  <li v-for="(item, iItem) in items">
    <ul>
      <li
        v-for="(child, iChild) in item.children"
        :class="{ active: active[0] === iItem && active[1] === iChild }"
        ...

Вариант два - развернём в общий плоский массив элементы вложенных массивов:

computed: {
  children() {
    return this.items.flatMap(n => n.children ?? []);
  },
  ...

Тогда можно будет обойтись одним индексом:

data: () => ({
  active: null,
  ...

Которому просто делаем +/- 1:

methods: {
  onKeyDown({ key }) {
    const { length } = this.children;
    const step = 
      key === 'ArrowUp'   ? -1 :
      key === 'ArrowDown' ?  1 :
                             0;

    if (step && length) {
      const active = this.active ?? (step === 1 ? -1 : length);
      this.active = Math.max(0, Math.min(length - 1, active + step));
    }
  },
  ...

Если элемент вложенного массива совпадает с тем, который можно достать из плоского массива, воспользовавшись индексом, добавим соответствующему DOM-элементу класс:

<ul>
  <li v-for="item in items">
    <ul>
      <li
        v-for="child in item.children"
        :class="{ active: children[active] === child }"
        ...

В верхнем компоненте хранится текущее состояние, которое вместе с методом его обновления через provide / inject предоставляется ниже расположенным компонентам. Например.

Добавляем в компонент свойство - индекс выделенного элемента выпадающего списка:

const searchIndex = ref(-1);

По нажатию на стрелки делаем ему плюс-минус один:

function onKeydown({ key }) {
  if (key === 'Escape') {
    searchQuery.value = '';
    return;
  }

  const data = filteredProducts.value ?? [];
  const { length } = data;

  if (length) {
    const index = searchIndex.value;
    const step = +(key === 'ArrowDown') || -(key === 'ArrowUp');

    if (step) {
      searchIndex.value = (Math.max(-1, index + step) + length) % length;
    } else if (key === 'Enter' && index !== -1) {
      onSelectProduct(data[index]);
    }
  }
}

watch(() => !!searchQuery.value.length, value => value
  ? document.addEventListener('keydown', onKeydown)
  : document.removeEventListener('keydown', onKeydown)
);

В зависимости от равенства значения этого свойства текущему индексу в v-for, назначаем элементу списка класс, который его визуально выделит:

.active {
  background: #ccc;
}

<li
  v-for="(n, i) in filteredProducts"
  :key="n.id"
  :class="{ active: i === searchIndex }"
  @mouseenter="searchIndex = i"
  @click="onSelectProduct(n)"
>

Если при изменении данных, на основе которых строится список, надо сбросить выделение, создаём соответствующий наблюдатель:

watch(filteredProducts, () => searchIndex.value = -1);

Вот как-то так.

const filteredProducts = computed(() => {
  const search = searchQuery.value.toLowerCase();
  return search.length > 2
    ? data.value.filter(n => n.title.toLowerCase().includes(search))
    : null;
});

<ul v-if="filteredProducts" class="search-result">
  <li v-if="!filteredProducts.length">
    <h3>ничего не найдено</h3>
  </li>
  <li v-for="n in filteredProducts">
    <div>
      <Image :src="n.image" :alt="n.title" width="40" height="40" />
    </div>
    <h3>{{ n.title }}</h3>
    <div>
      <p>{{ n.price }}</p>
    </div>
  </li>
</ul>

Показываем не более одного - добавляем в компонент свойство, которое будет содержать id, индекс или ещё что-то уникальное для каждого из элементов данных (да хоть бы и ссылку на сам элемент). Показываем скрытое в зависимости от равенства значения этого свойства тому, что доступно в текущей итерации v-for.

Или, показываем несколько сразу - создаём отдельный компонент, в экземпляры которого будут передаваться элементы данных. Внутри компонента свойство, в зависимости от значения которого (истина-ложь) показываем или скрываем чего там надо.