Vladislav

label строчный, соответсвенно только строчные.

1. Вставить два спана с текстами "открыть" \ "закрыть" и по классу на кнопке скрывать не нужный.
2. Задай кнопке два аттрибута, текст открыть и текст закрыть и тяни нужный

$("#categoryBtnOne").prev(".tabs__links-products.none");

$('.tabs__item-tab').not(':eq(1)').hide();
    $('.tab').click(function() {
        $('.tab').removeClass('active').eq($(this).index()).addClass('active');
        $('.tabs__item-tab').hide().eq($(this).index()).fadeIn()
    }).eq(1).addClass('active');

В функции max не включительно, но это на руку, так как массив начинается не с 1, а с 0.

Остальное за css, и логикой.
https://codepen.io/Creative_Srijon/pen/LNzrRo
https://codepen.io/Creative_Srijon/pen/xVXzOM
https://www.w3schools.com/howto/howto_js_form_steps.asp

$(this).next().slideToggle();

Зависит от интерактива на сайте. Чем его больше, тем больше смысла. Но на лендосе такое маловероятно

например на body

Поскольку body не следует использовать в качестве корневого элемента приложения, то так же, как и без vue - путём прямого обращения к classList:

<button @click="onClick">

methods: {
  onClick() {
    document.body.classList.toggle('active');
  },
},

Если же не "например" - читайте документацию, там всё есть.

https://jsfiddle.net/h4mpy/gpwecyka/3/

Просто генерирует событие, на которое может подписаться его родительский компонент.
Заметьте что такие события не "всплывают" как события в js, это только для общения между двумя компонентами. Что на практике будет означать что если куда то дальше надо передать то надо снова эмитеть, что не совсем удобно.
Но это не сильно надо, т.к. все равно все хранят данные во vuex, а не гоняют данные туда сюда