Vue: How do I render a set of components based on an event stream?

Question

<component :is="stream-display" :stream="stream" v-for="(stream, key) in streams" :key="key"></component>
<template id="stream-component">
    <div class="card">
        <div class="card-header">{{ stream.name }}</div>
        <div class="card-body"><pre>{{ stream }}</pre></div>
    </div>
</template>
<script>
    Vue.component('stream-display', {
        props: ['stream'],
        template: '#stream-component'
    });
    const vm = new Vue({
        el: '#app',
        data: {
            streams: null
        },
        created: function() {
            const self = this;
            const eventSource = new EventSource('my-url');
            eventSource.addEventListener('message', function (evt) {
                const data = JSON.parse(evt.data);

                // each message has a unique id for the stream it is for
                self.streams = self.streams || {};
                self.streams[data.id] = data;
            });
        }
    });

the above is very similar to my set up. i've had two issues with this, though. it's either the display is not updated, or when one stream ends, the others stop getting updated.

Answer 1

after asking in the Vue Discord, i got this as the answer:

<component :is="stream-display" :stream="stream" v-for="(stream, key) in streams" :key="key"></component>
<template id="stream-component">
    <div class="card">
        <div class="card-header">{{ stream.name }}</div>
        <div class="card-body"><pre>{{ stream }}</pre></div>
    </div>
</template>
<script>
    Vue.component('stream-display', {
        props: ['stream'],
        template: '#stream-component'
    });
    const vm = new Vue({
        el: '#app',
        data () {
          return {
            streams: {}
          }
        },
        created() {
            const eventSource = new EventSource('my-url');
            eventSource.addEventListener('message',  evt => {
                const data = JSON.parse(evt.data);

                // each message has a unique id for the stream it is for
                this.$set(self.streams, data.id, data)
            });
        }
    });
</script>

the issue is that streams wasn't reactive. making it an object and using the Vue setter enabled reactivity for it.