Nuxt 3

[emeelis]

I'm experiencing significant performance degradation when implementing Vue-ganttastic in my Nuxt 3 project environment. The component exhibits severely reduced responsiveness, particularly during bar drag operations. This issue becomes especially pronounced when manipulating bundled bars, resulting in extreme application latency.
I have already isolated the component to client-side rendering to eliminate potential Server-Side Rendering conflicts, yet the performance issues persist. Notably, I'm using this component with a very similar setup in one of my pure Vue project, where everything functions optimally without performance concerns.
Any recommendations for optimizing the integration of Vue-ganttastic within our Nuxt 3 architecture would be greatly appreciated.

[emeelis]

If I monitor mutations like so:

`
const mutations = ref([]);
const isDragging = ref(false);
// Set up a mutation observer to track DOM changes
let observer = null;

// Track when drag starts
function onDragStart(e) {
  e;
  isDragging.value = true;
  console.log("Drag started - monitoring DOM changes");
  mutations.value = [];
}

// Track when drag ends
function onDragEnd(e) {
  e;
  isDragging.value = false;
  console.log("Drag ended - DOM changes detected:", mutations.value.length);

  // Log the mutations if you need details
  mutations.value.forEach((mutation, i) => {
    console.log(`Mutation ${i}:`, {
      type: mutation.type,
      target: mutation.target,
      addedNodes: mutation.addedNodes.length,
      removedNodes: mutation.removedNodes.length,
    });
  });
}

onMounted(() => {
  // Create a MutationObserver instance to watch for DOM changes
  observer = new MutationObserver((mutationsList) => {
    // Only track mutations during drag operations
    if (isDragging.value) {
      mutations.value.push(...mutationsList);
      console.log("DOM mutation detected during drag");
    }
  });

  // Start observing with configuration
  observer.observe(document.body, {
    childList: true, // Watch for changes to child elements
    attributes: true, // Watch for attribute changes
    characterData: true, // Watch for text content changes
    subtree: true, // Watch all descendants
  });
});

onBeforeUnmount(() => {
  // Clean up the observer when component is unmounted
  if (observer) {
    observer.disconnect();
  }
});

`

Then in vanilla Vue I get this message "DOM mutation detected during drag" only in the beginning of drag but in Nuxt it is constantly logged. As I understand Nuxt updates DOM differently than vanilla Vue. My question is how can I prevent that happening and make component behave in Nuxt the same way it does in vanilla Vue?