0xD34F

Да не надо ничего проверять. Что у вас является следствием завершившегося действия? - наличие нужных данных. Сделайте соответствующий геттер, и повесьте на экземпляр компонента v-if с этим геттером. Пока данных нет - экземпляр компонента не будет рендериться, а значит и мутация, требующая отсутствующих данных, тоже вызвана не будет, а значит и ошибки не будет.

Создавайте ссылки с помощью v-for.

В data у вас будет массив:

links: [
  { title: 'link #1', to: { name: 'AdmissionActList' } },
  { title: 'link #2', to: { name: 'ShiftsTask' } },
  // ну и так далее
],

А в шаблоне вместо кучи элементов:

<ul class="list-unstyled components">
  <b-nav-item
    v-for="link in links"
    :to="link.to"
    @click.prevent="sidebarCollapse"
  >{{ link.title }}</b-nav-item>
</ul>

Вот как-то так. А вообще - читайте документацию, это основы.

в зависимости от значения переменной, нужно рендерить либо
<div class="link">контент</div>
либо

<router-link to="/path" class="link">контент</router-link>

Используйте v-if / v-else.

Ну или сделайте computed свойство:

<component v-bind="bullshit" class="link">контент</component>

computed: {
  bullshit() {
    const attrs = {};
    attrs.is = this.isLink ? 'router-link' : 'div';
    if (this.isLink) {
      attrs.to = '/path';
    }
    return attrs;
  }
}

в документации сказано что его нужно импортировать в обьект:
import { VueEditor } from 'vue2-editor'

Ну тогда попробуйте этот самый VueEditor при импорте и отдать:

Vue.component('vue-editor', () => import('vue2-editor').then(c => c.VueEditor));

Назначьте чекбоксам нормальные значения: :value="name".

Или указывайте в v-model индекс: v-for="(name, i) in names", v-model="checkboxValue[i]".

v-for="post in posts.slice(0, определённое количество)"

Ну и конечно, это можно завернуть в computed свойство.

:is?

Это неправильный подход. Сделайте свойство showDocs, которое будет отвечать за видимость элемента, а на сам элемент добавьте v-show="showDocs". Обработка клика станет выглядеть так: @click="showDocs = !showDocs".

Ну а почему ваш код не работает как надо - так это потому, что дефолтное значение style.display вовсе не none, а пустая строка (скорее всего - вы ведь элемент через css изначально скрываете, да?).

UPD. Вынесено из комментариев:

Так не получиться, так как вывожу элементы в цикле v-for.

Получится. Задайте каждому из перебираемых объектов отдельное свойство, отвечающее за его видимость, как-то так. Или сделайте компонент для отображения отдельного элемента, который будет содержать в себе свойство, управляющее видимостью.

Cвяжите состояние чекбокса со значением через v-model, в обработчике клика присваивайте false, типа так.

Если же под "сторонней областью" вы понимаете всё, что находится за пределами какого-то элемента, то вешайте на этот элемент ref; на document вешайте обработчик клика, в котором проверяйте, что target находится за пределами элемента, типа так.

data: () => ({
  checked: null,
  items: [ 'hello, world!!', 'fuck the world', 'fuck everything' ],
}),

<label v-for="(n, i) in items">
  <input
    type="checkbox"
    :checked="checked === i"
    @change="checked = $event.target.checked ? i : null"
  >
  {{ n }}
</label>

Одно непонятно - а зачем чекбоксы-то, чем радиокнопки не угодили?

Сделайте номер страницы параметром маршрута - тогда не будет проблем переходить откуда угодно не только на первую страницу, но и любую другую.

UPD. Разверну немного свою мысль. Как я понял, это продолжение вашего предыдущего вопроса.

Компонент с пагинацией - при смене страницы вместо установки текущей активной страницы будет выполняться $router.push, сама текущая страница из свойства компонента станет его параметром и будет браться из параметров маршрута. Примерно так. Не знаю, похоже ли это на то, что вам надо, если нет - кидайте свой код в песочницу, тогда возможно, смогу подсказать точнее.

Всё работает, просто done надо дёргать по окончании анимации, типа так.

А вы сейчас вызываете done сразу же - ну элемент и удаляется.

Соберите все user_input_* в один объект (user_inputs, например), и тогда можно будет сделать так:

computed: {
  isFilledAll() {
    return Object.values(this.user_inputs).every(n => n.isFilled);
  },
},

Или под "заполнены" вы понимаете не-null значения свойств val_*? Тогда отдельные isFilled не нужны:

isFilledAll() {
  return Object.values(this.user_inputs).every(n => Object.values(n).every(m => m !== null));
}

findIndex(item => item.id = id)

А-а-а-а-а-а-а-а!!!!!!!

Что стоит доизучить?

Доизучите, чем присваивание отличается от проверки на равенство.

UPD. Почему используется findIndex, не очень понятно - можно через find сразу получить нужный элемент:

addToCart(state, id) {
  state.cartItems.push(state.products.find(n => n.id === id));
},

А если там, откуда вы вызываете мутацию, доступен не только id, но и весь объект - можно передавать в мутацию его, и тогда ничего искать будет не надо:

addToCart: (state, product) => state.cartItems.push(product),

Но вообще, было бы неплохо проверять наличие добавляемого товара в корзине, и вместо дубликатов обновлять счётчик экземпляров, т.е., помещать в корзину не оригинал, а копию объекта с дополнительными данными, например:

addToCart({ cartItems, products }, id) {
  let product = cartItems.find(n => n.id === id);
  if (!product) {
    cartItems.push(product = {
      ...products.find(n => n.id === id),
      quantity: 0,
    });
  }

  product.quantity++;
},

Можно связать компоненты через шину событий.

Или через общего родителя.

как это правильно называется

Это называется прогрессбар.

Присутствует в любом уважающим себя наборе ui-компонентов - vuetify, bootstrap-vue, element, vue material... Также на awesome-vue можете найти ряд отдельных компонентов. Ну или сделайте свой, ничего сложного в этом нет: два элемента div с различными background-color, один вложен в другой, у родительского ширина 100%, у дочернего - в зависимости от текущего значения.

можно как-то, грубо говоря, весь изменяемый объект наверх посылать

Можно.

Или пару ключ-значение. В этом случае обработчик в родительском компоненте останется один, и выглядеть будет примерно так:

@change="onChange"

methods: {
  onChange(e) {
    this.userProps[e.name] = e.val;
  }
}

Это нормально...

Нормально.

...или можно как то его оставить что бы не рендерит по новой?

Можно - используйте keep-alive.

А в чём разница между вашими компонентами? В данных? Значит компонент должен быть один и принимать параметры. Ну а в остальном - вы вчера похожий вопрос задавали.

Выражение [] || this.$store.getters.getMyData() всегда будет иметь своим значением пустой массив. Это первое. Второе - а что, ваш геттер действительно возвращает функцию? Или вы полагаете, будто его надо вызывать? Третье - если по вашей задумке значением myData может быть пустой массив, то почему вы работаете с myData как с объектом? Или, почему вы, зная, что нужен объект с определёнными свойствами, в качестве заглушки используете массив?

Я бы предположил, что реально вы имели в виду следующее:

myData() {
  return this.$store.getters.getMyData || { list: [] };
},