index.vue

<template>
  <div>
    <!-- use v-model control value -->
    <vue-simplemde v-model="content" ref="markdownEditor" />

    <!-- use event control value -->
    <vue-simplemde :value="content" @input="handleInput" />

    <!-- add config -->
    <vue-simplemde :configs="configs" />

    <!-- disable auto init -->
    <vue-simplemde :autoinit="false" />
  </div>
</template>

<script>
import VueSimplemde from 'vue-simplemde';

export default {
  components: {
    VueSimplemde,
  },
  data() {
    return {
      content: '',
      configs: {
        status: false, // disable the status bar at the bottom
        spellChecker: false, // disable spell check
      },
    };
  },
  computed: {
    simplemde() {
      return this.$refs.markdownEditor.simplemde;
    },
  },
  mounted() {
    console.log(this.simplemde);
    this.simplemde.togglePreview();

    // 'change' envent has bound, via @input attache an event listener
    // You can attache events in this [list](https://codemirror.net/doc/manual.html#events) yourself if necessary
    this.simplemde.codemirror.on('beforeChange', (instance, changeObj) => {
      // do some things
    });

    // remove SimpleMDE, when component destroy will invoke
    this.simplemde = null;

    // some useful methods
    this.$refs.markdownEditor.initialize(); // init
    this.simplemde.toTextArea();
    this.simplemde.isPreviewActive(); // returns boolean
    this.simplemde.isSideBySideActive(); // returns boolean
    this.simplemde.isFullscreenActive(); // returns boolean
    this.simplemde.clearAutosavedValue(); // no returned value
    this.simplemde.markdown(this.content); // returns parsed html
    this.simplemde.codemirror.refresh(); // refresh codemirror
  },
  methods: {
    handleInput() {
      // do some things
    },
  },
};
</script>

<style>
  @import '~simplemde/dist/simplemde.min.css';
</style>