gantt.clearAll() Problem

I’m using dhtmlx gantt on vue.js.
When I move the screen and access the screen with gantt again, gantt_overlay_area, gantt_marker_area remains undeleted. called gantt.clearAll() from destroyed, but there is no change.
Of course, I called gantt.clearAll() from the destroyed life cycle, but there was no change.

Hello Sam Shin,
we sent the answer to your email, please, check it. I would suggest continuing the discussion there. Thank you for understanding.

I duplicate the solution from our correspondence here so that everybody could see it.
The simplest solution would be to completely destroy the Gantt instance when you hide it and create a clean instance when you show the Gantt again.
We don’t have a ready example in vue.js, but you can check this article for the reference:

Multiple Charts on a Page Gantt Docs - please check the ‘Angular’ example, it will be very similar to what you need.

You create a new Gantt instance using Gantt.getGanttInstance in mounted hook, and destroy it using gantt.destructor

mounted: function () {
  gantt = Gantt.getGanttInstance();


destroyed() {
  gantt = null;

That way all elements and event handlers of Gantt will be cleared when the component is removed, and you’ll create a new Gantt object when needed.
Please, note that destructors are available only for enterprise / ultimate versions.