Вадим

Иди документацию читай.
https://vuejs.org/guide/essentials/template-syntax.html

<template>

    <button
            class="btn btn1"
            :class="{'active-btn': currentActive === 'limit'}"
            @click="currentActive='limit'">
        Limit
    </button>
    <button
            class="btn btn2"
            :class="{'active-btn': currentActive === 'market'}"
            @click="currentActive='market'">
        Market
    </button>

</template>

<script>
export default {
    data() {
        return {
            currentActive: 'limit'
        }
    }
}
</script>

const isAllEven = (arr) => arr.every((x) => x % 2 === 0);

function render(arr) {
    return `<a data-num="${arr.id}" data-category="${arr.category}" class="products__card card">
                <div class="card__image image">
                    <img src="${arr.image}" alt="${arr.image}">
                </div>
                <h3 class="card__title title">${arr.name}</h3>
                <p class="card__desc">${arr.description}</p>
                <div class="card__bottom">
                    <p class="card__price">${arr.price} р.</p>
                    <button class="card__buy">
                        <img src="images/icons/shopping-cart-add.svg" alt="shopping-cart-add">
                    </button>
                </div>
            </a>`;
}

function loadCakes(data, count = null) {
    return data
        .slice(0, count ?? data.length)
        .reduce((carry, item) => carry + render(item), '');
}

function loadItems() {
    $.getJSON('database/products.json', function (data) {
        $('#cakes-cards').html(loadCakes(data));
        $('#index-cards').html(loadCakes(data, 6));
    });
}

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

Как часто вообще используются CMS в создании сайтов компаниями?

Практически все небольшие компании делают свои сайты/интернет-магазины при помощи CMS.

Более крупные - практически никто не использует CMS (либо используют своё узкоспециализированное решение).

И вообще имею такой стереотип, что CMS - это не серьезно.

Смотря с какой стороны смотреть:

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

С точки зрения твоего личного роста как инженера - да, CMS - это тупиковая ветвь.

И еще: на что стоит обратить внимание на первой работе?

Узнавать заранее, как будет устроена работа и как тебя будут оценивать - это нормально.
Просить прибавку к зп - это нормально.
Иди с вопросами к твоему руководителю, если тебе не нравится работать в той команде/над тем проектом, на который тебя поставили - это нормально.
Менять работу, если новое место работы обещает более интересные для тебя условия - это тоже абсолютно нормально.

В любом случае всё время нужно будет развиваться и это зависит уже от челоека, а не от компании.

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

Как бы вы поступили?

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

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

Вариант 1. Не искать элементы, а добавлять их в список сразу при создании.
Вариант 2. Искать элементы в DOM после того, как они были добавлены.
Вариант 3. Использовать методы, возвращающие живую HTMLCollection, например getElementsByClassName.

Нет, нельзя

Но можно отобразить текст после загрузки картинки.

<div class="block">
  <img src="..." onload="this.classList.add('loaded')">
  <span>Текст поверх картинки</span>
</div>

.block {
  position: relative;
}
.block span {
  position: absolute;
  display: none;
}
.block img.loaded + span {
  display: block;
}

Попробуйте во вкладке network отобразить колонку `Initiator`
И тогда по идеи, вы сможете найти откуда был отправлен запрос.

return работает, но вы возвращаемый результат не используете.

const foo = createContainer();
document.body.appendChild(foo);