How do you output the HTML from GrapesJs in a VueJS application? - vue.js

Question

I have set up a VueJS application including GrapesJS using grapesjs & grapesjs-preset-webpage. The editor works perfectly, but I cannot see in the documentation how to render just the HTML created by the editor without the editor controls being present.
The editor displays this, which is perfect for a CMS when in editor mode :
However, I wish to be able to display the result of the editor design as a finished webpage like this:
It is not clear to me from the GrapesJS documentation how this would be achieved in a VueJS application??
My code is:
<template>
<div>
<div id="gjs"></div>
</div>
</template>
<script>
import grapesjs from 'grapesjs'
import 'grapesjs/dist/css/grapes.min.css'
import 'grapesjs/dist/grapes.min.js'
import 'grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.css'
import 'grapesjs-preset-webpage/dist/grapesjs-preset-webpage.min.js'
export default {
name: 'WebBuilder',
mounted(){
grapesjs.init({
container: '#gjs',
height: '100vh',
width: '100%',
plugins: ['gjs-preset-webpage'],
storageManager: {
id: 'gjs-',
type: 'local',
autosave: true,
storeComponents: true,
storeStyles: true,
storeHtml: true,
storeCss: true,
},
deviceManager: {
devices:
[
{
id: 'desktop',
name: 'Desktop',
width: '',
},
{
id: 'tablet',
name: 'Tablet',
width: '768px',
widthMedia: '992px',
},
{
id: 'mobilePortrait',
name: 'Mobile portrait',
width: '320px',
widthMedia: '575px',
},
]
},
pluginsOpts: {
'grapesjs-preset-webpage': {
blocksBasicOpts: {
blocks: ['column1', 'column2', 'column3', 'column3-7', 'text', 'link', 'image', 'video'],
flexGrid: 1,
},
blocks: ['link-block', 'quote', 'text-basic'],
},
}
})
},
}
</script>