diff --git a/babel.config.js b/babel.config.js
index ba17966..e955840 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    '@vue/cli-plugin-babel/preset'
   ]
 }
diff --git a/example/App.vue b/example/App.vue
index 11e086b..4bd5b34 100644
--- a/example/App.vue
+++ b/example/App.vue
@@ -4,15 +4,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import Example from './components/example.vue'
-
-export default {
-  name: 'app',
-  components: {
-    Example
-  }
-}
 </script>
 
 <style>
diff --git a/example/components/example.vue b/example/components/example.vue
index ba81d5a..38954ea 100644
--- a/example/components/example.vue
+++ b/example/components/example.vue
@@ -5,23 +5,26 @@
       class="md-body" 
       :content="content" 
       :options="options" 
-      @render-complete=hdlCmplete 
+      @render-complete="hdlCmplete" 
     />
   </div>
 </template>
 
 <script>
+import {defineComponent, ref} from 'vue'
 import MarkdownText from './example'
 import MarkdownItVue from '../../src'
-export default {
+
+export default defineComponent({
   components: {
     MarkdownItVue
   },
-  data () {
-    return {
-      content: MarkdownText,
-      options: {
-        markdownIt: {
+  setup() {
+
+    const options = ref(
+      {
+        markdownIt: 
+        {
           linkify: true
         },
         linkAttributes: {
@@ -31,14 +34,21 @@ export default {
           }
         }
       }
-    }
-  },
-  methods: {
-    hdlCmplete() {
+    )
+
+    const content = ref(MarkdownText)
+
+    const hdlCmplete = () => {
       console.log('reder complete')
     }
+
+    return {
+      content,
+      options,
+      hdlCmplete,
+    }
   }
-}
+})
 </script>
 
 <style scoped>
diff --git a/example/main.js b/example/main.js
index 63eb05f..01433bc 100644
--- a/example/main.js
+++ b/example/main.js
@@ -1,8 +1,4 @@
-import Vue from 'vue'
+import { createApp } from 'vue'
 import App from './App.vue'
 
-Vue.config.productionTip = false
-
-new Vue({
-  render: h => h(App),
-}).$mount('#app')
+createApp(App).mount('#app')
diff --git a/package.json b/package.json
index a445c01..2487f4e 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,10 @@
 {
   "name": "markdown-it-vue",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "private": false,
-  "description": "The vue lib for markdown-it",
+  "description": "The vue3.0 lib for markdown-it",
   "author": {
-    "name": "ravenq",
+    "name": "yauzn",
     "e-mail": "flw_dream@126.com"
   },
   "keywords": [
@@ -12,7 +12,8 @@
     "markdown-it",
     "markdown-it-plugin",
     "vue",
-    "markdown-it-vue"
+    "markdown-it-vue",
+    "vue3.0"
   ],
   "files": [
     "dist",
@@ -31,6 +32,8 @@
   },
   "main": "dist/markdown-it-vue.umd.min.js",
   "dependencies": {
+    "@iktakahiro/markdown-it-katex": "^4.0.1",
+    "core-js": "^3.6.5",
     "echarts": "^5.1.0",
     "flowchart.js": "^1.15.0",
     "font-awesome-icon-chars": "^2.6.0",
@@ -44,7 +47,7 @@
     "markdown-it-footnote": "^3.0.2",
     "markdown-it-github-toc": "^3.2.4",
     "markdown-it-ins": "^3.0.1",
-    "@iktakahiro/markdown-it-katex": "^4.0.1",
+    "markdown-it-katex": "^2.0.3",
     "markdown-it-latex": "^0.2.0",
     "markdown-it-mark": "^3.0.1",
     "markdown-it-regex": "^0.2.0",
@@ -54,18 +57,16 @@
     "markdown-it-task-lists": "^2.1.1",
     "markdown-it-toc-and-anchor": "^4.2.0",
     "mermaid": "^8.9.2",
-    "vue": "^2.6.12"
+    "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.12",
-    "@vue/cli-plugin-eslint": "^4.5.12",
-    "@vue/cli-service": "^4.5.12",
+    "@vue/cli-plugin-babel": "~4.5.9",
+    "@vue/cli-plugin-eslint": "~4.5.9",
+    "@vue/cli-service": "~4.5.9",
+    "@vue/compiler-sfc": "^3.0.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.24.0",
-    "eslint-plugin-vue": "^7.9.0",
-    "vue-cli-plugin-component-lib": "^0.1.6",
-    "vue-cli-plugin-webpack-bundle-analyzer": "^4.0.0",
-    "vue-template-compiler": "^2.6.12"
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^7.0.0"
   },
   "eslintConfig": {
     "root": true,
@@ -73,23 +74,18 @@
       "node": true
     },
     "extends": [
-      "plugin:vue/essential",
+      "plugin:vue/vue3-essential",
       "eslint:recommended"
     ],
-    "rules": {},
     "parserOptions": {
       "parser": "babel-eslint"
-    }
-  },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
+    },
+    "rules": {}
   },
   "browserslist": [
     "> 1%",
     "last 2 versions",
-    "not ie <= 8"
+    "not dead"
   ],
   "bugs": {
     "url": "https://github.com/ravenq/markdown-it-vueissues"
diff --git a/public/favicon.ico b/public/favicon.ico
index c7b9a43..df36fcf 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/src/markdown-it-image/image-viewer.vue b/src/markdown-it-image/image-viewer.vue
index 31b85c2..e4a1cd7 100644
--- a/src/markdown-it-image/image-viewer.vue
+++ b/src/markdown-it-image/image-viewer.vue
@@ -46,7 +46,7 @@
         <div v-for="(url, i) in urlList" :key="url" class="image-container">
           <img
             v-if="i === index"
-            ref="img"
+            ref="imgRef"
             class="el-image-viewer__img"
             :src="currentImg"
             :style="imgStyle"
@@ -62,6 +62,7 @@
 
 <script>
 import { on, off, rafThrottle, isFirefox } from '../utils'
+import {defineComponent, ref, watch, toRef, toRefs, nextTick, computed, reactive} from 'vue'
 
 const Mode = {
   CONTAIN: {
@@ -76,9 +77,8 @@ const Mode = {
 
 const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'
 
-export default {
+export default defineComponent({
   name: 'elImageViewer',
-
   props: {
     urlList: {
       type: Array,
@@ -97,38 +97,36 @@ export default {
       default: 0,
     },
   },
+  emits: ['update:index'],
+  setup(props, { emit }){
 
-  data() {
-    return {
-      isShow: false,
-      infinite: true,
-      loading: false,
-      mode: Mode.CONTAIN,
+    const { urlList, index, onClose, onSwitch } = toRefs(props)
+
+    const imgRef = ref(null)
+    const infinite = ref(false)
+    const loading = ref(false)
+    const mode = ref(Mode.CONTAIN)
+    const zIndex = ref(2000)
+    const data = reactive({
       transform: {
         scale: 1,
         deg: 0,
         offsetX: 0,
         offsetY: 0,
         enableTransition: false,
-      },
-      zIndex: 2000,
-    }
-  },
-  computed: {
-    isSingle() {
-      return this.urlList.length <= 1
-    },
-    isFirst() {
-      return this.index === 0
-    },
-    isLast() {
-      return this.index === this.urlList.length - 1
-    },
-    currentImg() {
-      return this.urlList[this.index]
-    },
-    imgStyle() {
-      const { scale, deg, offsetX, offsetY, enableTransition } = this.transform
+      }
+    })
+    let _keyDownHandler = null
+    let _mouseWheelHandler = null
+    let _dragHandler = null
+
+    // computed
+    const isSingle = computed(()=> urlList.length <= 1);
+    const isFirst = computed(()=> index === 0);
+    const isLast = computed(()=> index === urlList.length - 1);
+    const currentImg = computed(()=> urlList[index]);
+    const imgStyle = computed(()=> {
+      const { scale, deg, offsetX, offsetY, enableTransition } = toRef(data,'transform')
       const style = {
         transform: `scale(${scale}) rotate(${deg}deg)`,
         transition: enableTransition ? 'transform .3s' : '',
@@ -139,60 +137,46 @@ export default {
         style.maxWidth = style.maxHeight = '100%'
       }
       return style
-    },
-  },
-  watch: {
-    index: {
-      handler: function (val) {
-        this.reset()
-        this.onSwitch(val)
-      },
-    },
-    currentImg() {
-      this.$nextTick(() => {
-        const $img = this.$refs.img[0]
-        if (!$img.complete) {
-          this.loading = true
-        }
-      })
-    },
-  },
-  methods: {
-    hide() {
-      this.deviceSupportUninstall()
-      this.onClose()
-    },
-    deviceSupportInstall() {
-      this._keyDownHandler = rafThrottle((e) => {
+    })
+
+    // methods
+    const hide = () => {
+      deviceSupportUninstall()
+      onClose()
+    }
+
+    const deviceSupportInstall = () => {
+      _keyDownHandler = rafThrottle((e) => {
         const keyCode = e.keyCode
         switch (keyCode) {
           // ESC
           case 27:
-            this.hide()
+            hide()
             break
           // SPACE
           case 32:
-            this.toggleMode()
+            toggleMode()
             break
           // LEFT_ARROW
           case 37:
-            this.prev()
+            prev()
             break
           // UP_ARROW
           case 38:
-            this.handleActions('zoomIn')
+            handleActions('zoomIn')
             break
           // RIGHT_ARROW
           case 39:
-            this.next()
+            next()
             break
           // DOWN_ARROW
           case 40:
-            this.handleActions('zoomOut')
+            handleActions('zoomOut')
             break
         }
       })
-      this._mouseWheelHandler = rafThrottle((e) => {
+
+      _mouseWheelHandler = rafThrottle((e) => {
         const delta = e.wheelDelta ? e.wheelDelta : -e.detail
         if (delta > 0) {
           this.handleActions('zoomIn', {
@@ -207,103 +191,150 @@ export default {
         }
       })
       on(document, 'keydown', this._keyDownHandler)
-      on(document, mousewheelEventName, this._mouseWheelHandler)
-    },
-    deviceSupportUninstall() {
-      off(document, 'keydown', this._keyDownHandler)
-      off(document, mousewheelEventName, this._mouseWheelHandler)
-      this._keyDownHandler = null
-      this._mouseWheelHandler = null
-    },
-    handleImgLoad() {
-      this.loading = false
-    },
-    handleImgError(e) {
-      this.loading = false
+      on(document, mousewheelEventName, _mouseWheelHandler)
+    }
+
+    const deviceSupportUninstall = () => {
+      off(document, 'keydown', _keyDownHandler)
+      off(document, mousewheelEventName, _mouseWheelHandler)
+      _keyDownHandler = null
+      _mouseWheelHandler = null
+    }
+
+    const handleImgLoad = () => {
+      loading.value = false
+    }
+
+    const handleImgError = (e) => {
+      loading.value = false
       e.target.alt = '加载失败'
-    },
-    handleMouseDown(e) {
-      if (this.loading || e.button !== 0) return
+    }
+
+    const handleMouseDown = (e) => {
+      if (loading.value || e.button !== 0) return
 
-      const { offsetX, offsetY } = this.transform
+      const { offsetX, offsetY } = toRef(data, 'transform')
       const startX = e.pageX
       const startY = e.pageY
-      this._dragHandler = rafThrottle((ev) => {
-        this.transform.offsetX = offsetX + ev.pageX - startX
-        this.transform.offsetY = offsetY + ev.pageY - startY
+      _dragHandler = rafThrottle((ev) => {
+        data.transform.offsetX = offsetX + ev.pageX - startX
+        data.transform.offsetY = offsetY + ev.pageY - startY
       })
-      on(document, 'mousemove', this._dragHandler)
+      on(document, 'mousemove', _dragHandler)
       on(document, 'mouseup', () => {
-        off(document, 'mousemove', this._dragHandler)
+        off(document, 'mousemove', _dragHandler)
       })
 
       e.preventDefault()
-    },
-    reset() {
-      this.transform = {
+    }
+    
+    const reset = () => {
+      data.transform = {
         scale: 1,
         deg: 0,
         offsetX: 0,
         offsetY: 0,
         enableTransition: false,
       }
-    },
-    toggleMode() {
-      if (this.loading) return
+    }
+
+    const toggleMode = ()=> {
+      if (loading.value) return
 
       const modeNames = Object.keys(Mode)
       const modeValues = Object.values(Mode)
-      const index = modeValues.indexOf(this.mode)
-      const nextIndex = (index + 1) % modeNames.length
-      this.mode = Mode[modeNames[nextIndex]]
+      const handleIndex = modeValues.indexOf(mode.value)
+      const nextIndex = (handleIndex + 1) % modeNames.length
+      mode.value = Mode[modeNames[nextIndex]]
       this.reset()
-    },
-    prev() {
-      if (this.isFirst && !this.infinite) return
-      const len = this.urlList.length
-      const index = (this.index - 1 + len) % len
-      this.$emit('update:index', index)
-    },
-    next() {
-      if (this.isLast && !this.infinite) return
-      const len = this.urlList.length
-      const index = (this.index + 1) % len
-      this.$emit('update:index', index)
-    },
-    handleActions(action, options = {}) {
-      if (this.loading) return
+    }
+
+    const prev = () => {
+      if (isFirst.value && !infinite.value) return
+      const len = urlList.length
+      const handleIndex = (index - 1 + len) % len
+      emit('update:index', handleIndex)
+    }
+
+
+    const next = () => {
+      if (isLast.value && !infinite.value) return
+      const len = urlList.length
+      const handleIndex = (index + 1) % len
+      emit('update:index', handleIndex)
+    }
+
+    const handleActions = (action, options = {}) => {
+      if (loading.value) return
       const { zoomRate, rotateDeg, enableTransition } = {
         zoomRate: 0.2,
         rotateDeg: 90,
         enableTransition: true,
         ...options,
       }
-      const { transform } = this
+      const { scale } = toRef(data, 'transform')
       switch (action) {
         case 'zoomOut':
-          if (transform.scale > 0.2) {
-            transform.scale = parseFloat(
-              (transform.scale - zoomRate).toFixed(3)
+          if (scale > 0.2) {
+            data.transform.scale = parseFloat(
+              (scale - zoomRate).toFixed(3)
             )
           }
           break
         case 'zoomIn':
-          transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3))
+          data.transform.scale = parseFloat((scale + zoomRate).toFixed(3))
           break
         case 'clocelise':
-          transform.deg += rotateDeg
+           data.transform.deg += rotateDeg
           break
         case 'anticlocelise':
-          transform.deg -= rotateDeg
+          data.transform.deg -= rotateDeg
           break
       }
-      transform.enableTransition = enableTransition
-    },
-  },
-  mounted() {
-    this.deviceSupportInstall()
-  },
-}
+      data.transform.enableTransition = enableTransition
+    }
+
+
+    // watch
+    watch(()=>props.index,(val) => {
+      reset()
+      onSwitch(val)
+    })
+
+    watch(()=>props.currentImg,() => {
+      nextTick(() => {
+        const $img = imgRef.value.img[0]
+        if (!$img.complete) {
+          loading.value = true
+        }
+      })
+    })
+
+    return {
+      infinite,
+      mode,
+      loading,
+      imgRef,
+      ...toRefs(data),
+      zIndex,
+      isSingle,
+      isFirst,
+      isLast,
+      currentImg,
+      imgStyle,
+      toggleMode,
+      deviceSupportInstall,
+      deviceSupportUninstall,
+      handleImgLoad,
+      handleImgError,
+      handleMouseDown,
+      prev,
+      next,
+      handleActions,
+    }
+  }
+})
+
 </script>
 
 <style scoped>
diff --git a/src/markdown-it-vue-light.vue b/src/markdown-it-vue-light.vue
index 50db1e8..2292e79 100644
--- a/src/markdown-it-vue-light.vue
+++ b/src/markdown-it-vue-light.vue
@@ -1,8 +1,9 @@
 <template>
-  <div class="markdown-body" ref="markdown-it-vue-container"></div>
+  <div class="markdown-body" ref="markdownRef"></div>
 </template>
 
 <script>
+import {defineComponent, ref, watch, toRefs, nextTick} from 'vue'
 import MarkdownIt from 'markdown-it'
 import MarkdownItEmoji from 'markdown-it-emoji'
 import MarkdownItSubscript from 'markdown-it-sub'
@@ -26,7 +27,7 @@ import MarkdownItFontAwsome from './markdown-it-font-awsome'
 import 'github-markdown-css'
 import 'markdown-it-latex/dist/index.css'
 
-import echarts from 'echarts/dist/echarts.simple.min'
+import * as echarts from 'echarts/dist/echarts.simple.min'
 import flowchart from 'flowchart.js'
 
 const DEFAULT_OPTIONS_LINK_ATTRIBUTES = {
@@ -47,7 +48,8 @@ const DEFAULT_OPTIONS_GITHUBTOC = {
   anchorLinkSymbolClassName: 'octicon octicon-link'
 }
 
-export default {
+
+export default defineComponent({
   name: 'markdown-it-vue-light',
   props: {
     content: {
@@ -68,50 +70,19 @@ export default {
       }
     }
   },
-  watch: {
-    content: {
-      immediate: true,
-      handler(val) {
-        this.$nextTick(() => {
-          this.$refs['markdown-it-vue-container'].innerHTML = this.md.render(
-            val
-          )
-          // render echarts
-          document.querySelectorAll('.md-echarts').forEach(element => {
-            try {
-              let options = JSON.parse(element.textContent)
-              let chart = echarts.init(element)
-              chart.setOption(options)
-            } catch (e) {
-              element.outerHTML = `<pre>echarts complains: ${e}</pre>`
-            }
-          })
-          // render flowchart
-          document.querySelectorAll('.md-flowchart').forEach(element => {
-            try {
-              let code = element.textContent
-              let chart = flowchart.parse(code)
-              element.textContent = ''
-              chart.drawSVG(element)
-            } catch (e) {
-              element.outerHTML = `<pre>flowchart complains: ${e}</pre>`
-            }
-          })
+  emits: ['render-complete'],
+  setup(props,{emit, expose}){
+    const {
+      markdownIt, 
+      linkAttributes = DEFAULT_OPTIONS_LINK_ATTRIBUTES,
+      katex = DEFAULT_OPTIONS_KATEX,
+      tasklists = DEFAULT_OPTIONS_TASKLISTS,
+      githubToc = DEFAULT_OPTIONS_GITHUBTOC,
+    } = toRefs(props);
 
-          // emit event
-          this.$emit('render-complete')
-        })
-      }
-    }
-  },
-  data() {
-    const optMarkdownIt = this.options.markdownIt
-    const linkAttributes = this.options.linkAttributes || DEFAULT_OPTIONS_LINK_ATTRIBUTES
-    const optKatex = this.options.katex || DEFAULT_OPTIONS_KATEX
-    const optTasklists = this.options.tasklists || DEFAULT_OPTIONS_TASKLISTS
-    const optGithubToc = this.options.githubToc || DEFAULT_OPTIONS_GITHUBTOC
+    const markdownRef = ref(null);
 
-    let md = new MarkdownIt(optMarkdownIt)
+    const md = new MarkdownIt(markdownIt)
       .use(MarkdownItEmoji)
       .use(MarkdownItSubscript)
       .use(MarkdownItSuperscript)
@@ -126,10 +97,10 @@ export default {
       .use(MarkdownItEcharts)
       .use(MarkdownItFlowchart)
       .use(MarkdownItLinkAttributes, linkAttributes)
-      .use(MarkdownItKatex, optKatex)
-      .use(MarkdownItTasklists, optTasklists)
+      .use(MarkdownItKatex, katex)
+      .use(MarkdownItTasklists, tasklists)
       .use(MarkdownItFontAwsome)
-      .use(MarkdownItGithubToc, optGithubToc)
+      .use(MarkdownItGithubToc, githubToc)
       .use(MarkdownItContainer, 'warning', {
         validate: function(params) {
           return params.trim() === 'warning'
@@ -182,19 +153,59 @@ export default {
           }
         }
       })
-    return {
-      md: md
+
+    watch(() => props.content,(val) => {
+      nextTick(() => {
+          markdownRef.value.innerHTML = md.render(
+            val
+          )
+          // render echarts
+          document.querySelectorAll('.md-echarts').forEach(element => {
+            try {
+              let options = JSON.parse(element.textContent)
+              let chart = echarts.init(element)
+              chart.setOption(options)
+            } catch (e) {
+              element.outerHTML = `<pre>echarts complains: ${e}</pre>`
+            }
+          })
+          // render flowchart
+          document.querySelectorAll('.md-flowchart').forEach(element => {
+            try {
+              let code = element.textContent
+              let chart = flowchart.parse(code)
+              element.textContent = ''
+              chart.drawSVG(element)
+            } catch (e) {
+              element.outerHTML = `<pre>flowchart complains: ${e}</pre>`
+            }
+          })
+
+          // emit event
+          emit('render-complete')
+        })
+    }, {immediate: true})
+
+    // methods
+    const use = (plugin, options) => {
+      md.use(plugin, options)
     }
-  },
-  methods: {
-    use(plugin, options) {
-      this.md.use(plugin, options)
-    },
-    get() {
-      return this.md
+
+    const get = () => {
+      return md
+    }
+
+    expose({
+      use,
+      get
+    })
+
+    return {
+      markdownRef,
+      md
     }
   }
-}
+})
 </script>
 
 <style lange="scss">
diff --git a/src/markdown-it-vue.vue b/src/markdown-it-vue.vue
index 32e4d53..b945819 100644
--- a/src/markdown-it-vue.vue
+++ b/src/markdown-it-vue.vue
@@ -2,19 +2,20 @@
   <div>
     <div
       class="markdown-body"
-      ref="markdown-it-vue-container"
+      ref="markdownRef"
       @click="hdlClick"
     />
     <image-viewer
       v-if="showViewer"
       :url-list="urlList"
-      :index.sync="index"
+      v-model="index"
       :on-close="closeViewer"
     />
   </div>
 </template>
 
 <script>
+import {defineComponent, ref, watch, toRefs, nextTick, reactive} from 'vue'
 import MarkdownIt from 'markdown-it'
 import MarkdownItEmoji from 'markdown-it-emoji'
 import MarkdownItSubscript from 'markdown-it-sub'
@@ -40,7 +41,7 @@ import MarkdownItImage from './markdown-it-image'
 import 'github-markdown-css'
 import 'markdown-it-latex/dist/index.css'
 
-import echarts from 'echarts/dist/echarts.simple.min'
+import * as echarts from 'echarts/dist/echarts.simple.min'
 import mermaid from 'mermaid'
 import flowchart from 'flowchart.js'
 import ImageViewer from './markdown-it-image/image-viewer.vue'
@@ -70,12 +71,14 @@ const DEFAULT_OPTIONS_IMAGE = {
   viewer: true
 }
 
-export default {
-  components: { ImageViewer },
+
+export default defineComponent({
   name: 'markdown-it-vue',
+  components: { ImageViewer },
   props: {
     content: {
-      type: String
+      type: String,
+      default: ''
     },
     options: {
       type: Object,
@@ -93,61 +96,29 @@ export default {
       }
     }
   },
-  watch: {
-    content: {
-      immediate: true,
-      handler(val) {
-        this.urlSet.clear()
-        this.$nextTick(() => {
-          this.$refs['markdown-it-vue-container'].innerHTML = this.md.render(
-            val
-          )
-          // render echarts
-          document.querySelectorAll('.md-echarts').forEach(element => {
-            try {
-              let options = JSON.parse(element.textContent)
-              let chart = echarts.init(element)
-              chart.setOption(options)
-            } catch (e) {
-              element.outerHTML = `<pre>echarts complains: ${e}</pre>`
-            }
-          })
-          // render mermaid
-          mermaid.init(undefined, document.querySelectorAll('.mermaid'))
-          // render flowchart
-          document.querySelectorAll('.md-flowchart').forEach(element => {
-            try {
-              let code = element.textContent
-              let chart = flowchart.parse(code)
-              element.textContent = ''
-              chart.drawSVG(element)
-            } catch (e) {
-              element.outerHTML = `<pre>flowchart complains: ${e}</pre>`
-            }
-          })
+  emits: ['render-complete'],
+  setup(props, { emit, expose }){
+    const {
+      markdownIt, 
+      linkAttributes = DEFAULT_OPTIONS_LINK_ATTRIBUTES,
+      katex = DEFAULT_OPTIONS_KATEX,
+      tasklists = DEFAULT_OPTIONS_TASKLISTS,
+      githubToc = DEFAULT_OPTIONS_GITHUBTOC,
+      image = DEFAULT_OPTIONS_IMAGE,
+    } = toRefs(props);
+
+    const markdownRef = ref(null);
+    const index = ref(0);
+    const showViewer = ref(false);
+    const optImage = image;
+    const optMermaid = props.mermaid || DEFAULT_OPTIONS_MERMAID
+    const data = reactive({
+      urlList: [],
+    });
+    optImage.urlSet = new Set();
 
-          let list = []
-          for (const i of this.urlSet) {
-            list.push(i)
-          }
-          this.urlList = list
-          // emit event
-          this.$emit('render-complete')
-        })
-      }
-    }
-  },
-  data() {
-    const optMarkdownIt = this.options.markdownIt
-    const linkAttributes = this.options.linkAttributes || DEFAULT_OPTIONS_LINK_ATTRIBUTES
-    const optKatex = this.options.katex || DEFAULT_OPTIONS_KATEX
-    const optTasklists = this.options.tasklists || DEFAULT_OPTIONS_TASKLISTS
-    const optGithubToc = this.options.githubToc || DEFAULT_OPTIONS_GITHUBTOC
-    const optMermaid = this.options.mermaid || DEFAULT_OPTIONS_MERMAID
-    const optImage = this.options.image || DEFAULT_OPTIONS_IMAGE
-    optImage.urlSet = new Set()
 
-    let md = new MarkdownIt(optMarkdownIt)
+    const md = new MarkdownIt(markdownIt)
       .use(MarkdownItEmoji)
       .use(MarkdownItSubscript)
       .use(MarkdownItSuperscript)
@@ -163,10 +134,10 @@ export default {
       .use(MarkdownItEcharts)
       .use(MarkdownItFlowchart)
       .use(MarkdownItLinkAttributes, linkAttributes)
-      .use(MarkdownItKatex, optKatex)
-      .use(MarkdownItTasklists, optTasklists)
+      .use(MarkdownItKatex, katex)
+      .use(MarkdownItTasklists, tasklists)
       .use(MarkdownItFontAwsome)
-      .use(MarkdownItGithubToc, optGithubToc)
+      .use(MarkdownItGithubToc, githubToc)
       .use(MarkdownItImage, optImage)
       .use(MarkdownItContainer, 'warning', {
         validate: function(params) {
@@ -220,33 +191,75 @@ export default {
           }
         }
       })
-    return {
-      md: md,
-      urlSet: optImage.urlSet,
-      viewer: optImage.viewer,
-      showViewer: false,
-      index: 0,
-      urlList: []
+
+    watch(() => props.content, (val)=>{
+      optImage.urlSet.clear()
+        nextTick(() => {
+          markdownRef.value.innerHTML = md.render(val)
+          // render echarts
+          document.querySelectorAll('.md-echarts').forEach(element => {
+            try {
+              let options = JSON.parse(element.textContent)
+              let chart = echarts.init(element)
+              chart.setOption(options)
+            } catch (e) {
+              element.outerHTML = `<pre>echarts complains: ${e}</pre>`
+            }
+          })
+          // render mermaid
+          mermaid.init(undefined, document.querySelectorAll('.mermaid'))
+          // render flowchart
+          document.querySelectorAll('.md-flowchart').forEach(element => {
+            try {
+              let code = element.textContent
+              let chart = flowchart.parse(code)
+              element.textContent = ''
+              chart.drawSVG(element)
+            } catch (e) {
+              element.outerHTML = `<pre>flowchart complains: ${e}</pre>`
+            }
+          })
+
+          let list = []
+          for (const i of optImage.urlSet) {
+            list.push(i)
+          }
+          data.urlList = list
+          // emit event
+          emit('render-complete')
+      })
+    },{immediate: true})
+
+    // methods
+    const use = (plugin, options) => {
+      md.use(plugin, options)
     }
-  },
-  methods: {
-    use(plugin, options) {
-      this.md.use(plugin, options)
-    },
-    get() {
-      return this.md
-    },
-    hdlClick(e) {
-      if (this.viewer && e.target.tagName == 'IMG') {
-        this.index = this.urlList.indexOf(e.target.src) || 0
-        this.showViewer = true
+
+    const get = () => {
+       return this.md
+    }
+
+    const hdlClick = (e) => {
+      if (optImage.viewer && e.target.tagName == 'IMG') {
+        index.value = data.urlList.indexOf(e.target.src) || 0
+        showViewer.value = true
       }
-    },
-    closeViewer() {
-      this.showViewer = false
+    }
+
+    expose({
+      use, 
+      get
+    })
+
+    return {
+      markdownRef,
+      showViewer,
+      index,
+      urlSet: data.urlSet,
+      hdlClick
     }
   }
-}
+})
 </script>
 
 <style lange="scss">
diff --git a/src/utils.js b/src/utils.js
index 5e7a70f..51b0369 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,9 +1,8 @@
-import Vue from 'vue'
-const isServer = Vue.prototype.$isServer
+
 
 /* istanbul ignore next */
 export const on = (function () {
-  if (!isServer && document.addEventListener) {
+  if (document.addEventListener) {
     return function (element, event, handler) {
       if (element && event && handler) {
         element.addEventListener(event, handler, false)
@@ -21,7 +20,7 @@ export const on = (function () {
 
 /* istanbul ignore next */
 export const off = (function () {
-  if (!isServer && document.removeEventListener) {
+  if (document.removeEventListener) {
     return function (element, event, handler) {
       if (element && event) {
         element.removeEventListener(event, handler, false)
@@ -49,5 +48,5 @@ export function rafThrottle(fn) {
 }
 
 export const isFirefox = function () {
-  return !Vue.prototype.$isServer && !!window.navigator.userAgent.match(/firefox/i)
+  return !!window.navigator.userAgent.match(/firefox/i)
 }
\ No newline at end of file