set alpine data out side of the component

https://tonylea.com/setting-alpine-data-outside-of-the-component

<div x-data="{good_id: '', good_name: ''}" id="good_info" class="w-full" @set_good_data="
    good_id = $event.detail.good_id;
    good_name = $event.detail.good_name;
">
    <div x-text="good_id"></div>
    <div x-text="good_name"></div>
</div>

<script>
    document.getElementById('good_info').dispatchEvent(new CustomEvent('set_good_data', { 
	    detail: { 
		    good_id: 1234,
		    good_name: 'Apple',
		} 
    }));
</script>