Build a reusable Vue component based on an object

Question

I'm trying to build a reusable component of Vue based of a DHTMLX Grid, the component is inicialized from an object but the problem Is that I'm trying to build a generic component with the intention of using it multiple times in a single page and inside of that component I have an object declaration named grid which Is the object that I use for creating the grid.

The declaration looks like that:

this.grid = new GridDHX(idGrid, {
        columns: X,
        height: X,
        selection: "simple",
        data: X,
      });

But when I inicialize the component multiple times because the object name Is the same In every inicialitzation I encounter these errors:

Method "grid" has type "object" in the component definition. Did you reference the function correctly?

Method "grid" has already been defined as a data property.

Basically the problem Is that the name of the object inside the component Is reused multiple times so It's like It can't detect which component Is which.

How can I create a reusable Vue component without these problem?

Answer 1

each of your grid objects should have a unique name, otherwise you need to destroy a current grid object with the destructor() method https://docs.dhtmlx.com/suite/grid__api__grid_destructor_method.html before creating a new one with the same name