Laravelで使っているtoust ui editerにプラグインを追加する方法

前提・実現したいこと

発生している問題・エラーメッセージ

https://www.npmjs.com/package/@toast-ui/vue-editor
こちらのサイトを参考にtoust ui editer を使用できるようにしたのですがチャートなどのプラグインを追加がうまくいっていないです

該当のソースコード

vue
1<template>
2    <div class="container-fluid">
3        <div class="row">
4            <div class="col">
5                <form v-on:submit.prevent="getHtml">
6                    <div class="form-group row m-0">
7                        <div class="col">
8                            <div>
9                                <input
10                                    placeholder="Title"
11                                    type="text"
12                                    class="form-control"
13                                    id="title"
14                                    v-model="title"
15                                />
16                            </div>
17                        </div>
18                    </div>
19
20                    <div class="form-group row m-0">
21                        <div class="col">
22                            <div>
23                                <vue-tags-input
24                                    v-model="tag"
25                                    :tags="tags"
26                                    @tags-changed="newTags => (tags = newTags)"
27                                />
28                            </div>
29                        </div>
30                    </div>
31
32                    <div class="form-group row m-0">
33                        <div class="col" v-if="show">
34                            <editor
35                                class="editor"
36                                :options="editorOptions"
37                                :initialValue="text"
38                                height="100vh"
39                                ref="toastuiEditor"
40                                :plugin="plugins"
41                            />
42                        </div>
43                    </div>
44
45                    <div class="form-group row m-0">
46                        <div class="col">
47                            <button type="submit" class="btn btn-success w-100">
48                                投稿する
49                            </button>
50                        </div>
51                    </div>
52                </form>
53            </div>
54        </div>
55    </div>
56</template>
57
58<script>
59import { Editor } from "@toast-ui/vue-editor";
60import VueTagsInput from "@johmun/vue-tags-input";
61import Chart from "@toast-ui/editor-plugin-chart";
62
63export default {
64    name: "chat-component",
65    data: function() {
66        return {
67            editorText: this.text,
68            editorOptions: {
69                hideModeSwitch: true
70            },
71            plugins: {
72                chart: Chart
73            },
74            title: "",
75            tag: "",
76            tags: [],
77            text: "",
78            input: "",
79            show: true
80        };
81    },
82    components: {
83        editor: Editor
84    },
85    methods: {
86        scroll() {
87            this.$refs.toastuiEditor.invoke("scrollTop", 10);
88        },
89        moveTop() {
90            this.$refs.toastuiEditor.invoke("moveCursorToStart");
91        },
92        async getHtml() {
93            let html = this.$refs.toastuiEditor.invoke("getHtml");
94            const url = "/ajax/post";
95            const params = {
96                title: this.title,
97                tags: this.tags,
98                text: html
99            };
100            await axios.post(url, params).then(response => {
101                // 成功したらメッセージをクリア
102                this.title = "";
103                this.tags = [];
104                this.show = false;
105            });
106
107            this.show = true;
108            //console.log(html);
109        },
110    },
111    mounted() {}
112};
113</script>
114

試したこと

https://nhn.github.io/tui.editor/latest/tutorial-example15-editor-with-all-plugins

app.jsに上記のサイトのように記述してやろうとしたのですが

const editor = new Editor({
    el: '#editor',
    height: '500px',
    initialEditType: 'markdown',
    previewStyle: 'vertical'
  });

Uncaught TypeError: Cannot create property 'innerHTML' on string

const editor = new Editor({
    el: document.querySelector('#editor'),
    height: '500px',
    initialEditType: 'markdown',
    previewStyle: 'vertical'
  });

Uncaught TypeError: Cannot set property 'innerHTML' of undefined

このようにエラーが出ているのでコンポーネント内の要素に対してはこのようにできないと思い、該当ソースコードのようなやり方にしました。

もちろん

<div id="editor"></div>

は追加しましたが結果は変わらずでした。

補足情報（FW/ツールのバージョンなど）

Laravel 7.0.0

行動規範の内容に同意します

回答1件

自己解決

Vue
1<template>
2    <div class="container-fluid post_form">
3        <div class="row h-100">
4            <div class="col">
5                <form v-on:submit.prevent="getHtml" style="height:100%;">
6                    <div class="title_form row m-0">
7                        <div class="col">
8                            <div>
9                                <input
10                                    placeholder="Title"
11                                    type="text"
12                                    class="form-control"
13                                    id="title"
14                                    v-model="title"
15                                />
16                            </div>
17                        </div>
18                    </div>
19
20                    <div class="tag_form row m-0">
21                        <div class="col">
22                            <div>
23                                <vue-tags-input
24                                    v-model="tag"
25                                    :tags="tags"
26                                    @tags-changed="newTags => (tags = newTags)"
27                                />
28                            </div>
29                        </div>
30                    </div>
31
32                    <div class="row m-0" style="height: calc(100% - 120px);">
33                        <div class="col" v-if="show">
34                            <div class="editor" id="editor"></div>
35                        </div>
36                    </div>
37
38                    <div class="form_btn row m-0">
39                        <div class="col">
40                            <button type="submit" class="btn btn-success w-100">
41                                投稿する
42                            </button>
43                        </div>
44                    </div>
45                </form>
46            </div>
47        </div>
48    </div>
49</template>
50
51<script>
52import Editor from "@toast-ui/editor";
53import VueTagsInput from "@johmun/vue-tags-input";
54import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';
55import hljs from 'highlight.js';
56import tableMergedCell from '@toast-ui/editor-plugin-table-merged-cell';
57import "codemirror/lib/codemirror.css";
58import "@toast-ui/editor/dist/toastui-editor.css";
59import 'highlight.js/styles/github.css';
60
61export default {
62    name: "form-component",
63    data: function() {
64        return {
65            title: "",
66            tag: "",
67            tags: [],
68            text: "テキスト",
69            input: "",
70            show: true,
71            errors: [],
72            editor: "",
73        };
74    },
75    methods: {
76        scroll() {
77            this.$refs.toastuiEditor.invoke("scrollTop", 10);
78        },
79        moveTop() {
80            this.$refs.toastuiEditor.invoke("moveCursorToStart");
81        },
82        async getHtml() {
83            let html = this.editor.getHtml();
84            const url = "/ajax/post";
85            const params = {
86                title: this.title,
87                tags: this.tags,
88                text: html
89            };
90            await axios
91                .post(url, params)
92                .then(response => {
93                    this.title = "";
94                    this.tags = [];
95                    this.show = false;
96                    this.show = true;
97                    this.createEditor();
98                })
99                .catch(e => {
100                    console.log(e.response.data.errors);
101                    this.errors = e.response.data.errors;
102                });
103                
104        },
105        createEditor() {
106            this.editor = new Editor({
107                el: document.querySelector("#editor"),
108                previewStyle: "vertical",
109                height: "100%",
110                initialValue: this.text,
111                plugins: [
112                    [codeSyntaxHighlight, { hljs }],
113                    tableMergedCell,
114                ]
115            });
116        },
117    },
118    mounted() {
119        this.createEditor();
120    }
121};
122</script>
123