Issue: `showHint is not a function`

Hi, I use the following:

• vue: 2.5.3
• vue-codemirror 4.0.5
• vue-electron 1.0.6

With this code:

MyComponent.vue

<template>
  <codemirror
    ref="vueCodemirror"
    v-model="form.query"
    @ready="onCodemirrorReady"
    @input="onCodemirrorInput"
    :options="codemirrorOptions"/>
</template>

<script>
  export default {
    data () {
      return {
        codemirrorOptions: {
          autofocus: true,
          extraKeys: { Ctrl: 'autocomplete' },
          line: true,
          lineNumbers: true,
          mode: 'text/x-mysql',
          styleActiveLine: true
        },
        form: {
          query: 'SELECT * FROM `service.billing`.gridSettings;'
        }
      }
    },
    computed: {
      codemirror () {
        return this.$refs.vueCodemirror.codemirror
      }
    },
    methods: {
      onCodemirrorReady (cm) {
        cm.on('keypress', () => {
          cm.showHint()
        })
      },
      onCodemirrorInput (newQuery) {
        this.form.query = newQuery
      }
    }
  }
</script>

main.js

import Vue from 'vue'
import App from './App'

import VueCodemirror from 'vue-codemirror'
import 'codemirror/addon/hint/show-hint'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/sql-hint.js'
import 'codemirror/addon/selection/active-line.js'
import 'codemirror/mode/sql/sql'
import 'codemirror/lib/codemirror.css'
Vue.use(VueCodemirror)

if (!process.env.IS_WEB) Vue.use(require('vue-electron'))

new Vue({
  components: { App },
  template: '<App/>'
}).$mount('#app')

What is Expected?

When I type in the codemirror textarea, showHint function should be called and the hint should be displayed

What is actually happening?

The following error happen: Uncaught TypeError: cm.showHint is not a function

[KomaGR]

@lihuacai168 You also need to import the show-hint javascript.

import "codemirror/addon/hint/show-hint.js";

[lihuacai168]

@surmon-china