siimee/frontend/src/components/Sidebar.vue

<template lang="pug">
aside.sidebar.p-1
    h3 Messages
    input
    label search

    messages(:title="title" :users="users")
</template>

<script>
import messages from './Messages.vue'

export default {
    components: { messages }, 
    data: () => ({
        title:'Messages from Matches',
        uid: 111,
        users: [
            {
                name: 'Bob McRob',
                uid: 111,
                avatar: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/newborn-baby-boy-sleeping-peacefully-wearing-knit-royalty-free-image-1589459736.jpg?crop=0.669xw:1.00xh;0.228xw,0&resize=640:*',
                metadata: { rawMetadata: 'howdy howdy howdy' },
            },
            {
                name: 'Rob Bebob',
                uid: 112,
                avatar: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/newborn-baby-boy-sleeping-peacefully-wearing-knit-royalty-free-image-1589459736.jpg?crop=0.669xw:1.00xh;0.228xw,0&resize=640:*',
                metadata: { rawMetadata: 'this is the last message' },
            },
        ],
    }),
}
</script>

<style lang="postcss">
aside.sidebar
    background-color: yellow
    height: 100vh
</style>