How to correctly group components with the same date?

Question

Vue.js

There are 2 components:

<Operations>
    <OperationsItem>

Now the basic functionality (through v-for I iterate over an array of objects and pass it to OperationsItem). The OperationsItem component has a header (where the date is) and a body (the name and amount of the operation). You need to make sure that objects with the same date do not duplicate the date. They would be visually grouped and under the same header

Answer 1

var source = [
    {
      "id": 8,
      "name": "Опер3",
      "value": 88,
      "date": "2021-01-22"
    },
    {
      "id": 5,
      "name": "Опер2",
      "value": 452,
      "date": "2021-01-12"
    },
    {
      "id": 50,
      "name": "Опер20",
      "value": 4523,
      "date": "2021-01-22"
    }
]

var groupByDate = {};
source.forEach(function(item){
  if(groupByDate[item.date]){
    groupByDate[item.date].push(item)
  } else {
    groupByDate[item.date] = [item]
  }
})

As a result, we get an object whose properties are dates, and the values ​​are arrays of elements of these dates.
Well, then we sort through the object in any convenient way and display it in the DOM.