CrudField Javascript Library stops working properly when VueJs is mounted

The issue you're experiencing is likely due to Vue.js taking over the DOM elements that the CrudField JavaScript library is trying to interact with. When Vue.js mounts, it may re-render the DOM, which can disrupt any existing event listeners or DOM manipulations that were set up outside of Vue's control.

Here are a few strategies you can try to resolve this issue:

1. Use Vue.js for DOM Manipulation: If possible, integrate the functionality of the CrudField library within your Vue.js application. This way, Vue.js will manage the DOM elements, and you can use Vue's reactivity system to handle changes.

2. Re-attach Event Listeners: After Vue.js has mounted, you can re-attach the event listeners for the CrudField library. You can do this in the mounted lifecycle hook of your Vue component.

   new Vue({
     el: '#app',
     mounted() {
       // Re-attach the CrudField event listener after Vue has mounted
       crud.field('currency').onChange(function (field) {
         console.log(field.value);
         crud.field('exchange_rate').show(field.value != "MXN");
       }).change();
     }
   });
   

3. Use Vue's nextTick: If the issue is related to the timing of when the DOM is updated, you can use Vue's nextTick to ensure that the DOM is fully updated before attaching the event listeners.

   new Vue({
     el: '#app',
     mounted() {
       this.$nextTick(() => {
         // Attach the CrudField event listener after the DOM is updated
         crud.field('currency').onChange(function (field) {
           console.log(field.value);
           crud.field('exchange_rate').show(field.value != "MXN");
         }).change();
       });
     }
   });
   

4. Isolate Vue.js and CrudField: If possible, try to isolate the parts of the DOM that Vue.js manages from those that the CrudField library manages. This can be done by ensuring that Vue.js only mounts to a specific part of the DOM that does not interfere with the elements used by the CrudField library.

5. Check for Conflicts: Ensure there are no conflicts between Vue.js and the CrudField library, such as both trying to manage the same elements or attributes.

By following these strategies, you should be able to resolve the conflict between Vue.js and the CrudField JavaScript library.