Vue Codemirror line numbers

So I am trying to implement codemirror into my Vue.js app using https://github.com/surmon-china/vue-codemirror. The problem is that after I import and use the codemirro component everything works fine expect the line numbers (number of lines the code has) are not showing. Here is my code right out of the demo page:

<template>
  <div class="root">
    <nav>
      <div id="logo-container">

      </div>
    </nav>
    <div id="left-side">
      <div class="codemirror">
        <!-- codemirror -->
        <codemirror v-model="code" 
                    :options="cmOption"
                    @cursorActivity="onCmCursorActivity"
                    @ready="onCmReady"
                    @focus="onCmFocus"
                    @blur="onCmBlur">
        </codemirror>
      </div>
    </div>
  </div>
</template>

and here is the script:

data() {
      return {
        code: '',
        cmOption: {
          tabSize: 4,
          styleActiveLine: true,
          lineNumbers: false,
          styleSelectedText: true,
          line: true,
          foldGutter: true,
          gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
          highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
          mode: 'text/javascript',
          // hint.js options
          hintOptions:{
            // 当匹配只有一项的时候是否自动补全
            completeSingle: true
          },
          //快捷键 可提供三种模式 sublime、emacs、vim
          keyMap: "sublime",
          matchBrackets: true,
          showCursorWhenSelecting: true,
          theme: "monokai",
          extraKeys: { "Ctrl": "autocomplete" }
        }
      }
    }