add GuideGettingStarted demos

demos/src/GuideGettingStarted/VModel/Vue/Editor.vue

@@ -0,0 +1,63 @@
+<template>
+  <editor-content :editor="editor" />
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  watch: {
+    modelValue(value) {
+      // HTML
+      const isSame = this.editor.getHTML() === value
+
+      // JSON
+      // const isSame = this.editor.getJSON().toString() === value.toString()
+
+      if (isSame) {
+        return
+      }
+
+      this.editor.commands.setContent(this.value, false)
+    },
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        StarterKit,
+      ],
+      content: this.modelValue,
+      onUpdate: () => {
+        // HTML
+        this.$emit('update:modelValue', this.editor.getHTML())
+
+        // JSON
+        // this.$emit('update:modelValue', this.editor.getJSON())
+      },
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>