Problem with 2 or more grids in Vue.js

[shhong94]

Summary

• With 2 or more grids in a page, the problem occurs. The problem is as follows.
• When repeating enter other page / return original page(there are several grids), the columns and the data of grids is mixed.

Screenshots This is original page with 2 grids.

After repeating enter other page / return original page, positioning, data, columns of grids turn into chaotic. Besides, several features of grid (drag, checkbox... etc) are not working.

I think because my project is running as Single Page Application with Vue router, so the data of grids are mixing in background.

I cannot find any references associated with this problem. What should i do?

Source Code

<template>
    <grid :data="gridProps.data" :columns="gridProps.columns" />
    <grid :data="gridProps2.data" :columns="gridProps2.columns" />
</template>

<script>
import 'tui-grid/dist/tui-grid.css';
import { Grid } from '@toast-ui/vue-grid';
...
components: {
    grid: Grid,
  },
data() {
      gridProps: {
        data: [ // for rowData prop
          {
            11111: '11111',
            22222: '22222',
            33333: '33333',
          },
          {
            11111: '11111',
            22222: '22222',
            33333: '33333',
          },
          {
            11111: '11111',
            22222: '22222',
            33333: '33333',
          },
        ],
        columns: [ // for columnData prop
          {
            header: '11111',
            name: '11111',
          },
          {
            header: '22222',
            name: '22222',
          },
          {
            header: '33333',
            name: '33333',
          },
        ],
      },
      gridProps2: {
        data: [ // for rowData prop
          {
            A: 'A',
            B: 'B',
          },
          {
            A: 'A',
            B: 'B',
          },
        ],
        columns: [ // for columnData prop
          {
            header: 'A',
            name: 'A',
          },
          {
            header: 'B',
            name: 'B',
          },
        ],
      },
}
...
</script>

Version vue: 2.5.2 vue-router: 3.0.1 @toast-ui/vue-grid: 4.21.9