how can i add a new grid-layout to grid-item

[wssnail]

<grid-layout>
    <grid-item>
        <div id='grid1'>

        </div>
    </grid-item>
</grid-layout>

i want add new grid-layout to the div, but not work

let periodDiv = new Vue({
          render: (h) => {
            return h('grid-layout', {
              render: (h1) => {
                return h1('grid-item', {
                  props: {
                    x: 1,
                    y: 1,
                    w: 1,
                    h: 1,
                    i: '111'
                  }
                }, '')
              },
              props: {
                'layout': [
                  {"x":2,"y":0,"w":2,"h":4,"i":"1"},
                  {"x":4,"y":0,"w":2,"h":2,"i":"2"},
                ],
                'col-num': 12,
                'row-height': 30,
                'is-draggable': true,
                'is-resizable': true,
                'vertical-compact': true,
                'use-css-transforms': true
              }
            })
          }
        }).$mount()
document.getElementById('grid1').appendChild(periodDiv.$el)