Sector567

Делегирование, назначаем обработчик клика один раз для всех:

document.querySelector('.menu').addEventListener('click', ({ target: t }) => {
  if (t.tagName === 'A') {
    const submenu = [...t.parentNode.children].find(n => n.classList.contains('sub-menu'));
    if (submenu) {
      submenu.classList.toggle('red');
    }
  }

  // или

  if (t.matches('a')) {
    t.parentNode.querySelector(':scope > .sub-menu')?.classList.toggle('red');
  }
});

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

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

function onClick() {
  this.nextElementSibling?.classList.toggle('red');
}

// или

document.querySelectorAll('.sub-menu').forEach(function(n) {
  n.previousElementSibling.addEventListener('click', this);
}, e => e.target.nextElementSibling.classList.toggle('red'));

Вы же знаете, что объекты по ссылкам хранятся?

map.get(k1) // ссылается на тот же объект, которым вы задали значение в set
map.get({a:1}) // уже совершенно другой объект

{a:1}, {a:1} // это два разных объекта
map.set({a:2}, 'oops') // вы не сможете достать или удалить это значение, потому как единственная 
//ссылка на ключ лежит в самом Мапе

Почитайте больше о том, как работают объекты.

Поправка, вы можете достать подобный ключ, например так:

for (let key of map.keys()) {
  console.log(map.get(key))
}

1) Люди смотрят слева направо, такой формат будет сбивать с толку. Смотри аналоги, тот же OZON.
2) "2999 руб." - всё это зачеркни
3) Не надо лишнего текста, используй цвет.
4) Что значит "как назвать"? Отталкивайся от названия родителя. Родитель-название блока.

Как с этим работать?

Никак!)

Обычная растровая фотография может быть закодирована в base64 и вставлена inline в css, html, svg. В вашем примере обычная фотография закодирована в base64 и вставлена в svg. Считайте что это обычная фотография.

Скачайте эту же фотографию в jpeg и работайте с ней.

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

<aside class="aside">
    <div class="aside__logo logo">
        <div class="logo__pic">
            <img src="logo.png" alt="logo" class="logo__img" />
        </div>
        <div class="logo__title">Заголовок</div>
        <div class="logo__ico">Иконка</div>
    </div>
</aside>

если кто-то вдруг захочет покрасить все иконки через код, ему придется дергать fill у svg, плюсом ещё нужно будет искать этот after, before, потом тянуться к нему и синхронизировать изменение цветов. ничего с сайтом не случится, если ты вставишь svg, а не befor, а вот потом проблем станет в разы меньше.

В данной ситуации я бы лучше использовал svg. Так как твое меню состоит из svg иконок, то лучше делать в одинаковой стилистике. Лучше будет по читабельности и понятней по логике, например для другого прогера

Учитывая предыдущие комменты — работай с промисами.

new Vue({
   el: '#app',
   data: {
     items: [{em: true},{em: true},{em: true}]
   },
    methods:{
      click(item) {
         item.em = !item.em
      }
    }
})

<div id="app">
  <div class="wrap">
    <div class="item" v-for="(item, i) in items" :key="i">
      <div class="parent" @click="click(item)">
        {{item.em}}
        <div class="child" :class="`class${i}`" :style="{background: item.em ? 'blue' : 'red'}">{{ i + 1 }}</div>
      </div>
    </div>
  </div>
</div>

Один из способов: можно выводить цвет прямо в аттрибут style в зависимости от значения

<div class="child" :style="`background: ${(!!n.em) ? 'blue' : 'red'};`">{{ i + 1 }}</div>

click (i) {
       this.items[i].em = !this.items[i].em
}

Добавьте стили:

.child.red {
  background: red;
}

Обработчик клика пусть выглядит так: @click="n.em = !n.em".

А назначение класса так: :class="{ red: n.em }".

• Если только один элемент может изменить свой цвет, то добавляем в компонент свойство, которое будет содержать индекс такого элемента или его id или ещё что-то уникальное. В зависимости от его равенства этой уникальной характеристике элемента назначаем класс:
  
  

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

  
  

  <div class="item" v-for="i in 5">
    <div class="parent" @click="active = active === i ? null : i">
      <div class="child" :class="active === i ? 'green' : 'red'">{{ i }}</div>
    </div>
  </div>

  
  
• Если одновременно несколько элементов могут менять свой цвет, то надо хранить состояния каждого:
  
  

  data: () => ({
    items: Array(5).fill(false),
  }),

  
  

  <div class="item" v-for="(n, i) in items">
    <div class="parent" @click="$set(items, i, !n)">
      <div class="child" :class="{ green: n, red: !n }">{{ i + 1 }}</div>
    </div>
  </div>

  
  Или, можно сделать отдельный компонент для отображения одного элемента, который будет содержать в себе его состояние:
  
  

  props: [ 'text' ],
  data: () => ({
    active: 0,
  }),

  
  

  <div class="item">
    <div class="parent" @click="active ^= 1">
      <div class="child" :class="[ 'red', 'green' ][active]">{{ text }}</div>
    </div>
  </div>

  
  И создавать сколько надо экземпляров:
  
  

  data: () => ({
    items: Array.from({ length: 5 }, (_, i) => `item #${-~i}`),
  }),

  
  <v-item v-for="n in items" :text="n"></v-item>
  
  

Или формируй запросы по мере необходимости с offset и limit-параметрами. Если API такое не умеет — это плохое API.

Хотя 100 записей (если там не портянка на каждую запись) и бэк не скрипит, отдавая, то это в принципе норм и ты можешь создавать узлы изображений по мере необходимости, держа все данные в памяти. Можно и дальше пойти в сторону intersectionObserver, но кажись это сложновато будет)

Vue да, идеально подходит.