How to use the vue-grid-layout.GridItem function in vue-grid-layout

return qs.stringify(params)
}

// EXPL: Register global components and plugins
Vue.component('box', Box)
Vue.component('vue-form-input', VueFormInput)
Vue.component('chat-box', ChatBox)
Vue.component('new-group-chat', NewGroupChat)
Vue.component('vue-editor', VueEditor)
Vue.component('visitor-map', VistorMap)
Vue.component('pulse-loader', PulseLoader)
Vue.component('vue-select', VueSelect)
Vue.component('vue-password', VuePassword)
Vue.component('vue-masked-input', VueMaskedInput)
Vue.component('grid-layout', VueGridLayout.GridLayout)
Vue.component('grid-item', VueGridLayout.GridItem)
Vue.use(VueRouter)
Vue.use(RestHapiRepository, { httpClient, resources, log: true })
Vue.use(ServerTable, {}, false)
Vue.use(VueForm, {
  inputClasses: {
    valid: 'form-control-success',
    invalid: 'form-control-danger'
  }
})
Vue.use(Snotify, {
  toast: {
    position: SnotifyPosition.rightTop
  }
})
Vue.use(ToggleButton)
Vue.use(VueMoment)

Vue.use(VueMaterial)

// register
Vue.component('navbar', Navbar)
Vue.component('imjoy', Imjoy)
Vue.component('main-footer', Footer)
Vue.component('about', About)
Vue.component('whiteboard', Whiteboard)
Vue.component('joy', Joy)
Vue.component('plugin-list', PluginList)
Vue.component('plugin-editor', PluginEditor)
Vue.component('file-item', FileItem)
Vue.component('file-dialog', FileDialog)
Vue.component('window', Window)
Vue.component('grid-layout', VueGridLayout.GridLayout)
Vue.component('grid-item', VueGridLayout.GridItem)
Vue.component('engine-control-panel', EngineControlPanel)

const truncate = function(text, length, clamp) {
  clamp = clamp || '...';
  const node = document.createElement('div');
  node.innerHTML = text;
  const content = node.textContent;
  return content.length > length ? content.slice(0, length) + clamp : content;
};

Vue.filter('truncate', truncate);

/* eslint-disable no-new */
new Vue({
  el: '#imjoy-app',
  router,

},
    savePanalEdit () {
      if (!this.panalName) {
        this.$Message.warning(this.$t('tips.required'))
        return
      }
      this.saveEdit()
    },
    canclePanalEdit () {
      this.isEditPanal = false
      this.panalName = this.$route.params.name
    }
  },
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    CustomChart,
    CustomPieChart,
    ViewConfigAlarm
  },
}

commercial: () => import('src/panel/widgets/components/commercial.vue'),
    customvariables: () => import('src/panel/widgets/components/customvariables.vue'),
    eventlist: () => import('src/panel/widgets/components/eventlist.vue'),
    join: () => import('src/panel/widgets/components/join.vue'),
    part: () => import('src/panel/widgets/components/part.vue'),
    queue: () => import('src/panel/widgets/components/queue.vue'),
    raffles: () => import('src/panel/widgets/components/raffles.vue'),
    soundboard: () => import('src/panel/widgets/components/soundboard.vue'),
    spotify: () => import('src/panel/widgets/components/spotify.vue'),
    twitch: () => import('src/panel/widgets/components/twitch.vue'),
    widgetCreate: () => import('src/panel/widgets/components/widget_create.vue'),
    dashboardRemove: () => import('src/panel/widgets/components/dashboard_remove.vue'),
    ytplayer: () => import('src/panel/widgets/components/ytplayer.vue'),
    social: () => import('src/panel/widgets/components/social.vue'),
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
  },
  data: function () {
    return {
      sortBy,
      items: [],
      dashboards: [],

      dashboardName: '',
      addDashboard: false,
      currentDashboard: 'c287b750-b620-4017-8b3e-e48757ddaa83',
      show: true,
      isLoaded: false,
      layout: {'null': []},
      socket: getSocket('/')
    }
  },

})
    },
    resizeEvent: function(i, newH, newW, newHPx, newWPx){
      resizeEvent(this, i, newH, newW, newHPx, newWPx)
    },
    gridPlus(item) {
      this.viewData.forEach((vd) => {
        if (item.id === vd.viewConfig.id) {
          this.$router.push({name: 'sysViewChart', params:{templateData: vd, parentData: this.sysConfig}}) 
        }
      })
    },
  },
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
  },
}

layout.push(layout_config[widget]);

  widget_namelist.push(widget);
}

export default {
  name: 'Home',
  data: function() {
    return {
      layout: layout,
      widgets: widget_namelist
    };
  },
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem
  }
};

elId: item.viewConfig.id,
          chartParams: params,
          chartType: item.chartType                                                     
        })
        item.viewConfig._activeCharts = _activeCharts
        tmp.push(item.viewConfig)
      })
      this.layoutData = tmp
    },
    resizeEvent: function(i, newH, newW, newHPx, newWPx){
      resizeEvent(this, i, newH, newW, newHPx, newWPx)
    }
  },
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    CustomChart,
    CustomPieChart,
    ViewConfigAlarm
  },
}