0xD34F

Потому что key кривой - завязан на индекс. Сделайте, чтобы он соответствовал реальным данным - всё будет OK.

Странному коду - странное поведение. Разбираться в причинах которого как-то не очень интересно. Ну не должен getCountrys быть вычисляемым свойством, не должен. Это метод, или, возможно, watcher. Переписывайте код.

RegExp('(?:^|\s)([' + arg + '][.]*)','gi');

Косяк - при использовании конструктора RegExp надо экранировать обратный слеш.
Непонятное - зачем флаг g, выделение первых букв в отдельную группу и точки, которых может вообще не быть? Вы же вроде фильтрацию делаете.

Исправляем: RegExp(`(?:^|\\s)[${arg}]`, 'i').

this.filter = expr;

Раз у вас там таблица, то, надо полагать, свойство filter передаётся этой таблице в качестве значения одноимённого параметра. Почему обычное свойство? Может, стоит сделать его вычисляемым?

Способ на мой взгляд довольно костыльный, но... массив, который вы обходите через v-for - добавить его элементам свойство height, и передавать сами элементы в Tween. Как-то так.

Используйте в качестве значения инпута параметр, типа так. Можно даже завернуть его в вычисляемое свойство с сеттером - тогда внутри компонента можно будет использовать v-model.

Вы вызываете done сразу после изменения show, поэтому элемент удаляется немедленно, не дожидаясь окончания анимации. Надо использовать коллбек onComplete:

leave(el, done) {
  TweenMax.to(el, 1, {
    x: 0,
    onComplete: done,
  });
},

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

Но если всё-таки нужно использовать именно слот - пишите собственную render-функцию. Т.е., вместо шаблона, который есть у вас сейчас, будет что-то вроде

export default {
  render(h) {
    return h('ul', this.$slots['list-item'].map(n => h('li', [ n ])));
  },
};

UPD. Если, помимо собственно списка в будущем планируется добавить в компонент List ещё какие-то элементы, то наверное будет не очень удобно рендерить всё это дело через функцию, поэтому можно написать небольшой компонент-обёртку для элементов слота:

components: {
  SlotWrapper: {
    functional: true,
    render: (h, context) => context.props.node,
  },
},

<li v-for="n in $slots['list-item']">
  <slot-wrapper :node="n"></slot-wrapper>
</li>

Я честно говоря, ожидал что это будет работать из коробки, но увы...

А оно работает. Ищите косяк у себя. Может, параметр не определили как Boolean.

Уберите атрибуты href у v-tab'ов.

А ещё не вижу, чтобы у вас использовался v-app. Где v-app? Почему его нет?

function () {
  axios.get(api.udpEmulatorProxy)

Может, всё-таки return axios.get?

this.getShips()
this.$store.commit('getShips', 10)

Что-то не улавливаю смысла этого куска кода. Наверное, надо в мутацию (кстати, а почему её имя начинается с get? - смысл-то в установке значения, так что правильно было бы set) передавать те данные, что возвращает getShips:

this.$store.commit('getShips', await this.getShips());

А если эти данные должны лежать в хранилище, то, возможно, их получение стоит оформить в виде действия, а не как отдельно лежащую функцию / метод компонента.

Делаете grad вычисляемым свойством, вместо установки значения делаете emit, и используете v-model. Как-то так.

Пользователь выбирает несколько таких чекбоксов и нажимает кнопку "Выбрать".

А зачем кнопка? Можно же сделать computed свойство, выбранные элементы будут доступны в любой момент (конечно, если вы не забыли связать данные с чекбоксами через v-model), как-то так:

selected() {
  return this.filters.map(n => ({
    filterId: n.filterId,
    values: n.filterData.variants.filter(m => m.checked).map(m => m.key),
  }));
},

Сделайте отдельный компонент, который будет представлять ваш dropify инпут. У него в mounted инициализируйте dropify. И используйте этот компонент в своей таблице вместо обычного input'а.

Считаете чтение документации излишним? Очень зря. Ведь иначе вы бы знали, что data должна быть функцией:

data() {
  return {
    items: ['iPhone 7', 'Galaxy S8', 'Nokia N8', 'Xiaomi Mi6'],
  };
},

:class="{ ['cls_'+ i1]: i2 > 2 }"

Рекомендую ознакомиться.

хочу сделать крутящийся spinner на блоке, когда данные обновляются, затем при выводе новых данных, скрывать его

Добавляете свойство showSpinner. Перед запросом делаете:

this.showSpinner = true

После получения ответа:

this.showSpinner = false

В шаблоне, соответственно:

<div class="spinner" v-if="showSpinner"></div>

Посмотреть живьём.

Погуглил за вас:

https://github.com/ssthouse/tree-chart
https://github.com/walkerz88/vue-family-tree
https://github.com/tower1229/Vue-Tree-Chart
https://github.com/David-Desmaisons/Vue.D3.tree
https://github.com/megafetis/vue3-blocks-tree

Консоль говорит, что не может найти product, потому что я не правильно использую хуки.

Нет. Консоль вам говорит что-то другое.

Вот эта вот строка,

var prod = product;

- что вы хотели ею сказать? Что ещё за product? Это который в data лежит? Тогда должно быть this.product. Почему вы пытаетесь определить переменную с таким же именем как и у параметра? А при вызове в хуке mounted - почему ничего не передаёте в метод results, у него же определён параметр?

Думаю, должно быть так: строку, процитированную выше - просто удаляете, а в mounted при вызове results передавайте ему product - this.results(this.product). Или так: строку удаляете, удаляете параметр prod, в вызове axios.get вместо prod используете this.product.

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

при вводе каждого символа с поля слетает фокус

Потому что при изменении значения поле создаётся заново - ведь вы в качестве key это значение и указали. Что само по себе является дичью несусветной, кроме того, так у вас могут быть поля с одинаковыми key.

Генерируйте уникальные значения для key в момент добавления нового элемента в массив company_ids. Если удаление элементов из массива не предполагается, это может быть просто количество элементов / индекс элемента в массиве:

this.form.company_ids.push({
  key: this.form.company_ids.length,
});

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

this.form.company_ids.push({
  key: ++this.currKey,
});

Или можно брать текущее максимальное значение key + 1:

this.form.company_ids.push({
  key: Math.max(0, ...this.form.company_ids.map(n => n.key)) + 1,
});