lea el siguiente código (incorrecto). ¿Cómo puedo arreglarlo?

Mi problema es que estoy tratando de compartir varias variables, que deberían ser reactivas, entre diferentes componibles y la aplicación principal.

Todas esas variables necesitan que se les asigne DOM, por lo tanto, necesitan un gancho montado. Por lo tanto, useDropzones y usePanels asignan variables tanto en la aplicación principal como en la montada. Y todas esas variables son de uso cruzado entre las entidades citadas. Pero, de hecho, estarán todos indefinidos, obviamente. ¿Como arreglar?

 const vueapp = Vue.createApp({ setup(props, {attrs, slots, emit}){ let validators = reactive([]); let panels = reactive([]); let code = null; useDropzones(code); // assigned by main app's onMounted usePanels(panels, validators); // it will populate panels, onmounted, used by main app below, onmounted onMounted(() => { nextTick(() => { code = form_elem.find('input[name="form-code"]').val(); // here I'm setting code variable, used by useDropzones() _.each(panels, function(panel, index){ // TODO: native? // execute code that populates validators, used by usePanels() }.bind(this)); }); // nexttick }); // onmounted return {} }, });