Listen to a Vue event from Vanilla JavaScript

Question

I have a Vue component which emits the change event.

  methods: {
    onSelect(value) {
      this.open = false
      if (value === this.value) return
      this.$emit('change', value)
    },
  }

I am importing this component into an .astro component. (basically Vanilla JS/HTML)

  <VisSelect client:load brand={brand} name={selectId} placeholder={placeholder} label={label} required={required} options={options} />

I am adding an event listener to my document (tried different selectors, including the selector under which the component is mounted) listening to change but it's not fired.

document.addEventListener('change', (e) => console.log(e))

Answer 1

You can try like with the web-components, create ref to the top div (for example selected) and dispatch CustomEvent:

onSelect(value) {
  this.open = false
  if (value === this.value) return
  this.$refs.selected.dispatchEvent(
    new CustomEvent('change', {
      detail: { value },
      bubbles: true,
      composed: true,
    })
  );
}

and then get the datail You provided in the event:

document.addEventListener('change', (e) => console.log(e.detail))