Javascript 如何合并具有相同值的行

const app = Vue.createApp({
  data() {
    return {
      networkGroups: [{id: 1, source: "group A", name: "Aples", accountId: "1237", size: 9}, {id: 2, source: "group B", name: "Oranges", accountId: "0293", size: 7}, {id: 3, source: "group A", name: "Carrots", accountId: "3849", size: 1}, {id: 4, source: "group B", name: "Onions", accountId: "8172", size: 3}, {id: 5, source: "group B", name: "Mangos", accountId: "2742", size: 10}],
    };
  },
  computed: {
    groups() {
      const gr = []
      this.networkGroups.forEach(g => {
        if (!gr.includes(g.source)) gr.push(g.source)
      })
      return gr
    },
  },
  methods: {
    net(group) {
      return this.networkGroups.filter(n => n.source === group)
    }
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<table>
  <tbody class="network_Group">
    <tr v-for="(gr, idx) in groups" :key="idx">
      <td class="text-center data-column first_row">
        <span> {{ gr }} </span>
      </td>
      <td>
        <table>
          <tbody class="network_Group">
            <tr
              v-for="(networkGroup) in net(gr)"
              :key="networkGroup.id"
              :class="{ odd2: index % 2 !== 0 }">
              <td class="text-center data-column">
                  <span> {{ networkGroup.name }} </span>
              </td>
              <td class="text-nowrap text-left breakAll">
                  <span> {{ networkGroup.accountId }}</span>
              </td>
              <td class="text-center data-column">
                  <span> {{ networkGroup.size }} </span>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
</div>