Vue js Webpack error - Uncaught TypeError: Vue.directive is not a function

Need help in fixing the below error :

Vue.directive is not a function

I am using Vue Webpack boilerplate https://github.com/vuejs-templates/webpack for my front-end project.

Here is the structure of the project:

I am getting the following error

[HMR] Waiting for update signal from WDS...
webpack-internal:///./src/helpers/directives.js:1 Uncaught TypeError: Vue.directive is not a function
    at eval (webpack-internal:///./src/helpers/directives.js:1)
    at Object../src/helpers/directives.js (app.js:4759)
    at __webpack_require__ (app.js:708)
    at fn (app.js:113)
    at Object.eval (webpack-internal:///./src/bootstrap.js:44)
    at eval (webpack-internal:///./src/bootstrap.js:142)
    at Object../src/bootstrap.js (app.js:4568)
    at __webpack_require__ (app.js:708)
    at fn (app.js:113)
    at eval (webpack-internal:///./src/main.js:22)
webpack-internal:///./node_modules/vue/dist/vue.esm.js:9075 Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
webpack-internal:///./node_modules/vue/dist/vue.esm.js:9086 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

helper\directives.js

Vue.directive('click-outside', {
    bind: function (el, binding, vnode) {
      el.event = function (event) {
        // here I check that click was outside the el and his childrens
        if (!(el === event.target || el.contains(event.target))) {
          // and if it did, call method provided in attribute value
          vnode.context[binding.expression](event)
        }
      }
      document.body.addEventListener('click', el.event)
    },
    unbind: function (el) {
      document.body.removeEventListener('click', el.event)
    }
  })