diff --git a/karma.conf.js b/karma.conf.js
index 4711629..9c03514 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -20,11 +20,16 @@ module.exports = function (config) {
             exclude: /node_modules/
           },
         ]
-      }
+      },
+			resolve: {
+			  alias: {
+			    'vue$': 'vue/dist/vue.js'
+			  }
+			}
     },
 
     webpackMiddleware: {
       noInfo: true
     }
   });
-};
\ No newline at end of file
+};
diff --git a/package.json b/package.json
index 5d9aae2..25c8b0a 100644
--- a/package.json
+++ b/package.json
@@ -36,12 +36,14 @@
     "karma-spec-reporter": "0.0.26",
     "karma-webpack": "^1.7.0",
     "phantomjs-prebuilt": "^2.1.7",
-    "vue": "^1.0.26",
+    "vue": "^2.1.0",
     "vue-hot-reload-api": "^2.0.5",
     "vue-html-loader": "^1.2.3",
-    "vue-loader": "^8.5.3",
+    "vue-loader": "^10.0.0",
     "vue-style-loader": "^1.0.0",
-    "webpack": "^1.13.1",
-    "webpack-dev-server": "^1.14.1"
+		"webpack": "^1.13.2",
+    "webpack-dev-middleware": "^1.8.3",
+    "webpack-hot-middleware": "^2.12.2",
+    "webpack-merge": "^0.14.1"
   }
 }
diff --git a/test/Sortable.spec.js b/test/Sortable.spec.js
index 1d6a943..69d07b9 100644
--- a/test/Sortable.spec.js
+++ b/test/Sortable.spec.js
@@ -16,8 +16,7 @@ describe('vue-sortable', () => {
     const vm = new Vue({
       template: '<div><ul></ul></div>',
     }).$mount()
-
-    expect(typeof vm.$options.directives['sortable']).toEqual('function')
+    expect(typeof vm.$options.directives['sortable'].bind).toEqual('function')
   })
 
   it('does not set vm.sortable unless a directive argument is passed', () => {
@@ -62,4 +61,4 @@ describe('vue-sortable', () => {
     expect(vm.sortable.foo.options.foo).toEqual('bar')
   })
 
-})
\ No newline at end of file
+})
diff --git a/vue-sortable.js b/vue-sortable.js
index 1d441be..67426b8 100644
--- a/vue-sortable.js
+++ b/vue-sortable.js
@@ -13,20 +13,23 @@
   vSortable.config = {}
 
   vSortable.install = function (Vue) {
-    Vue.directive('sortable', function (options) {
-      options = options || {}
-
-      var sortable = new Sortable(this.el, options)
-
-      if (this.arg && !this.vm.sortable) {
-        this.vm.sortable = {}
-      }
-
-      //  Throw an error if the given ID is not unique
-      if (this.arg && this.vm.sortable[this.arg]) {
-        console.warn('[vue-sortable] cannot set already defined sortable id: \'' + this.arg + '\'')
-      } else if( this.arg ) {
-        this.vm.sortable[this.arg] = sortable
+    Vue.directive('sortable', {
+      bind: function (el, binding, vnode) {
+        options = binding.value || {}
+
+        var sortable = new Sortable(el, options)
+
+        const vm = vnode.context;
+        if (binding.arg && !vm.sortable) {
+          vm.sortable = {}
+        }
+
+        //  Throw an error if the given ID is not unique
+        if (binding.arg && vm.sortable[binding.arg]) {
+          console.warn('[vue-sortable] cannot set already defined sortable id: \'' + binding.arg + '\'')
+        } else if( binding.arg ) {
+          vm.sortable[binding.arg] = sortable
+        }
       }
     })
   }