VueJS 2 - Update modal component when passing in data

Question

I'm working on a simple modal component in VueJS 2. I'm firing an event from another component that passes an object myobject though to the one shown below yet the string myobject.name and the image; accessed and located at the path myobject.imagepath aren't being shown. Just to be super clear; the <h4> and <img> tags are being rendered, just not the content (from the object). I'm guessing it is because the modal is being rendered before I'm firing the event, so my question is, how do I get it to re-render, or only render once I've passed it the data?

I have a feeling that this is what the depreciated .sync did although that doesn't exist anymore - and I could be wrong anyway.

If there is a better way to do this then I'm all ears.

myobject.vue

<template>
    <div id="my-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-3 col-sm-4 col-xs-6">
                                <img id="my-modal-image" class="img-fluid" :src="myobject.imagepath"
                                     alt="Logo"></div>
                            <div class="col-md-9 col-sm-8 col-xs-6">
                                <h4 class="modal-title" v-text="myobject.name"></h4>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                myobject: {}
            }
        },

        created() {
            Event.listen('changed', function (object) {
                this.myobject = object
            });
        }
    }
</script>

This isn't a parent-child component, they are siblings. There are many components on a page that could trigger this one modal being shown. Those components fire an event and pass through some data, and then the modal component listens out for it.

Answer 1

Is there a reason to not use Dynamic Props on your component?

You could use only one dynamic prop as this

<script>
    export default {
        props: ['myobject']
    }
</script>

Now every change on myobject or in its properties will be automatically reflected on your template