<div id="app">
        <quill-editor  
        ref="quillEditor"
        class="editor"
        v-model="content"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @ready="onEditorReady($event)"
        />
    </div>
    <!-- Include the Quill library -->
    <script src="https://cdn.quilljs.com/1.3.4/quill.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- Quill JS Vue -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill-vuejs.js"></script>
    <!-- Include stylesheet -->
    <link href="https://cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet">
    <link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
    <link href="https://cdn.quilljs.com/1.3.4/quill.bubble.css" rel="stylesheet">
    <script type="text/javascript">
        Vue.use(window.VueQuillEditor);
        var app = new Vue({
            el: '#app',
            data: {
                content: '<h2>I\'m quill vuejs example</h2>',
                editorOption: {
                    theme: 'snow'
                }
            },
            methods: {
                onEditorBlur(quill) {
                    console.log('editor blur!', quill)
                },
                onEditorFocus(quill) {
                    console.log('editor focus!', quill)
                },
                onEditorReady(quill) {
                    console.log('editor ready!', quill)
                }
            },
            computed: {
                editor() {
                    return this.$refs.quillEditor.quill
                }
            },
            mounted() {
               console.log('this is quill instance object', this.editor)
            }
        });
    </script>