diff --git a/=0.52.4 b/=0.52.4
new file mode 100644
index 0000000..fd1fa3b
--- /dev/null
+++ b/=0.52.4
@@ -0,0 +1,6 @@
+vue-clusterize@0.5.1 /Users/billy/vue/vue-clusterize
+├─┬ karma-webpack@1.8.0
+│ └── source-map@0.1.43 
+├── stylus@0.54.5  extraneous
+└── UNMET PEER DEPENDENCY vue@2.0.7
+
diff --git a/README.md b/README.md
index 8a849e5..60bdcf1 100644
--- a/README.md
+++ b/README.md
@@ -84,7 +84,7 @@ example:
 
 There are two ways clusterize can be used, either use a fixed height:
 ```html
-<clusterize :data="rowsData" :height="400" v-ref:clusterize>
+<clusterize :data="rowsData" :height="400" ref="clusterize">
 ```
 
 Or use autoheight:
diff --git a/clusterize-cluster.js b/clusterize-cluster.js
index 97e4dc9..5fe40b2 100644
--- a/clusterize-cluster.js
+++ b/clusterize-cluster.js
@@ -40,7 +40,7 @@ module.exports = {
       frags: []
     };
   },
-  ready: function() {
+  mounted: function() {
     var key, ref, results, val;
     this.end = this.Vue.util.createAnchor('clusterize-cluster-end');
     this.$el.appendChild(this.end);
@@ -58,7 +58,6 @@ module.exports = {
       parentScope = this.parentVm;
       scope = Object.create(parentScope);
       scope.$refs = Object.create(parentScope.$refs);
-      scope.$els = Object.create(parentScope.$els);
       scope.$parent = parentScope;
       scope.$forContext = this;
       this.Vue.util.defineReactive(scope, this.bindingName, this.data[i]);
@@ -163,4 +162,4 @@ module.exports = {
 };
 
 if (module.exports.__esModule) module.exports = module.exports.default
-;(typeof module.exports === "function"? module.exports.options: module.exports).template = "<div class=clusterize-cluster :class={loading:loading} :style=\"{height:height+'px',overflow:'visible',position:'relative',margin:0,padding:0}\"><div class=clusterize-cluster-loading v-el:loading=v-el:loading v-show=loading><slot>loading...</slot></div></div>"
+;(typeof module.exports === "function"? module.exports.options: module.exports).template = "<div class=clusterize-cluster :class={loading:loading} :style=\"{height:height+'px',overflow:'visible',position:'relative',margin:0,padding:0}\"><div class=clusterize-cluster-loading v-ref='loading'=v-ref='loading' v-show=loading><slot>loading...</slot></div></div>"
diff --git a/clusterize.js b/clusterize.js
index d681983..8ad5a0e 100644
--- a/clusterize.js
+++ b/clusterize.js
@@ -390,9 +390,9 @@ module.exports = {
         relI = absI % 3;
         if (this.clusters[relI].nr !== absI || repaint) {
           if (down) {
-            this.clusters[relI].$before(this.$els.lastRow);
+            this.clusters[relI].$before(this.$refs.lastRow);
           } else {
-            this.clusters[relI].$after(this.$els.firstRow);
+            this.clusters[relI].$after(this.$refs.firstRow);
           }
           this.clusters[relI].nr = absI;
           this.clusters[relI].index = absI * this.clusterSize;
@@ -486,7 +486,7 @@ module.exports = {
       }
     }
   },
-  ready: function() {
+  mounted: function() {
     var child, l, len, ref;
     ref = this.$children;
     for (l = 0, len = ref.length; l < len; l++) {
@@ -521,4 +521,4 @@ module.exports = {
 };
 
 if (module.exports.__esModule) module.exports = module.exports.default
-;(typeof module.exports === "function"? module.exports.options: module.exports).template = "<div class=clusterize :style=computedStyle :class=\"{'loading':state.loading, 'not-started':!state.started}\" @scroll=onScroll><div class=clusterize-first-row v-el:first-row=v-el:first-row v-bind:style=\"{height:firstRowHeight+'px'}\"></div><clusterize-cluster v-bind:binding-name=bindingName v-bind:row-watchers=rowWatchers v-bind:parent-vm=parentVm><slot name=loading></slot></clusterize-cluster><clusterize-cluster v-bind:binding-name=bindingName v-bind:row-watchers=rowWatchers v-bind:parent-vm=parentVm><slot name=loading></slot></clusterize-cluster><clusterize-cluster v-bind:binding-name=bindingName v-bind:row-watchers=rowWatchers v-bind:parent-vm=parentVm><slot name=loading></slot></clusterize-cluster><div class=clusterize-last-row v-el:last-row=v-el:last-row v-bind:style=\"{height:lastRowHeight+'px'}\"></div></div>"
+;(typeof module.exports === "function"? module.exports.options: module.exports).template = "<div class=clusterize :style=computedStyle :class=\"{'loading':state.loading, 'not-started':!state.started}\" @scroll=onScroll><div class=clusterize-first-row v-ref='first-row'=v-ref='first-row' v-bind:style=\"{height:firstRowHeight+'px'}\"></div><clusterize-cluster v-bind:binding-name=bindingName v-bind:row-watchers=rowWatchers v-bind:parent-vm=parentVm><slot name=loading></slot></clusterize-cluster><clusterize-cluster v-bind:binding-name=bindingName v-bind:row-watchers=rowWatchers v-bind:parent-vm=parentVm><slot name=loading></slot></clusterize-cluster><clusterize-cluster v-bind:binding-name=bindingName v-bind:row-watchers=rowWatchers v-bind:parent-vm=parentVm><slot name=loading></slot></clusterize-cluster><div class=clusterize-last-row v-el:last-row=v-el:last-row v-bind:style=\"{height:lastRowHeight+'px'}\"></div></div>"
diff --git a/dev/autoheight.vue b/dev/autoheight.vue
index 9671e56..9d091e5 100644
--- a/dev/autoheight.vue
+++ b/dev/autoheight.vue
@@ -4,7 +4,7 @@
   p resize the window
   p rows per cluster: {{clusterSize}}
   .scrollcontainer(style="height:80%;position:relative")
-    clusterize(v-ref:clusterize v-bind:data="rowsData" auto-height v-bind:style="{width:'200px',border:'solid 1px black'}")
+    clusterize(ref="clusterize" v-bind:data="rowsData" auto-height v-bind:style="{width:'200px',border:'solid 1px black'}")
       div.clusterize-row {{data}}
 </template>
 
@@ -19,12 +19,12 @@ module.exports =
     rowsData: (x for x in [1..10000])
     clusterSize: 0
     timer: null
-  attached: ->
+  mounted: ->
     @timer = setInterval (=> @clusterSize = @$refs.clusterize.clusterSize),500
     document.body.setAttribute "style","height:100%"
     @setCss document.body, "height", "100%"
     @setCss document.documentElement, "height", "100%"
-  detached: ->
+  destroyed: ->
     clearInterval(@timer) if @timer?
     @setCss document.body, "height"
     @setCss document.documentElement, "height"
diff --git a/dev/basic.vue b/dev/basic.vue
index 28f6249..463d1c8 100644
--- a/dev/basic.vue
+++ b/dev/basic.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
 .container
   a(href="https://vue-comps.github.io/vue-clusterize/blob/master/dev/basic.vue") source
-  clusterize(v-ref:clusterize v-bind:data="rowsData" v-bind:height="400" v-bind:style="{width:'200px'}")
+  clusterize(ref="clusterize" v-bind:data="rowsData" v-bind:height="400" v-bind:style="{width:'200px'}")
     div.clusterize-row {{data}} - index: {{index}}
 </template>
 
diff --git a/dev/flex.vue b/dev/flex.vue
index 4dff12f..94c5753 100644
--- a/dev/flex.vue
+++ b/dev/flex.vue
@@ -5,11 +5,11 @@
   p Same size // items per cluster: {{clusterSize}}
   p(style="margin-left:50%") Different size with display:flex // items per cluster: {{clusterSize2}}
   .scrollcontainer(style="height:80%;position:relative;width:40%;float:left")
-    clusterize(v-ref:clusterize v-bind:data="rowsData" flex v-bind:flex-initial="100" auto-height v-bind:style="{border:'solid 1px black'}")
+    clusterize(ref="clusterize" v-bind:data="rowsData" flex v-bind:flex-initial="100" auto-height v-bind:style="{border:'solid 1px black'}")
       div.clusterize-row(style="clear:both")
         span(style="float:left;padding:5px" v-for="d in data") {{d}}
   .flexcontainer(style="height:80%;position:relative;width:40%;float:left")
-    clusterize(v-ref:clusterize2 @get-data="getData" @get-data-count="getDataCount" flex v-bind:flex-fac=0.96 v-bind:flex-initial="40" auto-height v-bind:style="{border:'solid 1px black'}")
+    clusterize(ref="clusterize2" @get-data="getData" @get-data-count="getDataCount" flex v-bind:flex-fac=0.96 v-bind:flex-initial="40" auto-height v-bind:style="{border:'solid 1px black'}")
       div.clusterize-row(style="display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between")
         div(style="text-align:center;margin:5px",v-bind:style="{background:d.color,height:d.height,width:d.width}",v-for="d in data") {{d.i}}
 </template>
@@ -27,13 +27,13 @@ module.exports =
     clusterSize2: 2
     timer: null
     timer2: null
-  attached: ->
+  mounted: ->
     @timer = setInterval (=> @clusterSize = @$refs.clusterize.clusterSize),500
     @timer2 = setInterval (=> @clusterSize2 = @$refs.clusterize2.clusterSize),500
     document.body.setAttribute "style","height:100%"
     @setCss document.body, "height", "100%"
     @setCss document.documentElement, "height", "100%"
-  detached: ->
+  destroyed: ->
     clearInterval(@timer) if @timer?
     @setCss document.body, "height"
     @setCss document.documentElement, "height"
diff --git a/dev/loading.vue b/dev/loading.vue
index 7796f83..9e7fcbc 100644
--- a/dev/loading.vue
+++ b/dev/loading.vue
@@ -2,7 +2,7 @@
 .container
   a(href="https://vue-comps.github.io/vue-clusterize/blob/master/dev/loading.vue") source
   p 0.5 sec delay for data
-  clusterize(v-ref:clusterize @get-data="getData" @get-data-count="getDataCount" v-bind:height="400" v-bind:style="{width:'200px'}")
+  clusterize(ref="clusterize" @get-data="getData" @get-data-count="getDataCount" v-bind:height="400" v-bind:style="{width:'200px'}")
     div.clusterize-row(v-if="!loading") {{data}}
     p(slot="loading") loading
 </template>
diff --git a/dev/presetRowHeight.vue b/dev/presetRowHeight.vue
index b1ca480..90c0dec 100644
--- a/dev/presetRowHeight.vue
+++ b/dev/presetRowHeight.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
 .container
   a(href="https://vue-comps.github.io/vue-clusterize/blob/master/dev/basic.vue") source
-  clusterize(v-ref:clusterize v-bind:data="rowsData" v-bind:row-height="25" v-bind:height="400" v-bind:style="{width:'200px'}")
+  clusterize(ref="clusterize" v-bind:data="rowsData" v-bind:row-height="25" v-bind:height="400" v-bind:style="{width:'200px'}")
     div.clusterize-row(v-bind:style="{height:height+'px'}") {{data}}
 </template>
 
diff --git a/dev/withOtherComponentInside.vue b/dev/withOtherComponentInside.vue
index b9dca54..4a1fefc 100644
--- a/dev/withOtherComponentInside.vue
+++ b/dev/withOtherComponentInside.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
 .container
   a(href="https://vue-comps.github.io/vue-clusterize/blob/master/dev/basic.vue") source
-  clusterize(v-ref:clusterize v-bind:data="rowsData" v-bind:height="400" v-bind:style="{width:'200px'}")
+  clusterize(ref="clusterize" v-bind:data="rowsData" v-bind:height="400" v-bind:style="{width:'200px'}")
     div.clusterize-row {{data}}
       tooltip(position="body") index: {{index}}
 </template>
diff --git a/karma.conf.coffee b/karma.conf.coffee
index 0b1f473..c631af8 100644
--- a/karma.conf.coffee
+++ b/karma.conf.coffee
@@ -1,7 +1,7 @@
 module.exports = (config) ->
   config.set
     preprocessors:
-      "**/*.coffee": ["webpack",'sourcemap']
+      "**/:.coffee+": ["webpack",'sourcemap']
     webpack:
       devtool: 'inline-source-map'
       resolve:
diff --git a/package.json b/package.json
index 35f146f..819fa9b 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "node": "*"
   },
   "dependencies": {
+    "vue": "^2.0.7",
     "vue-mixins": "^0.2.10"
   },
   "devDependencies": {
@@ -39,13 +40,14 @@
     "karma-webpack": "^1.7.0",
     "mocha": "^2.5.3",
     "pug": "^2.0.0-beta3",
+    "stylus-loader": "^2.3.1",
     "template-html-loader": "0.0.3",
-    "vue": "^1.0.25",
+    "vue": "^2.0.7",
     "vue-compiler": "^0.3.0",
     "vue-comps-tooltip": "^0.2.0",
     "vue-dev-server": "^0.2.10",
     "vue-html-loader": "^1.2.2",
-    "vue-loader": "^8.5.2",
+    "vue-loader": "^9.0.0",
     "webpack": "^1.13.1"
   },
   "keywords": [
@@ -55,7 +57,7 @@
   ],
   "readmeFilename": "README.md",
   "scripts": {
-    "build": "NODE_ENV=production vue-compiler --out . src/*.vue",
+    "build": "NODE_ENV=production vue-compiler --out . src/:.vue+",
     "dev": "vue-dev-server",
     "watch": "karma start --browsers Chrome --auto-watch --reporters spec",
     "test": "karma start --single-run",
diff --git a/src/clusterize-cluster.vue b/src/clusterize-cluster.vue
index c3bbf42..941695b 100644
--- a/src/clusterize-cluster.vue
+++ b/src/clusterize-cluster.vue
@@ -5,7 +5,7 @@
   :style="{height:height+'px',overflow:'visible',position:'relative',margin:0,padding:0}"
   )
   .clusterize-cluster-loading(
-    v-el:loading,
+    ref="loading",
     v-show="loading"
     )
     slot loading...
@@ -46,7 +46,7 @@ module.exports =
     end: null
     frags: []
 
-  ready: ->
+  mounted: ->
     @end = @Vue.util.createAnchor('clusterize-cluster-end')
     @$el.appendChild(@end)
     for key,val of @rowWatchers
@@ -57,7 +57,6 @@ module.exports =
       parentScope = @parentVm
       scope = Object.create(parentScope)
       scope.$refs = Object.create(parentScope.$refs)
-      scope.$els = Object.create(parentScope.$els)
       scope.$parent = parentScope
       scope.$forContext = @
       @Vue.util.defineReactive(scope,@bindingName,@data[i])
diff --git a/src/clusterize.vue b/src/clusterize.vue
index 1db7df1..19d7e07 100644
--- a/src/clusterize.vue
+++ b/src/clusterize.vue
@@ -5,14 +5,14 @@
   :class="{'loading':state.loading, 'not-started':!state.started}",
   @scroll="onScroll"
   )
-  .clusterize-first-row(v-el:first-row v-bind:style="{height:firstRowHeight+'px'}")
+  .clusterize-first-row(ref="first-row" v-bind:style="{height:firstRowHeight+'px'}")
   clusterize-cluster(v-bind:binding-name="bindingName" v-bind:row-watchers="rowWatchers" v-bind:parent-vm="parentVm")
     slot(name="loading")
   clusterize-cluster(v-bind:binding-name="bindingName" v-bind:row-watchers="rowWatchers" v-bind:parent-vm="parentVm")
     slot(name="loading")
   clusterize-cluster(v-bind:binding-name="bindingName" v-bind:row-watchers="rowWatchers" v-bind:parent-vm="parentVm")
     slot(name="loading")
-  .clusterize-last-row(v-el:last-row v-bind:style="{height:lastRowHeight+'px'}")
+  .clusterize-last-row(ref="last-row" v-bind:style="{height:lastRowHeight+'px'}")
 </template>
 
 <script lang="coffee">
@@ -354,7 +354,7 @@ module.exports =
         for cluster in @clusters
           cluster.factory = factory
 
-  ready: ->
+  mounted: ->
     for child in @$children
       if child.isCluster
         @clusters.push child