VueJS 2 - Update modal component when passing in data
<p>I'm working on a simple modal component in VueJS 2. I'm firing an event from another component that passes an object <em>myobject</em> though to the one shown below yet the string <em>myobject.name</em> and the image; accessed and located at the path <em>myobject.imagepath</em> aren't being shown. Just to be super clear; the <code>&lt;h4&gt;</code> and <code>&lt;img&gt;</code> 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?</p>

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

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

<p><strong>myobject.vue</strong></p>

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

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

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