0xD34F

<button class="btn btn-danger" @click='delete'>Удалить</button>

Нет, delete - это ключевое слово, и его нельзя вот так просто использовать в шаблоне.

Переименуйте метод. Или пишите @click="this.delete".

Я бы предположил, что компонент на самом деле отображается, а вот с данными проблема. Как вы передаёте данные в компонент? Выскажу ещё одну догадку, выглядит это у вас как-то так:

<my-fucking-component :myData="someData">

Ну а как подсказывает документация:

Имена HTML-атрибутов являются регистро-независимыми, поэтому браузеры интерпретируют любые прописные символы как строчные. Это означает, что при использовании шаблонов в DOM, входные параметры в camelCase стиле должны использовать свои эквиваленты в стиле kebab-case

Импортируйте компоненты Home и Map (надо заметить, что имена подобраны так себе - одно слово не рекомендуется использовать; кроме того, Map уже есть) там, где используете их - в router/index.js, импортировать в App.vue не надо (как и указывать их в components). Типа так.

Сделайте копию project.is_enabled, работайте с ней, а по событию project-saved обновляйте оригинал.

Да не надо ничего проверять. Что у вас является следствием завершившегося действия? - наличие нужных данных. Сделайте соответствующий геттер, и повесьте на экземпляр компонента 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%, у дочернего - в зависимости от текущего значения.