0xD34F

В компоненте так же прописано удаление "EventListener", но так как компонент сохраняет своё состояние (keep-alive), данный метод не удаляет "слушателя скролла".

Как подсказывает документация, для keep-alive компонентов доступны хуки activated и deactivated - попробуйте вешать и снимать обработчик скролла в них.

выводить содержимое данного тега в консоль...

Вешаем на элемент списка обработчик клика, которому передаём соответствующий элемент массива данных. Внутри обработчика выполняем нужные действия:

<li v-for="n in items" @click="onClick(n)">
  {{ n.message }}
</li>

methods: {
  onClick(item) {
    console.log(item.message);
  }
}

...или в какой-то блок

Пусть этот блок будет расположен за пределами компонента. По клику генерируете событие, дополнительным аргументом передаём элемент массива данных:

<li v-for="n in items" @click="$emit('select', n)">
  {{ n.message }}
</li>

В родительском компоненте подписываемся на это событие, сохраняем полученные данные в свойство компонента, выводим их:

<b-list @select="selected = $event"></b-list>
<div v-if="selected">{{ selected.message }}</div>

data: () => ({
  selected: null,
  ...
})

Похоже на то, что вам нужно?

Vue не может отследить прямую установку значения элемента массива по индексу. Так что замените

shower[index] = !shower[index]

на

$set(shower, index, !shower[index])

А ещё лучше - уберите массив shower и добавьте элементам items свойство show:

data: () => ({
  items: [
    { name: '...', show: false },
    { name: '...', show: false },
    ...
  ],
  ...
}),

<span @click="item.show = !item.show">{{ item.name }}</span>
<div class="dialog_show" v-if="item.show">{{ index }}</div>

switch = !switch

Зачем вы решили использовать ключевое слово в качестве имени свойства компонента? Переименуйте.

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

<transition name="fade">

Для списков надо использовать transition-group.

<li v-for="elements in myData" v-if="elements.key == getKey()">

Во-первых - не задан key. Во-вторых.

jsfiddle.net/p2c6y0bg

Вопрос - а как вы используете myvalue? Если где-то в шаблоне, то v-if исправит ситуацию:

<div v-if="my_dates['2018-04-23']">{{ myvalue }}</div>

В противном случае есть смысл делать проверку на существование нужного свойства в my_dates и действовать по обстоятельствам, например так:

myvalue() {
  сonst date = this.my_dates['2018-04-23'];
  return date ? Number(date.april) + Number(date.may) : null;
}

Инициализируйте экземпляр Vue один раз, при открытии страницы:

const vm = new Vue({
  el: '#table-box',
  data: () => ({
    items: [],
  }),
});

А в коллбэке ajax-запроса просто обновляйте данные:

success(data) {
  vm.items = data;
},

замените

:style="{width: this.width, height: this.cavh}"

на

v-bind="{ width: width, height: cavh }"

или

:width="width" :height="cavh"

Вместо keypress обрабатывать следует событие input. Вписывать руками значение (в смысле - через element.value) в элемент не надо, пусть этим v-model занимается. Сама логика замены символов - дико переусложнено, разбирать смысла не вижу. Вот вам исправленный вариант.

Нужно ли выносить в отдельный компонент это?

Да. Рекурсивный компонент. Для вложенных данных компонент создаёт экземпляры самого себя. Условие продолжения рекурсии (рендеринга конкретного экземпляра компонента) - корректность данных, надо проверять, что в компонент был передан массив ненулевой длины. Например:

name: 'v-tree',
props: [ 'items' ],

<ul v-if="Array.isArray(items) && items.length">
  <li v-for="n in items">
    {{ n.name }}
    <v-tree :items="n.children" />
  </li>
</ul>

1) computed замените на methods

2) добавьте модификатор number в v-model

Отображаться окну или нет - это не его, окна, дело. Соответственно, showModal переносите в родительский компонент и передаёте в окно как параметр.

В родителе:

data: () => ({
  showModal: false
})

<button @click="showModal = true">Открыть склад</button>
<store-modal-component
  :show-modal="showModal"
  @close="showModal = false"
></store-modal-component>

В окне:

props: [ 'showModal' ]

Также надо будет в .modal-mask заменить @close="showModal = false" на @click.self="$emit('close')" (модификатор self - это чтобы не обрабатывать клики с вложенных элементов, т.е., собственно окна и его содержимого).

https://jsfiddle.net/jesyd734/

Можно ли не прописывать в каждом дочернем элементе мета теги - requireAuth и т.д.?

Можно:

совпавшие записи маршрутов оказываются доступны через объект $route (а также через объекты маршрутов в сторожевых хуках), в виде массива $route.matched. Таким образом, для проверки метаданных в записях маршрутов нам понадобится обойти $route.matched в цикле.

Ну и дальше там пример кода есть ещё (кстати, как раз проверка необходимости авторизации).

Передавайте "разные данные" в качестве параметров компонента.
В вашем случае это может выглядеть... допустим, так.

динамическое переключение компонентов

https://jsfiddle.net/e68y0fwc/

пишет что jobClass не является функцией

Ну вот и поместите его в methods. Не надо пытаться использовать инструмент непредусмотренным способом.

Файл, выбираемый через input, сделать свойством компонента, обновлять по событию change:

data: () => ({
  file: null,
  ...

<input type="file" accept="image/*" @change="file = $event.target.files[0]">

В объединённом методе при собирании formData вместо объекта события доставать файл из упомянутого выше свойства:

methods: {
  uploadAndCreate() {
    const data = new FormData;
    data.append('name', 'picture');
    data.append('file', this.file);

    axios.put(... // запрос из uploadImage

    axios.post(... // запрос из create
  },
  ...

Далее вот так вот например можно вывести данные самой статьи во vue

v-for="{description,created_at } in articles" ... {{ description }}

А ещё, вы не поверите, можно и иначе:
v-for="a in articles" ... {{ a.description }}
Соответственно, и автор статьи будет доступен как a.author.name (если конечно, вы насчёт структуры данных не обманываете).

Ну или по аналогии с description и created_at делайте, через деструктуризацию (кстати, а кто вам такое посоветовал? - почитали бы вместо этого официальную документацию):
v-for="{ author } in articles"
В это случае author.name будет OK.

<balancelabel @updbalance="updatebalance"></balancelabel>

А зачем здесь обработчик события? Вы это событие обрабатываете внутри компонента, emit не делаете... Может его, ну не знаю, УБРАТЬ?!

watch срабатывает тогда когда мне не надо

Ну так и включайте наблюдение только тогда, когда вам это нужно. Как это сделать, можете прочесть в документации.

вотчер возвращает оба одинаковых значения

Что естественно - от того, что вы изменили какое-то из свойств объекта, объект не заменит себя своей копией. Хотите, чтобы старое и новое значение были разными - заменяйте объект целиком.

Валидация входных параметров

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

Решение через фунцию-валидатор я видел, но мне оно не кажется оптимальным для объектов. По крайней мере в React это намного короче и наляднее.

Возможно во Vue есть аналог?

Из коробки нет (следует отметить, что в React тоже - начиная с версии 15.5 React.PropTypes является устаревшим, и вместо него следует использовать prop-types). Можете сделать класс и передавать в props конструктор для проверки, что переданный параметр является экземпляром класса. Или используйте сторонние библиотеки, например - там аналог PropTypes.shape есть.