Vue.js 如何 for each 用户分组聊天消息

我有一个使用Vue构建的群聊消息.js.我目前正在获取返回如下数组的消息:

"data":[
    {
        "id":1,
        "message":"<p>yo<\/p>",
        "removed":"false",
        "user":{
            "uid":2,
            "metadata":{
                "username":"Testing"
            }
        },
        "post_date":"2018-02-24 14:30"
    },
    {
        "id":2,
        "message":"<p>test<\/p>",
        "removed":"false",
        "user":{
            "uid":1,
            "metadata":{
                "username":"Admin"
            }
        },
        "post_date":"2018-02-24 22:31"
    },
    {
        "id":3,
        "message":"<p>Wassup?<\/p>",
        "removed":"false",
        "user":{
            "uid":1,
            "metadata":{
                "username":"Admin"
            }
        },
        "post_date":"2018-02-24 22:40"
    },
    {
        "id":12,
        "message":"again for testing post date",
        "removed":"false",
        "user":{
            "uid":1,
            "metadata":{
                "username":"Admin"
            }
        },
        "post_date":"2018-03-04 00:59"
    },
    {
        "id":13,
        "message":"Hello!",
        "removed":"false",
        "user":{
            "uid":2,
            "metadata":{
                "username":"Testing"
            }
        },
        "post_date":"2018-03-04 11:13"
    },
    {
        "id":13,
        "message":"<p>Hi!</p>",
        "removed":"false",
        "user":{
            "uid":2,
            "metadata":{
                "username":"Testing"
            }
        },
        "post_date":"2018-03-04 11:13"
    },
],

目前，我只是在数据中循环，并将每条消息输出到一个单独的div.我更喜欢的是，当同一个用户连续发布多条消息时，对消息进行分组.

我该怎么办？它应该是可选的服务器端(可能是可选的group参数？)还是以某种方式在客户端完成？

EDIT

这是理想的外观:

如果我按UID/用户名对它们进行分组，问题是消息需要按顺序输出.所以，如果用户1发送三条消息，然后用户2发送两条，然后用户1发送另一条消息，那么所有用户1的消息都将被分组在一起.相反，用户1的三条消息应该分组，然后是用户2，然后它应该显示用户1的最后一条消息.