<p>In creating a new CMS element for use in Shopware's WYSIWYG editor, we have three components: one named <code>component</code> and another named <code> configComponent</code>, and another named <code>previewComponent</code>. </p> The <p><code>configComponent</code> is obviously used to select the configuration of the element, while the <code>component</code> component is used to update the view in the editor. For example, display the content selected in the configuration section. My problem is that it only updates the view in the editor after the user clicks the save button, which leads to a bad user experience - it should update in real time. </p> <p><strong>I think I need to somehow <code>$emit</code>an update event</strong> after selecting the entity id from <code>configComponent</code>, Then pass the ID of the selected entity to the <code>component</code> component. </p> <p>So, in twig of <code>component</code>, I have the following code: </p> <pre class="brush:js;toolbar:false;"> <config-component @entity-picked="entityPickedHandler" /> </pre> <p>From my understanding of the documentation, this should be called in <code>component</code> when the <code>entity-picked</code> event is emitted from <code>configComponent</code> "entityPickedHandler" method. </p> <p>For example, this is the event handler in <code>component</code>: </p> <pre class="brush:js;toolbar:false;">methods: { entityPickedHandler(data) { console.log('Trigger event:', data); } } </pre> <p>Then, emit the event from <code>configComponent</code>: </p> <pre class="brush:js;toolbar:false;">computed: { myEntity: { get() { return this.element.config.entity.value; }, set(value) { // this.$set(this.element.data, 'entityId', value); this.element.config.entity.value = value; console.log('Try to emit entity-picked event'); this.$emit('entity-picked', value); } } } </pre> <p>Obviously, this doesn't work because <code>console.log()</code> in the <code>entityPickedHandler</code> handler never outputs. However, the event should have been emitted. </p>

data() {
    return {
        entity: this.element.config.entity.value,
    };
},

watch: {
    entity(value) {
        this.$emit('entity-picked', value);
    },
},

methods: {
    entityChanged(value) {
        this.element.config.entity.value = value;
        this.entity = value;
    },
},

watch: {
    'element.data.entityId': {
        handler() {
            this.entityId = this.element.data.entityId;
        },
        deep: true,
    }
}

computed: {
    myentity: {
        get() {
            return this.element.config.myEntity.value;
        },

        set(value) {
            this.element.config.myentity.value = value;
            this.$set(this.element.data, 'entityId', value);
            this.$emit('element-update', this.element);
        }
    }
},

{% block sw_cms_element_team_box_config %}
    <sw-entity-single-select label="testing my entity" entity="myexample_entity" v-model="myentity" />
{% endblock %}