0xD34F

Добавляете в data свойство active, которое и используете для отображения нужного submenu вместо sidebarshow:

<li class="sidebar__item" v-for="(category, index) in sidebarList.cat">
  <h2 class="sidebar__title" @click="active = active === index ? null : index">{{ category }}</h2>
  <ul class="submenu" v-if="active === index">

Лучше конечно, если у вас в category есть какой-нибудь уникальный идентификатор - тогда вместо индекса следует использовать его.

Можно повесить обработчик click на корневой элемент: если целевым элементом является ссылка - отменяете действие по умолчанию и открываете новое окно вручную:

<div id="app" @click="onClick">
  ...

new Vue({
  el: '#app',
  methods: {
    onClick(e) {
      if (e.target.tagName === 'A') {
        e.preventDefault();
        window.open(e.target.getAttribute('href'));
      }
    },
    ...
  },
  ...
});

Во-первых - вы пытаетесь установить в качестве обработчика resize не метод, а результат его выполнения. Во-вторых - честно говоря, затрудняюсь понять, на что вы рассчитывали, как бы вы ни дёргали метод расчёта высоты, что от этого измениться для computed? Да ничего. Класть результат в data вам уже советовали, и даже показали рабочий пример - тут я ничего добавлять не буду (кроме того, что лично я - всё-таки результат в data бы положил). Если вам кровь из носу надо без хранения результата, то... ну, вот говнокод:

<div id="app">
  <h1>{{ h() }}</h1>
</div>

new Vue({
  el: '#app',
  methods: {
    h() {
      return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    },
  },
  created() {
    window.addEventListener('resize', () => this.$forceUpdate());
  },
});

Вместо общего isActive добавьте такое свойство каждому элементу в arr, и меняйте его:

<div v-for="(n, i) in arr" class="block-calculations__panel">
  <span
    :data-col="i"
    :class="{ active: n.isActive }"
    @click="n.isActive = !n.isActive"
  ></span>
</div>

UPD. А, так вам надо, чтобы активным мог быть только один элемент... Переименуйте isActive в просто active, это будет индекс кликнутого элемента. Класс назначайте в случае равенства текущего индекса и active:

<div v-for="(n, i) in arr" class="block-calculations__panel">
  <span
    :data-col="i"
    :class="{ active: active === i }"
    @click="active = active === i ? null : i"
  ></span>
</div>

<input type="checkbox" :id="`checkbox-${item.key}`" :value="item.key" v-model="status">

Я хочу прямо в HTML написать <canvas id="threejs_here"> </canvas> и как-то назначить этот canvas для вывода рендера three.js

Нет проблем. Ставите своему canvas'у ref:

<canvas ref="threejs"></canvas>

И указываете его при создании рендерера:

new THREE.WebGLRenderer({
  canvas: this.$refs.threejs,
})

Как-то так.

Вы computed засунули в data - что за бред?

Каждому элементу в uploads добавляете свойство val, которое и используете в v-model.

Таким образом, nextButtonDisabled заметно упроститься:

nextButtonDisabled() {
  return this.uploads.some(n => n.required && !n.val);
},

Отдельные же значения param1, param2, ... - выкидываете, вместо этого делаете computed свойство formData:

formData() {
  return this.uploads.reduce((acc, n) => (acc[n.name] = n.val, acc), {});
},

Ну, очевидно, v-for имеет более высокий приоритет, вот и выполняется в обоих случаях.

Что делать? Добавьте элементу с v-for обёртку, в которую и перенесите v-if.

Единственная странность, chrome после прилета данных выводит в консоль false черным цветом, а после изменения с помощью событий(по щелчку) - синим.
В чем может быть проблема?

Это хорошо, что вы обратили внимание на цвет - в первом случае у вас "false" (строка, поэтому оно и "всегда правда"), во втором false (boolean).

rootVueSteplist.$data = Object.assign(rootVueSteplist.$data, response.data)

Присваивание не нужно. Object.assign модифицирует объект, переданный первым аргументом. Т.е., достаточно просто

Object.assign(rootVueSteplist.$data, response.data);

Или даже Object.assign(rootVueSteplist, response.data);, ведь как нам докладывает документация про $data,

Экземпляр проксирует сюда вызовы своих полей. (Например, vm.a будет указывать на vm.$data.a)

Как получить ключи из products внутри компонента? По идее, их вроде бы надо объявить в props

А чо не объявили-то?

вылетает ошибка

Очень информативно. Для ясновидящих.

products: [];

Уверены, что тут должна быть точка с запятой? Возможно, вместо того, чтобы обламывать зубы на использовании фреймворков, вам следует изучить основы языка?

Так, теперь что делать:

1. Указываете ключ из products в props, его же используете в шаблоне:

Vue.component('cart-item', {
  props: [ 'product', 'productKey' ],
  template:'<div>{{ product }} {{ productKey }}</div>',
});

2. Также несколько иначе будет выглядеть ваш v-for:

<cart-item
  v-for="(product, key) in products"
  :product="product"
  :product-key="key"
  :key="key"
></cart-item>

UPD. Возможно, стоит сделать products массивом по получении данных, и ключи - свойствами элементов массива. Тогда не придётся передавать в компонент дополнительный параметр.

Сделайте отдельный метод:

@click="onClick"

methods: {
  onClick() {
    this.myVueMeth1();
    this.myVueMeth2();
    document.forms[0].submit();
  },
},

UPD. Конечно, вы можете определить computed свойство для document, типа так:

computed: {
  document() {
    return document;
  },
},

Тогда ваш первый пример заработает. Но это какое-то варварство, на мой взгляд.

Дело в том, что значение pickeds задаётся лишь единожды - при создании экземпляра компонента app-some, так что странно ожидать, что оно изменится - вы этого нигде не делаете.

Не знаю, чего конкретно вам надо, но... Чтобы чекбоксы переключились, есть варианты:

• Отказаться от внутреннего массива, использовать параметр. Типа так.
  
• Использовать computed вместо data. Типа так.
  
• Задать key для app-some, это приведёт к созданию нового экземпляра компонента при изменении activeId. Типа так.
  

Используйте mounted вместо created:

mounted() {
  this.$refs.textArea.addEventListener(...

Так?

что-то мне подсказывает, что сам подход не верен

Ну в общем да, проблемка есть - унеся всю логику в computed (чего вообще делать не надо, т.к. computed для подобного не предназначены), затруднительно определить, какой из чекбоксов изменил последним своё состояние. Если выбран один чекбокс "секция №" и "все", что надо делать - снять первый или второй? Непонятно.

возможно вообще стоит разделить all и остальной список чекбоксов?

Да, так тоже можно.

Раз selected у вас массив - указывайте индекс, замените v-model="selected" на v-model="selected[i]".

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

Вам тут не фильтр нужен, а computed свойство или метод.

Наверное, child изначально в model отсутствуют, да? Попробуйте

self.model.child = response.data.folders;

заменить на

self.$set(self.model, 'child', response.data.folders);