0xD34F

const newStr = str
  .split(' ')
  .map(function([...word]) {
    const sorted = word.filter(this).sort((a, b) => b.localeCompare(a));
    return word.map(n => this(n) ? sorted.pop() : n).join('');
  }, RegExp.prototype.test.bind(/[a-z]/i))
  .join(' ');

str.replace(/(\d{2})(\d{2})/, '$1.$2.')
// или
str.replace(/(?=\d{4}$|\d{6}$)/g, '.')
// или
str.match(/(..)(..)(.+)/).slice(1).join('.')
// или
[ 0, 2, 4 ].map((n, i, a) => str.slice(n, a[i + 1])).join`.`
// или
[...str].reduce((acc, n, i) => acc + n + ([ ,'.',,'.' ][i] || ''))
// или
''.concat(...Array.from(str, (n, i) => '24'.includes(i) ? `.${n}` : n))

props.component || <a/>

props.component || 'a'

on: {
  breakpoint() {
    this.el.classList.toggle('класс', this.slides.length < this.params.slidesPerView);
  },
},

Забыли добавить ref={ref} элементу, который собираетесь скрывать.

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

Не могу закрыть поп-ап

dialog: [],

dialog[index]= false

Кто-то невнимательно читал документацию.

При нажатии на кнопку, при выборе 3 изображения на превью открывается всегда первое.

Не всегда, а при первом открытии каждого диалога.

Кстати, непонятно - а зачем вам три диалоговых окна? Сделайте одно:

data: () => ({
  slide: null,
  dialog: false,
  ...
}),
methods: {
  openDialog(slideIndex) {
    this.slide = slideIndex;
    this.dialog = true;
  },
  ...
},

v-row
  v-col(v-for="(n, i) in pictures")
    v-item
      v-img(height="100", width="100", :src="n", @click="openDialog(i)")
  v-col(hidden="")
    v-dialog(v-model="dialog")
      v-carousel(v-model="slide")
        v-carousel-item(v-for="n in pictures")
          v-img(:src="n")
      v-btn(@click="dialog = false") close dialog

В MainWindow должно быть так:

<div className="mainWindow">
  {this.props.children}
</div>

Компонент Field - откуда вы взяли, что внутрь input можно что-то помещать? Это непарный тэг. Закрывающий тэг вырезать, добавить слеш в конец открывающего. Что дальше - вам виднее, всё зависит от того, как вы предполагаете использовать props.data. Обернуть всё в label, или сделать data значением input'а.

Сначала пара слов о том, как правильно:

Роутинг для передачи данных в этой ситуации использовать не надо. Подключаете vuex, кладёте массив в хранилище, компонент home никаких параметров не принимает, просто достаёт из хранилища нужные данные и передаёт их в компонент posts:

<posts :posts="$store.state.posts" />

Как видите, всё элементарно.

Передача же "через роутинг" обернётся говнокодерством:

• Можно сделать маршрут именованным и передавать через params:
  
  

  <router-link :to="{ name: 'home', params: { posts } }">home</router-link>

  
  

  this.$router.push({
    name: 'home',
    params: {
      posts: this.posts,
    },
  });

  
  Сразу же очевиден первый недостаток такого способа: в скольких местах осуществляется переход на роут home, столько раз придётся и передавать туда явным образом массив posts, указывая его в params каждого router-link или вызова $router.push. При этом, если переход осуществляется не из корневого компонента, то, чтобы дотянуться до posts, придётся ещё и $root использовать. В случае же, когда пользователь решит осуществить переход посредством адресной строки браузера, то ничего передать не получится.
  
  Ещё один недостаток станет очевидным после перехода - оказывается, элементы posts превратились в строки. Роутер приводит к строкам значения свойств params (или, если свойство является массивом, к строкам будут приведены его элементы). Так что для корректной передачи ещё придётся и в json данные конвертировать, а в компоненте home этот json парсить - говнокод, как и обещал.
  
  
• Можно прицепить данные к router-view, тогда они будут переданы как параметры в компонент текущего маршрута: <router-view :posts="post" />.
  
  Тут тоже не всё пройдёт гладко - так передача параметров будет осуществляться в компоненты всех маршрутов, и там, где переданные параметры не описаны, они будут сочтены атрибутами и прицеплены к корневому элементу (если он один; когда несколько - надо явным образом указывать, куда добавлять $attrs). Чтобы передавать что надо только куда надо, можно оформить параметры, передаваемые в router-view, как вычисляемое свойство, значение которого будет зависеть от текущего маршрута:
  
  

  computed: {
    routeParams() {
      return что-то, в зависимости от this.$route;
    },
  },

  
  <router-view v-bind="routeParams" />
  
  

Следить за кликами за пределами корневого узла:

function Modal(props) {
  const root = useRef();

  useEffect(() => {
    const onClick = e => root.current.contains(e.target) || закрытьОкно();
    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, []);

  return (
    <div ref={root}>
      ...
    </div>
  );
}

Или сделать так, чтобы корневой узел перекрывал всю страницу, и отслеживать клики по нему:

function Modal(props) {
  return (
    <div
      className="modal-overlay"
      onClick={e => (e.currentTarget === e.target) && закрытьОкно()}
    >
      ...
    </div>
  );
}

.modal-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
}

Повесить на таблицу обработчик клика; внутри проверять, кто был нажат - если кнопка, получить ближайшего предка, который является строкой таблицы:

document.querySelector('table').addEventListener('click', ({ target: t }) => {
  if (t.classList.contains('save_order')) {
    const tr = t.closest('tr');  // всё, идентифицировали
  }
});

Удаляем один элемент:

arr.pop();

// или

arr.length -= !!arr.length;

// или

arr.splice(-1);

Удаляем несколько (const count = сколько надо удалить;):

for (let i = count; --i >= 0 && arr.length; arr.pop()) ;

// или

arr.length -= Math.max(0, Math.min(arr.length, count));

// или

count > 0 && arr.splice(-count);

echo implode('', array_map(function($author, $book) {
  return '<p>Книга '.$book['nameBook'].', ее написал '.$author['fio'].', '.$author['email'].'</p>';
}, $arr['authors'], $arr['books']));

Делегирование, назначаем обработчик события один раз для всех:

document.addEventListener('input', ({ target: t }) => {
  if (t.classList.contains('rating__value')) {
    const value = +t.value;

    t.closest('.item-rating').querySelector('.rating__dynamic').innerHTML = Array
      .from({ length: 5 }, (n, i) => `<span class="char">${'☆★'[+(value > i)]}</span>`)
      .join('');
  }
});

document.querySelectorAll('.rating__value').forEach(n => {
  n.dispatchEvent(new Event('input', { bubbles: true }));
});

Или, каждому элементу индивидуально:

for (const n of document.getElementsByClassName('rating__value')) {
  n.previousElementSibling.innerHTML = '<span class="char"></span>'.repeat(5);
  n.addEventListener('input', onRatingInput);
  onRatingInput.call(n);
}

function onRatingInput() {
  const value = this.value | 0;
  const stars = this.previousElementSibling.children;

  for (let i = 0; i < stars.length; i++) {
    stars[i].innerText = value > i ? '★' : '☆';
  }
}

Прочтите хотя бы первые два абзаца.

Такие есть варианты:

1. Сделать отдельный tbody для каждой пары строк. Переносите tbody из компонента таблицы в компонент строки - будет там корневым элементом:
   
   

   <tbody>
     <tr>... </tr>
     <tr v-if="...">...</tr>
   </tbody>

   
   Пример.
   
   
2. Сделать компонент строки функциональным - там может быть несколько корневых узлов. Пример.
   
3. Отказаться от использования компонента строки, рендерить tr сразу в компоненте таблицы:
   
   

   <tbody>
     <template v-for="...">
       <tr>... </tr>
       <tr v-if="...">...</tr>
     </template>
   </body>

   
   Пример.
   
   
4. Переехать на Vue 3 - там можно сделать компонент с несколькими корневыми узлами. Пример.
   
5. Попробовать использовать костыль. Здесь примера не будет - к этой штуке не прикасался и не собираюсь.
   

А откуда там взяться массиву в массиве и т.д.? Нужен массив объектов, которые описывают поля формы, а также объект с данными формы (это то, что сейчас у вас представлено отдельными свойствами). Всё:

data: () => ({
  formData: {},
  formMeta: [
    { name: 'phone', title: 'Телефон', type: 'text', placeholder: 'Телефон' },
    { name: 'email', title: 'E-mail', type: 'text', placeholder: 'E-mail' },
    { name: 'address', title: 'Адрес', type: 'text', placeholder: 'Адрес' },
    ...
  ],
}),

this.$emit('save-contact', this.formData);

<div v-for="n in formMeta">
  <span class="form__other-title">{{ n.title }}</span>
  <div class="form__other-data">
    <input
      v-model="formData[n.name]"
      :type="n.type"
      :placeholder="n.placeholder"
    >
  </div>
</div>

работать с dom напрямую плохая практика

Не всегда. Зависит от задачи.

Пусть компонент табов принимает в качестве параметров массив значений, описывающих табы и значение, обозначающее активный таб:

props: [ 'items', 'value' ],

В данные компонента положим стили для элемента, изображающего подчёркивание активного таба:

data: () => ({
  sliderStyles: null,
}),

Создадим сами табы и элемент подчёркивания:

<ul class="tabs">
  <li
    v-for="n in items"
    :key="n.value"
    @click="$emit('input', n.value)"
    class="tabs-item"
  >{{ n.text }}</li>
</ul>
<div
  class="tabs-slider"
  :style="sliderStyles"
></div>

Элементу подчёркивания (.tabs-slider) зададим абсолютное позиционирование и transition.

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

mounted() {
  this.$watch(
    'value',
    value => {
      const index = this.items.findIndex(n => n.value === value);
      const el = this.$el.querySelectorAll('.tabs-item')[index];
      this.sliderStyles = el
        ? {
            left: `${el.offsetLeft}px`,
            width: `${el.offsetWidth}px`,
          }
        : null;
    },
    {
      immediate: true,
    }
  );
},

https://jsfiddle.net/vsr5tLue/

const sortedArr = arr
  .map(n => [ n, new Date(n.date.replace(/(\d+)\.(\d+)\.(\d+)/, '$3-$2-$1')) ])
  .sort((a, b) => a[1] - b[1])
  .map(n => n[0]);

arr[0].split(' ') + arr[3:]