0xD34F

Используйте ref вместо reactive.

Судя по

const appSingle = new Vue({

вы используете vue 2. В то время как имена классов соответствуют третьей версии (был ряд изменений):

.planslider-enter-from {

.planslider-leave-from {

Непосредственно к заявленной проблеме не относится, но мимо пройти никак нельзя:

<transition-group tag="div" class="single-estate-planimetry__slider" name="planslider" appear>
    <div v-if="index === currentPlanimetry"  :data-index="index" class="single-estate__descr-img" v-for="(item, index) in planimetry" :key="item.nome">

Заменить transition-group на transition. Убрать v-if и v-for. Сделать вычисляемое свойство, представляющее текущий элемент.

Меняем transition на transition-group, сдвигаем его влево на ширину слайда; показываем слайды не с активного, а с предшествующего активному; чтобы не видеть, как первый слайд, ставший последним, уезжает в конец, задаём слайдам z-index. Вот говнокод.

data: () => ({
  items: Array.from({ length: 4 }, () => ({
    checked: false,
    value: '',
  })),
}),

<div v-for="(n, i) in items">
  <label>
    <input type="checkbox" v-model="n.checked">
    {{ i }}
  </label>
  <input v-if="n.checked" v-model="n.value">
</div>

<div class="error" v-if="$v.forms.additional.$dirty && $v.forms.additional.$invalid">

additional: this.visible ? { required } : {},

Кастомизировать внешний вид содержимого столбцов можно через их слоты:

<v-data-table>
  <template #item.created_at="{ item }">
    {{ item.created_at.toLocaleDateString('ru-RU') }}
  </template>

v-for="n in (condition ? items1 : items2)"

Можно в вычисляемое свойство завернуть:

computed: {
  items() {
    return condition ? this.items1 : this.items2;
  },
},

v-for="n in items"

Переименуйте value в initialValue (это, значит, чтобы название точнее отражало суть), selectedValue сделайте из вычисляемого свойства обычным:

data() {
  return {
    selectedValue: this.initialValue,
  };
},

Ну или подумайте ещё раз над тем, как собираетесь использовать этот компонент - может, он должен уметь работать с директивой v-model? Тогда перепишите сеттер следующим образом:

set(val) {
  this.$emit('input', val);
},

mounted() {
  console.log(this.props)

Оно называется немного иначе.

onClick : () => {
    console.log(this.props);

Ну что тут сказать... Забудьте про vue, просто забудьте. И начинайте осваивать js, вы его не знаете.

используйте transition-group:

<transition-group name="slide" tag="div" class="table-body">
  <div class="table-tr" v-for="item in items" :key="item.id">
    <div class="table-td">{{ item.id }}</div>
    <div class="table-td">{{ item.user }}</div>
  </div>
</transition-group>

.table-tr {
  transition: 0.5s;
}

.table-body {
  overflow: hidden;
}

.slide-enter-from {
  transform: translateY(-100%);
}
.slide-enter-to {
  transform: translateY(0);
}

https://jsfiddle.net/Lr5qnwtv/1/

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

const handlers = new Map();

function updateHandler(el, binding) {
  el.removeEventListener('input', handlers.get(el));

  const handler = () => {
    const value = el.value.replace(/\D/g, '').slice(0, binding.value);
    if (value !== el.value) {
      el.value = value;
      el.dispatchEvent(new Event('input'));
    }
  };
  handler();
  handlers.set(el, handler);

  el.addEventListener('input', handler);
}

Vue.directive('maxlen', {
  bind: updateHandler,
  update: updateHandler,
  unbind(el) {
    el.removeEventListener('input', handlers.get(el));
    handlers.delete(el);
  },
});

<input type="number" v-maxlen="2">

Правильно будет отказаться от решения указанной проблемы, необходимости в переборе нет. Передавайте в обработчик клика сразу нужный объект:

methods: {
  onCellClick(item) {
    console.log(item.digit);
  },

<td @click="onCellClick(item)">

Это может быть отсутствие canvas'a - вы пытаетесь отрендерить график сразу же после создания экземпляра компонента, когда никаких DOM-элементов ещё не создано. Оберните код в watcher'е в nextTick.

раз говнокод

два говнокод

Точно так же, как и всё остальное - добавляете описание в props, используете v-bind для привязки функции к экземпляру дочернего компонента.

Но вообще, так в vue делать не принято.
Принято иначе:

1. В дочернем компоненте генерируете событие: <button @click="$emit('click')".
2. В родительском на него подписываетесь: <component @click="onClick".

Хотя, конечно, чисто технически это тоже будет передачей функции - назначенные в родителе обработчики событий доступны в дочернем компоненте через свойство $listeners, так что вместо $emit('click') или (если надо передать родителю какие-то данные) $emit('click', аргумент) можно (но не нужно) написать $listeners.click или $listeners.click(аргумент).

" -> "

ну а лучше уберите строку из шаблона в свойство компонента

Используйте слот expanded-item:

<v-data-table
  :headers="mainTableHeaders"
  :items="mainTableItems"
  item-key="mainTableItemKey"
  show-expand
>
  <template #expanded-item="{ headers, item }">
    <td :colspan="headers.length">
      <v-data-table
        :headers="nestedTableHeaders"
        :items="item.nestedTableItems"
      ></v-data-table>
    </td>
  </template>
</v-data-table>

https://jsfiddle.net/krg8ac7s/

UPD. Как-то пропустил:

при клике на строчку

Убираем show-expand, добавляем обработчик клика, где отображение дополнительного контента будет переключаться вручную:

methods: {
  onRowClick(item, row) {
    row.expand(!row.isExpanded);
  },
  ...

<v-data-table
  @click:row="onRowClick"
  ...

setup() {
    let isActive = false
    return {
        isActive
    }
},

Оберните isActive в ref.

API компонента v-text-field подобной возможности не предоставляет, так что придётся закостылить.

На экземпляр компонента вешаем нативный обработчик клика, внутри проверяем, откуда пришло событие:

<v-text-field @click.native="onClick">

methods: {
  onClick({ target: t }) {
    if (
      t.classList.contains('v-messages__message') &&
      t.closest('.v-messages.error--text')
    ) {
      // ну да, кликнули по сообщению об ошибке
    }
  },
},

https://jsfiddle.net/92xcLg0y/

Устанавливаете неотформатированное значение; передаёте событие input - чтобы обработчик, установленный директивой v-model, обновил данные в компоненте; устанавливаете отформатированное значение. Для предотвращения рекурсивной обработки событий input проверяете isTrusted:

function updateValue(el) {
  el.value = el.value, из которого удалено всё, кроме цифр;
  el.dispatchEvent(new Event('input'));
  el.value = форматированное значение el.value;
}

function onInput(e) {
  if (e.isTrusted) {
    updateValue(e.target);
  }
}

Vue.directive('number', {
  bind(el) {
    el.addEventListener('input', onInput);
    updateValue(el);
  },
  update(el) {
    updateValue(el);
  },
  unbind(el) {
    el.removeEventListener('input', onInput);
  },
});

https://jsfiddle.net/Lsg6ct57/2/