ReaverJS

Что то вроде:
StackOverflow

let articlesGroups = articles.reduce((articles, item) => {
  let article = (articles[item.category] || []);
  article.push(item);
  articles[item.category] = article;
  return articles;
}, {});

Дальше уже обходите articlesGroups - 2-я циклами. Внешний - обходит группы, внутренний - статьи. Во внутреннем как раз ставите ограничение на 5 статей.

Можно при изменении данных во внутренних компонентах - передавать все данные в одном объекте родителю. А уже при нажатии кнопки - обраватывать этот объект.
Пример:

Родительский компонент:

<template>
<div>
  <component :is="currentTab"  @updated="updateHandler" />
  <button @click="send">Send</button>
<div>
</template>

<script>
...
data: () => {
  return {
    currentFormData = {}
  }
}
methods: {
  updateHandler: function(formData) {
    this.currentFormData = formData;
  },
  send: function() {
    console.log(this.currentFormData);
  }
}
</script>

Код компонента вкладки:

<div>
  <form @change.prevent="onChange">
    <input/>
    <input/>
    <input/>
  </form>
</div>
<script>
...
methods: {
  onChange: function() {
    let myFormData = {
      kekw: this.kekw,
      pepeHand: this.pepeHands...
    };
    this.$emit('updated', myFormData);
  }
},
mounted() {
  this.onChange();
}
</script>