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>