Block creation issue in grapesjs

this.empty().append(items);
view && view.render();
},
updated(property, value) {
if (property === 'components' && this.getAttributes().limit !== value.length) {
this.getTrait('limit').set('value', value.length);
}
}
}
});
},

},

initialize: function (editor, setup, media) {

editor.Components.addType('image', {
view: {
onActive(ev) {
ev && ev.stopPropagation();
const {model} = this;
editor.runCommand('core:open-assets', {
target: model,
types: ['image'],
onClick(asset) {
const srcset = asset.get('srcset');
srcset && model.addAttributes({srcset})
},
onSelect(asset) {
const srcset = asset.get('srcset');
srcset && model.addAttributes({srcset})
}
});
},
onError() {
const fallback = this.model.getSrcResult({fallback: 1});
if (fallback) this.el.src = fallback;
if (fallback) this.el.removeAttribute('srcset');
}
}
});

editor.Canvas.getFrames().forEach(frame => {
const body = frame.view.getBody();
body.setAttribute('dir', editor.getConfig('langDir'));
body.classList.add('aimeos', 'cms-page', 'gjs-dashed');
});
editor.I18n.setLocale(document.querySelector('.aimeos').attributes.lang.nodeValue);
editor.AssetManager.add(media);

for (const cmp in setup.components) {
console.log(cmp);
setup.components[cmp](editor);
}

// only add own panels
editor.Panels.getPanels().reset(setup.panels);

// add custom blocks
for (const block in setup.blocks) {
editor.BlockManager.add(block, setup.blocks[block]);
}

// load plugins after blocks to enforce order
const opts = setup.config.pluginsOpts;
grapesjs.plugins.add('grapesjs-table', window['grapesjs-table'].default(editor, opts['grapesjs-table']));

// add custom styles
editor.DomComponents.getWrapper().set('attributes', {'class': 'container-fluid'});

// Show Blocks Manager by default
const blocks = editor.Panels.getButton('views', 'open-blocks');
editor.on('load', () => blocks && blocks.set('active', 1));

// On component delete show the Blocks Manager
editor.on('component:deselected', () => {
const btn = editor.Panels.getButton('views', 'open-blocks');
btn && btn.set('active', 1);
});

// On component change show the Traits Manager
editor.on('component:selected', () => {
if (editor.getSelected()) {
const btn = editor.Panels.getButton('views', 'open-tm');
btn && btn.set('active', 1);
}
});
}
},

init: function () {
Aimeos.components['cms-content'] = new Vue({
el: document.querySelector('#item-content-group'),
data: {
items: [],
media: [],
siteid: null,
domain: null,
version: 0
},
beforeMount() {
this.Aimeos = Aimeos;
},
mounted: function () {
this.items = JSON.parse(this.$el.dataset.items || '{}');
this.media = JSON.parse(this.$el.dataset.media || '{}');
this.siteid = this.$el.dataset.siteid;
this.domain = this.$el.dataset.domain;

if (this.items[0]) {
this.$set(this.items[0], '_show', true);
}
},
mixins: [this.mixins]
});

document.querySelectorAll('.btn').forEach(function (el) {
el.addEventListener('mousedown', function () {
Aimeos.components['cms-content'].change();
})
});
},

mixins: {
methods: {
active: function (idx) {
return this.items[idx] && this.items[idx]['text.status'] > 0;
},

add: function (data) {
let entry = {};

entry[this.domain + '.lists.id'] = null;
entry[this.domain + '.lists.type'] = 'default';
entry[this.domain + '.lists.siteid'] = this.siteid;
entry[this.domain + '.lists.datestart'] = null;
entry[this.domain + '.lists.dateend'] = null;

entry['text.id'] = null;
entry['text.type'] = 'content';
entry['text.languageid'] = '';
entry['text.siteid'] = this.siteid;
entry['text.content'] = '';
entry['text.label'] = '';
entry['text.status'] = 1;

entry['property'] = [];
entry['config'] = [];
entry['_show'] = true;
entry['_nosort'] = true;

this.items.push(Object.assign(entry, data));
},

change: function () {
this.version++;
},

duplicate: function (idx) {
if (idx < this.items.length) {
let entry = JSON.parse(JSON.stringify(this.items[idx]));
entry['text.id'] = null;
this.$set(this.items, this.items.length, entry);
}
},

label: function (idx) {
return (this.items[idx]['text.languageid'] ? this.items[idx]['text.languageid'].toUpperCase() : '***');
},

remove: function (idx) {
this.items.splice(idx, 1);
},

toggle: function (what, idx) {
this.$set(this.items[idx], what, (!this.items[idx][what] ? true : false));
},
}
}
};