diff --git a/.gitignore b/.gitignore
index d58f498a..91ee0be7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,6 +13,34 @@
 # .nfs files are created when an open file is removed but is still being accessed
 .nfs*
 
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
 ### Node template
 node_modules
 # Logs
@@ -80,7 +108,7 @@ typings/
 # User-specific stuff:
 .idea/**/workspace.xml
 .idea/**/tasks.xml
-.idea/dictionaries
+#.idea/dictionaries
 
 # Sensitive or high-churn files:
 .idea/**/dataSources/
diff --git a/.idea/dictionaries/ghetto.xml b/.idea/dictionaries/ghetto.xml
new file mode 100644
index 00000000..c7afac6a
--- /dev/null
+++ b/.idea/dictionaries/ghetto.xml
@@ -0,0 +1,47 @@
+<component name="ProjectDictionaryState">
+  <dictionary name="ghetto">
+    <words>
+      <w>addfeature</w>
+      <w>arcgis</w>
+      <w>bingmaps</w>
+      <w>declutter</w>
+      <w>deinit</w>
+      <w>docsify</w>
+      <w>drawend</w>
+      <w>drawstart</w>
+      <w>geoloc</w>
+      <w>hidpi</w>
+      <w>imageloadend</w>
+      <w>imageloaderror</w>
+      <w>imageloadstart</w>
+      <w>jsdelivr</w>
+      <w>jsnext</w>
+      <w>mapbox</w>
+      <w>modifyend</w>
+      <w>modifystart</w>
+      <w>moveend</w>
+      <w>movestart</w>
+      <w>openstreetmap</w>
+      <w>pluggable</w>
+      <w>pointerdrag</w>
+      <w>postcompose</w>
+      <w>postrender</w>
+      <w>precompose</w>
+      <w>proj</w>
+      <w>propertychange</w>
+      <w>removefeature</w>
+      <w>rendercomplete</w>
+      <w>reprojection</w>
+      <w>singleclick</w>
+      <w>tilecache</w>
+      <w>tileloadend</w>
+      <w>tileloaderror</w>
+      <w>tileloadstart</w>
+      <w>unpkg</w>
+      <w>vershinin</w>
+      <w>vuelayers</w>
+      <w>vuep</w>
+      <w>wmts</w>
+    </words>
+  </dictionary>
+</component>
\ No newline at end of file
diff --git a/build/rollup.js b/build/rollup.js
index 64a1addd..75a0de37 100644
--- a/build/rollup.js
+++ b/build/rollup.js
@@ -62,13 +62,25 @@ function getAllPackages () {
       globName: config.fullname,
       amdName: config.name,
     },
+    {
+      entry: utils.resolve('src/mixin/index.js'),
+      jsName: 'mixin',
+      pkgName: 'mixin',
+    },
+    {
+      entry: utils.resolve('src/ol-ext/index.js'),
+      jsName: 'ol-ext',
+      pkgName: 'ol-ext',
+    },
+    {
+      entry: utils.resolve('src/rx-ext/index.js'),
+      jsName: 'rx-ext',
+      pkgName: 'rx-ext',
+    },
   ]
 
   return Promise.all([
     packagesFromPath(utils.resolve('src/component'), utils.resolve('src/component')),
-    packagesFromPath(utils.resolve('src/mixin'), srcPath),
-    packagesFromPath(utils.resolve('src/ol-ext'), srcPath),
-    packagesFromPath(utils.resolve('src/rx-ext'), srcPath),
     packagesFromPath(utils.resolve('src/util'), srcPath),
   ]).then(otherPackages => {
     return packages.concat(otherPackages.reduce((all, packages) => all.concat(packages), []))
@@ -132,8 +144,11 @@ function bundleOptions (format, package, env = 'development') {
       return false
     }
     // embeddable
-    const embeddableRegExp = /(\.\/|src\/)(install)/i
-    if (embeddableRegExp.test(id)) {
+    const embeddableRegExp = /\/(mixin|ol-ext|rx-ext)\//i
+    if (
+      embeddableRegExp.test(parentId) &&
+      (/^\.\//.test(id) || embeddableRegExp.test(id))
+    ) {
       return false
     }
     // check internal component imports
@@ -174,17 +189,17 @@ function bundleOptions (format, package, env = 'development') {
       options.output.globals = (id) => {
         if (id === 'vue') return 'Vue'
 
-        if (ol[id] != null) {
-          return ol[id]
-        }
+        // if (ol[id] != null) {
+        //   return ol[id]
+        // }
       }
       options.input.external = (id, parent, resolved) => {
         if (['vue'].includes(id)) return true
 
-        if (!resolved && /^ol\/.+/.test(id)) {
-          ol[id] = id.replace(/\//g, '.')
-          return true
-        }
+        // if (!resolved && /^ol\/.+/.test(id)) {
+        //   ol[id] = id.replace(/\//g, '.')
+        //   return true
+        // }
 
         return false
       }
diff --git a/docs/home.md b/docs/home.md
index aa367f52..e47c6e62 100644
--- a/docs/home.md
+++ b/docs/home.md
@@ -7,10 +7,10 @@
 [![License](https://img.shields.io/github/license/ghettovoice/vuelayers.svg)](https://github.com/ghettovoice/vuelayers/blob/master/LICENSE)
 
 <iframe src="https://ghbtns.com/github-btn.html?user=ghettovoice&amp;repo=vuelayers&amp;type=star&amp;count=true&amp;size=large" 
-    frameborder="0" scrolling="0" class="github-button vld-github-btn" width="130px" height="30px"></iframe>
+    frameborder="0" scrolling="0" class="github-button vld-github-btn" width="140px" height="30px"></iframe>
 
 <iframe src="https://ghbtns.com/github-btn.html?user=ghettovoice&amp;repo=vuelayers&amp;type=fork&amp;count=true&amp;size=large" 
-    frameborder="0" scrolling="0" class="github-button vld-github-btn" width="130px" height="30px"></iframe>
+    frameborder="0" scrolling="0" class="github-button vld-github-btn" width="140px" height="30px"></iframe>
 
 ## Overview
 
diff --git a/docs/index.html b/docs/index.html
index 7a7b0d55..8cb07597 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -22,7 +22,7 @@
   <link rel="stylesheet" href="//unpkg.com/docsify@4.6.10/lib/themes/vue.css">
 
   <link rel="stylesheet" href="//unpkg.com/vuep@0.8.0/dist/vuep.min.css">
-  <link rel="stylesheet" href="//unpkg.com/vuelayers@0.10.7/lib/style.min.css">
+  <link rel="stylesheet" href="//unpkg.com/vuelayers@latest/lib/style.css">
 
   <style>
     .cover-main pre {
@@ -34,7 +34,7 @@
       padding: 0 1.4rem;
       position: relative;
       word-wrap: normal;
-      ackground-color: #f8f8f8;
+      background-color: #f8f8f8;
       font-family: Roboto Mono,Monaco,courier,monospace;
     }
 
@@ -84,11 +84,11 @@
     Please wait...
   </div>
 
-  <script src="//unpkg.com/openlayers@4.6.5/dist/ol.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.0/build/ol.js"></script>
   <script src="//unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
   <script src="//unpkg.com/vue@2.5.16/dist/vue.min.js"></script>
   <script src="//unpkg.com/vuep@0.8.0/dist/vuep.min.js"></script>
-  <script src="//unpkg.com/vuelayers@0.10.7/lib/index.umd.min.js"></script>
+  <script src="//unpkg.com/vuelayers@latest/lib/index.umd.js"></script>
   <script src="//unpkg.com/fakerator@0.3.0/dist/fakerator.js"></script>
 
   <script src="//unpkg.com/docsify-edit-on-github@1.0.1/index.js"></script>
diff --git a/docs/quickstart.md b/docs/quickstart.md
index 59846700..249f71e2 100644
--- a/docs/quickstart.md
+++ b/docs/quickstart.md
@@ -31,8 +31,6 @@ You can browse the source of the npm package at [unpkg.com/vuelayers/](https://u
 ```html
 <!-- include Vue -->
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
-<!-- include OpenLayers -->
-<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.0/build/ol.js"></script>
 <!-- include UMD VueLayers build -->
 <link rel="stylesheet" href="https://unpkg.com/vuelayers/lib/style.css">
 <script src="https://unpkg.com/vuelayers/lib/index.umd.js"></script>
diff --git a/package.json b/package.json
index 8fa86424..1ca994a1 100644
--- a/package.json
+++ b/package.json
@@ -58,8 +58,7 @@
     "ol-tilecache": "^3.0.1",
     "parse-color": "^1.0.0",
     "rxjs": "^6.3.3",
-    "uuid": "^3.3.2",
-    "whatwg-fetch": "^3.0.0"
+    "uuid": "^3.3.2"
   },
   "peerDependencies": {
     "vue": "^2.3.0"
diff --git a/src/component/circle-style/style.vue b/src/component/circle-style/style.vue
index f5fae408..88350f1b 100644
--- a/src/component/circle-style/style.vue
+++ b/src/component/circle-style/style.vue
@@ -1,8 +1,7 @@
 <script>
-  import Vue from 'vue'
   import Circle from 'ol/style/Circle'
-  import imageStyle from '../../mixin/image-style'
-  import withFillStrokeStyle from '../../mixin/with-fill-stroke-style'
+  import Vue from 'vue'
+  import { imageStyle, withFillStrokeStyle } from '../../mixin'
   import { isEqual } from '../../util/minilo'
   import mergeDescriptors from '../../util/multi-merge-descriptors'
 
diff --git a/src/component/cluster-source/source.vue b/src/component/cluster-source/source.vue
index ee7129a5..64dabda4 100644
--- a/src/component/cluster-source/source.vue
+++ b/src/component/cluster-source/source.vue
@@ -1,91 +1,106 @@
 <script>
-  import sourceContainer from '../../mixin/source-container'
-  import vectorSource from '../../mixin/vector-source'
-  import { createPointGeom, findPointOnSurface } from '../../ol-ext/geom'
+  import { hasSource } from '../../util/assert'
+  import { makeWatchers } from '../../util/vue-helpers'
+  import { sourceContainer, vectorSource } from '../../mixin'
+  import { createPointGeom, findPointOnSurface } from '../../ol-ext'
+  import { observableFromOlEvent } from '../../rx-ext'
   import mergeDescriptors from '../../util/multi-merge-descriptors'
   import SourceBuilder from './builder'
 
-  const props = {
-    distance: {
-      type: Number,
-      default: 20,
+  export default {
+    name: 'vl-source-cluster',
+    mixins: [vectorSource, sourceContainer],
+    props: {
+      distance: {
+        type: Number,
+        default: 20,
+      },
+      /**
+       * Geometry function factory
+       * @type {function(): (function(f: ol.Feature): ol.geom.SimpleGeometry|undefined)} geomFuncFactory
+       */
+      geomFuncFactory: {
+        type: Function,
+        default: defaultGeomFuncFactory,
+      },
     },
-    /**
-     * Geometry function factory
-     * @type {function(): (function(f: ol.Feature): ol.geom.SimpleGeometry|undefined)} geomFuncFactory
-     */
-    geomFuncFactory: {
-      type: Function,
-      default: defaultGeomFuncFactory,
+    computed: {
+      geomFunc () {
+        return this.geomFuncFactory()
+      },
     },
-  }
+    methods: {
+      /**
+       * @return {Promise<ol.source.Cluster>}
+       * @protected
+       */
+      createSource () {
+        // partial setup of ol.source.Cluster with the help of SourceBuilder class
+        /**
+         * @type {SourceBuilder}
+         * @private
+         */
+        this._sourceBuilder
+          .setAttributions(this.attributions)
+          .setDistance(this.distance)
+          .setGeometryFunction(this.geomFunc)
+          .setLogo(this.logo)
+          .setProjection(this.projection)
+          .setWrapX(this.wrapX)
 
-  const computed = {
-    geomFunc () {
-      return this.geomFuncFactory()
+        return this._sourceBuilder.promise()
+      },
+      /**
+       * @return {Object}
+       * @protected
+       */
+      getServices () {
+        return mergeDescriptors(
+          this::vectorSource.methods.getServices(),
+          this::sourceContainer.methods.getServices(),
+        )
+      },
+      /**
+       * @return {{
+       *     setSource: function(ol.source.Source): void,
+       *     getSource: function(): ol.source.Source
+       *   }|undefined}
+       * @protected
+       */
+      getSourceTarget () {
+        return this._sourceBuilder
+      },
+      subscribeAll () {
+        this::vectorSource.methods.subscribeAll()
+        this::subscribeToSourceChanges()
+      },
     },
-  }
-
-  const methods = {
-    /**
-     * @return {Promise<ol.source.Cluster>}
-     * @protected
-     */
-    createSource () {
-      // partial setup of ol.source.Cluster with the help of SourceBuilder class
+    watch: {
+      distance (value) {
+        if (this.$source && value !== this.$source.getDistance()) {
+          this.$source.setDistance(value)
+        }
+      },
+      ...makeWatchers(['geomFunc'], () => function () {
+        this.scheduleRecreate()
+      }),
+    },
+    created () {
       /**
        * @type {SourceBuilder}
        * @private
        */
       this._sourceBuilder = new SourceBuilder()
-        .setAttributions(this.attributions)
-        .setDistance(this.distance)
-        .setGeometryFunction(this.geomFunc)
-        .setLogo(this.logo)
-        .setProjection(this.projection)
-        .setWrapX(this.wrapX)
 
-      return this._sourceBuilder.promise()
-    },
-    /**
-     * @return {Object}
-     * @protected
-     */
-    getServices () {
-      return mergeDescriptors(
-        this::vectorSource.methods.getServices(),
-        this::sourceContainer.methods.getServices(),
-      )
-    },
-    /**
-     * @return {{
-     *     setSource: function(ol.source.Source): void,
-     *     getSource: function(): ol.source.Source
-     *   }|undefined}
-     * @protected
-     */
-    getSourceTarget () {
-      return this._sourceBuilder
-    },
-  }
-
-  const watch = {
-    distance (value) {
-      if (this.$source && value !== this.$source.getDistance()) {
-        this.$source.setDistance(value)
-      }
+      Object.defineProperties(this, {
+        $innerSource: {
+          enumerable: true,
+          get: this.getSource,
+        },
+      })
     },
   }
 
-  export default {
-    name: 'vl-source-cluster',
-    mixins: [vectorSource, sourceContainer],
-    props,
-    computed,
-    methods,
-    watch,
-  }
-
   /**
    * @returns {function(f: ol.Feature): ol.geom.SimpleGeometry|undefined}
    */
@@ -100,4 +115,18 @@
       }
     }
   }
+
+  function subscribeToSourceChanges () {
+    hasSource(this)
+
+    const adds = observableFromOlEvent(this.$source, 'addfeature')
+    this.subscribeTo(adds, ({ feature }) => {
+      this.addFeature(feature)
+    })
+
+    const removes = observableFromOlEvent(this.$source, 'removefeature')
+    this.subscribeTo(removes, ({ feature }) => {
+      this.removeFeature(feature)
+    })
+  }
 </script>
diff --git a/src/component/draw-interaction/interaction.vue b/src/component/draw-interaction/interaction.vue
index 38d90b1d..60203afc 100644
--- a/src/component/draw-interaction/interaction.vue
+++ b/src/component/draw-interaction/interaction.vue
@@ -3,13 +3,16 @@
   import DrawInteraction from 'ol/interaction/Draw'
   import { merge as mergeObs } from 'rxjs/observable'
   import { map as mapObs } from 'rxjs/operators'
-  import interaction from '../../mixin/interaction'
-  import stylesContainer from '../../mixin/styles-container'
-  import { GEOMETRY_TYPE } from '../../ol-ext/consts'
-  import { initializeFeature } from '../../ol-ext/feature'
-  import { createStyle, defaultEditStyle } from '../../ol-ext/style'
-  import { isCollection, isVectorSource } from '../../ol-ext/util'
-  import observableFromOlEvent from '../../rx-ext/from-ol-event'
+  import { interaction, stylesContainer } from '../../mixin'
+  import {
+    createStyle,
+    defaultEditStyle,
+    GEOMETRY_TYPE,
+    initializeFeature,
+    isCollection,
+    isVectorSource,
+  } from '../../ol-ext'
+  import { observableFromOlEvent } from '../../rx-ext'
   import { assert, hasInteraction } from '../../util/assert'
   import { camelCase, mapValues, upperFirst } from '../../util/minilo'
   import mergeDescriptors from '../../util/multi-merge-descriptors'
@@ -29,7 +32,8 @@
       empty: false,
       attrs () {
         return {
-          class: this.$options.name,
+          id: this.vmId,
+          class: this.cmpName,
         }
       },
     },
diff --git a/src/component/feature/feature.vue b/src/component/feature/feature.vue
index 86898270..ba9b7ee2 100644
--- a/src/component/feature/feature.vue
+++ b/src/component/feature/feature.vue
@@ -1,17 +1,16 @@
 <template>
-  <i :id="[$options.name, id].join('-')" :class="[$options.name]" style="display: none !important;">
-    <slot :id="id" :properties="properties" :geometry="geometry" :point="point"/>
+  <i :id="vmId" :class="cmpName" style="display: none !important;">
+    <slot :id="id" :properties="properties" :geometry="geometry" :point="point" />
   </i>
 </template>
 
 <script>
   import Feature from 'ol/Feature'
-  import uuid from 'uuid/v4'
   import { Observable } from 'rxjs'
   import { merge as mergeObs } from 'rxjs/observable'
   import { distinctUntilChanged, map as mapObs, mergeAll } from 'rxjs/operators'
   import { geometryContainer, olCmp, projTransforms, stylesContainer, useMapCmp } from '../../mixin'
-  import { findPointOnSurface, initializeFeature } from '../../ol-ext'
+  import { findPointOnSurface, getFeatureId, initializeFeature, setFeatureId } from '../../ol-ext'
   import { observableFromOlEvent } from '../../rx-ext'
   import { hasFeature, hasMap } from '../../util/assert'
   import { isEqual, plainProps } from '../../util/minilo'
@@ -25,15 +24,6 @@
     name: 'vl-feature',
     mixins: [olCmp, useMapCmp, geometryContainer, stylesContainer, projTransforms],
     props: {
-      /**
-       * Feature identifier.
-       * @type {string|number}
-       * @default UUID
-       */
-      id: {
-        type: [String, Number],
-        default: () => uuid(),
-      },
       /**
        * All feature properties.
        * @type {Object}
@@ -164,8 +154,8 @@
        * @param {string|number} value
        */
       id (value) {
-        if (this.$feature && value !== this.$feature.getId()) {
-          this.$feature.setId(value)
+        if (this.$feature && value !== getFeatureId(this.$feature)) {
+          setFeatureId(this.$feature, value)
         }
       },
       /**
@@ -189,6 +179,10 @@
         enumerable: true,
         get: () => this.$olObject,
       },
+      $geometry: {
+        enumerable: true,
+        get: this.getGeometry,
+      },
       $layer: {
         enumerable: true,
         get: () => this.$services && this.$services.layer,
diff --git a/src/component/fill-style/style.vue b/src/component/fill-style/style.vue
index 0dd28e34..4629bc43 100644
--- a/src/component/fill-style/style.vue
+++ b/src/component/fill-style/style.vue
@@ -1,6 +1,6 @@
 <script>
   import Fill from 'ol/style/Fill'
-  import style from '../../mixin/style'
+  import { style } from '../../mixin'
   import { isEqual } from '../../util/minilo'
 
   const props = {
diff --git a/src/component/geoloc/geoloc.vue b/src/component/geoloc/geoloc.vue
index 4d39481a..50db0687 100644
--- a/src/component/geoloc/geoloc.vue
+++ b/src/component/geoloc/geoloc.vue
@@ -1,5 +1,5 @@
 <template>
-  <i :class="[$options.name]" style="display: none !important;">
+  <i :id="vmId" :class="cmpName" style="display: none !important;">
     <slot :accuracy="accuracy" :altitude="altitude" :altitude-accuracy="altitudeAccuracy"
           :heading="heading" :position="position" :speed="speed">
     </slot>
@@ -71,11 +71,15 @@
        * @private
        */
       createOlObject () {
-        return new Geolocation({
+        const geoloc = new Geolocation({
           tracking: this.tracking,
           trackingOptions: this.trackingOptions,
           projection: this.resolvedDataProjection,
         })
+
+        geoloc.set('id', this.id)
+
+        return geoloc
       },
       /**
        * @return {void}
@@ -103,6 +107,13 @@
       },
     },
     watch: {
+      id (value) {
+        if (!this.$geolocation || value === this.geolocation.get('id')) {
+          return
+        }
+
+        this.$geolocation.set('id', value)
+      },
       /**
        * @param {boolean} value
        */
@@ -126,7 +137,7 @@
     },
     stubVNode: {
       empty () {
-        return this.$options.name
+        return this.vmId
       },
     },
     created () {
diff --git a/src/component/graticule/graticule.vue b/src/component/graticule/graticule.vue
index 3a522997..fb19e309 100644
--- a/src/component/graticule/graticule.vue
+++ b/src/component/graticule/graticule.vue
@@ -1,5 +1,5 @@
 <template>
-  <i :class="$options.name" style="display: none !important;">
+  <i :id="vmId" :class="cmpName" style="display: none !important;">
     <slot name="lon"></slot>
     <slot name="lat"></slot>
     <slot name="stroke"></slot>
@@ -66,7 +66,7 @@
     },
     methods: {
       createOlObject () {
-        return new Graticule({
+        const graticule = new Graticule({
           maxLines: this.maxLines,
           targetSize: this.targetSize,
           showLabels: this.showLabels,
@@ -79,6 +79,10 @@
           latLabelStyle: this._latLabelStyle,
           intervals: this.intervals,
         })
+
+        graticule.id = this.id
+
+        return graticule
       },
       /**
        * @return {Promise} Resolves when initialization completes
@@ -174,6 +178,13 @@
       },
     },
     watch: {
+      id (value) {
+        if (!this.$graticule || value === this.$graticule.id) {
+          return
+        }
+
+        this.$graticule.id = value
+      },
       ...makeWatchers([
         'maxLines',
         'targetSize',
@@ -191,7 +202,8 @@
       empty: false,
       attrs () {
         return {
-          class: this.$options.name,
+          id: this.vmId,
+          class: this.cmpName,
         }
       },
     },
diff --git a/src/component/group-layer/layer.vue b/src/component/group-layer/layer.vue
index b6c514c9..ada4a589 100644
--- a/src/component/group-layer/layer.vue
+++ b/src/component/group-layer/layer.vue
@@ -3,6 +3,7 @@
   import { layer, layersContainer } from '../../mixin'
   import mergeDescriptors from '../../util/multi-merge-descriptors'
 
+  // todo add computed property layerIds - ids of child layers
   export default {
     name: 'vl-layer-group',
     mixins: [layer, layersContainer],
diff --git a/src/component/icon-style/style.vue b/src/component/icon-style/style.vue
index 3aa0184d..a6d816bf 100644
--- a/src/component/icon-style/style.vue
+++ b/src/component/icon-style/style.vue
@@ -1,8 +1,8 @@
 <script>
   import Icon from 'ol/style/Icon'
-  import imageStyle from '../../mixin/image-style'
-  import { isEqual, isEmpty, arrayLengthValidator } from '../../util/minilo'
+  import { imageStyle } from '../../mixin'
   import { assert } from '../../util/assert'
+  import { arrayLengthValidator, isEmpty, isEqual } from '../../util/minilo'
   import { makeWatchers } from '../../util/vue-helpers'
 
   export default {
diff --git a/src/component/image-layer/layer.vue b/src/component/image-layer/layer.vue
index d92c0dd7..a6fd84fb 100644
--- a/src/component/image-layer/layer.vue
+++ b/src/component/image-layer/layer.vue
@@ -1,6 +1,6 @@
 <script>
   import ImageLayer from 'ol/layer/Image'
-  import layer from '../../mixin/layer'
+  import { layer } from '../../mixin'
 
   /**
    * @vueProps
diff --git a/src/component/image-static-source/source.vue b/src/component/image-static-source/source.vue
index b126dee8..5ae7ab35 100644
--- a/src/component/image-static-source/source.vue
+++ b/src/component/image-static-source/source.vue
@@ -1,7 +1,6 @@
 <script>
   import ImageStaticSource from 'ol/source/ImageStatic'
-  import imageSource from '../../mixin/image-source'
-  import withUrl from '../../mixin/with-url'
+  import { imageSource, withUrl } from '../../mixin'
   import { makeWatchers } from '../../util/vue-helpers'
 
   /**
diff --git a/src/component/line-string-geom/geom.vue b/src/component/line-string-geom/geom.vue
index 1471ea70..c706865d 100644
--- a/src/component/line-string-geom/geom.vue
+++ b/src/component/line-string-geom/geom.vue
@@ -1,7 +1,7 @@
 <script>
   import LineString from 'ol/geom/LineString'
-  import geometry from '../../mixin/geometry'
-  import { GEOMETRY_TYPE } from '../../ol-ext/consts'
+  import { geometry } from '../../mixin'
+  import { GEOMETRY_TYPE } from '../../ol-ext'
   import { constant } from '../../util/minilo'
 
   const props = {}
diff --git a/src/component/map/map.vue b/src/component/map/map.vue
index 83cb4cd4..6eaf0c76 100644
--- a/src/component/map/map.vue
+++ b/src/component/map/map.vue
@@ -1,25 +1,32 @@
 <template>
-  <div :class="[$options.name]" :tabindex="tabindex">
+  <div :id="vmId" :class="cmpName" :tabindex="tabindex">
     <slot/>
   </div>
 </template>
 
 <script>
+  import Collection from 'ol/Collection'
   import { defaults as createDefaultControls } from 'ol/control'
   import { defaults as createDefaultInteractions } from 'ol/interaction'
   import VectorLayer from 'ol/layer/Vector'
-  import Collection from 'ol/Collection'
   import Map from 'ol/Map'
   import VectorSource from 'ol/source/Vector'
   import View from 'ol/View'
   import { merge as mergeObs } from 'rxjs/observable'
   import { distinctUntilChanged, map as mapObs, throttleTime } from 'rxjs/operators'
   import Vue from 'vue'
-  import { olCmp, overlaysContainer, layersContainer, interactionsContainer, featuresContainer, projTransforms } from '../../mixin'
-  import { initializeInteraction, setMapDataProjection } from '../../ol-ext'
+  import {
+    featuresContainer,
+    interactionsContainer,
+    layersContainer,
+    olCmp,
+    overlaysContainer,
+    projTransforms,
+  } from '../../mixin'
+  import { getMapId, initializeInteraction, setMapDataProjection, setMapId } from '../../ol-ext'
   import { observableFromOlEvent } from '../../rx-ext'
   import { hasMap, hasView } from '../../util/assert'
-  import { isEqual } from '../../util/minilo'
+  import { isEqual, isPlainObject } from '../../util/minilo'
   import mergeDescriptors from '../../util/multi-merge-descriptors'
   import { makeWatchers } from '../../util/vue-helpers'
 
@@ -41,21 +48,21 @@
       /**
        * Options for default controls added to the map by default. Set to `false` to disable all map controls. Object
        * value is used to configure controls.
-       * @type {Object|boolean}
+       * @type {Object|boolean|Collection}
        * @todo remove when vl-control-* components will be ready
        */
       defaultControls: {
-        type: [Object, Boolean],
+        type: [Object, Boolean, Collection],
         default: true,
       },
       /**
        * Options for default interactions added to the map by default. Object
        * value is used to configure default interactions.
-       * @type {Object|boolean}
+       * @type {Object|boolean|Collection}
        */
       defaultInteractions: {
-        type: [Object, Boolean],
-        default: () => ({}),
+        type: [Object, Boolean, Collection],
+        default: true,
       },
       /**
        * The element to listen to keyboard events on. For example, if this option is set to `document` the keyboard
@@ -137,12 +144,13 @@
           keyboardEventTarget: this.keyboardEventTarget,
           maxTilesLoading: this.maxTilesLoading,
           controls: this._controlsCollection,
-          interactions: this._interactionsCollection,
-          layers: this._layersCollection,
-          overlays: this._overlaysCollection,
-          view: this._view,
+          interactions: this.$interactionsCollection,
+          layers: this.$layersCollection,
+          overlays: this.$overlaysCollection,
+          view: this.$view,
         })
 
+        setMapId(map, this.id)
         setMapDataProjection(map, this.dataProjection)
         this._featuresOverlay.setMap(map)
 
@@ -251,6 +259,12 @@
           this.$map.setView(view)
         }
       },
+      /**
+       * @return {module:ol/View~View}
+       */
+      getView () {
+        return this._view
+      },
       /**
        * @return {void}
        * @protected
@@ -318,6 +332,13 @@
       ], () => function () {
         this.scheduleRecreate()
       }),
+      id (value) {
+        if (!this.$map || value === getMapId(this.$map)) {
+          return
+        }
+
+        setMapId(this.$map, value)
+      },
       controls (value) {
         if (value === false) {
           this._controlsCollection.clear()
@@ -332,7 +353,7 @@
         if (this._featuresOverlay == null) return
 
         this._featuresOverlay.setSource(new VectorSource({
-          features: this._featuresCollection,
+          features: this.$featuresCollection,
           wrapX: value,
         }))
       },
@@ -346,18 +367,30 @@
     created () {
       this._view = new View()
       // todo make controls handling like with interactions
-      this._controlsCollection = this.defaultControls !== false
-        ? createDefaultControls(typeof this.defaultControls === 'object' ? this.defaultControls : undefined)
-        : new Collection()
+      if (this.defaultControls instanceof Collection) {
+        this._controlsCollection = this.defaultControls
+      } else if (this.defaultControls !== false) {
+        this._controlsCollection = createDefaultControls(
+          isPlainObject(this.defaultControls)
+            ? this.defaultControls
+            : undefined,
+        )
+      }
       // todo initialize without interactions and provide vl-interaction-default component
-      this._interactionsCollection = this.defaultInteractions !== false
-        ? createDefaultInteractions(typeof this.defaultInteractions === 'object' ? this.defaultInteractions : undefined)
-        : new Collection()
+      if (this.defaultInteractions instanceof Collection) {
+        this._interactionsCollection = this.defaultInteractions
+      } else if (this.defaultInteractions !== false) {
+        this._interactionsCollection = createDefaultInteractions(
+          isPlainObject(this.defaultInteractions)
+            ? this.defaultInteractions
+            : undefined,
+        )
+      }
       this._interactionsCollection.forEach(interaction => initializeInteraction(interaction))
       // prepare default overlay
       this._featuresOverlay = new VectorLayer({
         source: new VectorSource({
-          features: this._featuresCollection,
+          features: this.$featuresCollection,
           wrapX: this.wrapX,
         }),
       })
@@ -382,7 +415,7 @@
        */
       $view: {
         enumerable: true,
-        get: () => this._view,
+        get: this.getView,
       },
     })
   }
diff --git a/src/component/map/view.vue b/src/component/map/view.vue
index 2195aae5..4cfcdd43 100644
--- a/src/component/map/view.vue
+++ b/src/component/map/view.vue
@@ -1,5 +1,5 @@
 <template>
-  <i :class="[$options.name]" style="display: none !important;">
+  <i :id="vmId" :class="cmpName" style="display: none !important;">
     <slot :center="currentCenter" :zoom="currentZoom" :resolution="currentResolution" :rotation="currentRotation"/>
   </i>
 </template>
@@ -180,7 +180,7 @@
        * @protected
        */
       createOlObject () {
-        return new View({
+        const view = new View({
           center: this.pointToViewProj(this.center),
           constrainRotation: this.constrainRotation,
           enableRotation: this.enableRotation,
@@ -196,6 +196,10 @@
           zoom: this.zoom,
           zoomFactor: this.zoomFactor,
         })
+
+        view.set('id', this.id)
+
+        return view
       },
       /**
        * @see {@link https://openlayers.org/en/latest/apidoc/module-ol_View-View.html#fit}
@@ -250,6 +254,13 @@
       },
     },
     watch: {
+      id (value) {
+        if (!this.$view || value === this.$view.get('id')) {
+          return
+        }
+
+        this.$view.set('id', value)
+      },
       center (value) {
         if (!this.$view || this.$view.getAnimating()) return
 
@@ -309,7 +320,7 @@
     },
     stubVNode: {
       empty () {
-        return this.$options.name
+        return this.vmId
       },
     },
     created () {
diff --git a/src/component/mapbox-source/source.vue b/src/component/mapbox-source/source.vue
index 8123cfee..1189fc9f 100644
--- a/src/component/mapbox-source/source.vue
+++ b/src/component/mapbox-source/source.vue
@@ -1,6 +1,6 @@
 <script>
-  import xyzSource from '../../mixin/xyz-source'
-  import { EPSG_3857, TILE_FORMAT } from '../../ol-ext/consts'
+  import { xyzSource } from '../../mixin'
+  import { EPSG_3857, TILE_FORMAT } from '../../ol-ext'
   import { coalesce } from '../../util/minilo'
 
   const MAPBOX_URL_TEMPLATE = 'https://{a-c}.tiles.mapbox.com/v4/{mapId}/{z}/{x}/{y}{tileNameSuffix}.{tileFormat}?access_token={accessToken}'
diff --git a/src/component/modify-interaction/interaction.vue b/src/component/modify-interaction/interaction.vue
index b59f1be7..49e70a14 100644
--- a/src/component/modify-interaction/interaction.vue
+++ b/src/component/modify-interaction/interaction.vue
@@ -1,11 +1,9 @@
 <script>
   import { altKeyOnly, always, primaryAction } from 'ol/events/condition'
   import ModifyInteraction from 'ol/interaction/Modify'
-  import interaction from '../../mixin/interaction'
-  import stylesContainer from '../../mixin/styles-container'
-  import { createStyle, defaultEditStyle } from '../../ol-ext/style'
-  import { isCollection, isVectorSource } from '../../ol-ext/util'
-  import observableFromOlEvent from '../../rx-ext/from-ol-event'
+  import { interaction, stylesContainer } from '../../mixin'
+  import { createStyle, defaultEditStyle, isCollection, isVectorSource } from '../../ol-ext'
+  import { observableFromOlEvent } from '../../rx-ext'
   import { assert, hasInteraction } from '../../util/assert'
   import { mapValues } from '../../util/minilo'
   import mergeDescriptors from '../../util/multi-merge-descriptors'
@@ -23,7 +21,8 @@
       empty: false,
       attrs () {
         return {
-          class: this.$options.name,
+          id: this.vmId,
+          class: this.cmpName,
         }
       },
     },
diff --git a/src/component/multi-line-string-geom/geom.vue b/src/component/multi-line-string-geom/geom.vue
index 694a9f83..8102bff6 100644
--- a/src/component/multi-line-string-geom/geom.vue
+++ b/src/component/multi-line-string-geom/geom.vue
@@ -1,7 +1,7 @@
 <script>
   import MultiLineString from 'ol/geom/MultiLineString'
-  import geometry from '../../mixin/geometry'
-  import { GEOMETRY_TYPE } from '../../ol-ext/consts'
+  import { geometry } from '../../mixin'
+  import { GEOMETRY_TYPE } from '../../ol-ext'
   import { constant } from '../../util/minilo'
 
   const props = {}
diff --git a/src/component/multi-point-geom/geom.vue b/src/component/multi-point-geom/geom.vue
index 96274d83..678c7ce2 100644
--- a/src/component/multi-point-geom/geom.vue
+++ b/src/component/multi-point-geom/geom.vue
@@ -1,7 +1,7 @@
 <script>
   import MultiPoint from 'ol/geom/MultiPoint'
-  import geometry from '../../mixin/geometry'
-  import { GEOMETRY_TYPE } from '../../ol-ext/consts'
+  import { geometry } from '../../mixin'
+  import { GEOMETRY_TYPE } from '../../ol-ext'
   import { constant } from '../../util/minilo'
 
   const props = {}
diff --git a/src/component/multi-polygon-geom/geom.vue b/src/component/multi-polygon-geom/geom.vue
index a0f7926d..e5151c81 100644
--- a/src/component/multi-polygon-geom/geom.vue
+++ b/src/component/multi-polygon-geom/geom.vue
@@ -1,7 +1,7 @@
 <script>
   import MultiPolygon from 'ol/geom/MultiPolygon'
-  import geometry from '../../mixin/geometry'
-  import { GEOMETRY_TYPE } from '../../ol-ext/consts'
+  import { geometry } from '../../mixin'
+  import { GEOMETRY_TYPE } from '../../ol-ext'
   import { constant } from '../../util/minilo'
 
   const props = {}
diff --git a/src/component/osm-source/source.vue b/src/component/osm-source/source.vue
index 3f5a3a0b..96db5696 100644
--- a/src/component/osm-source/source.vue
+++ b/src/component/osm-source/source.vue
@@ -1,6 +1,6 @@
 <script>
   import OSMSource from 'ol/source/OSM'
-  import xyzSource from '../../mixin/xyz-source'
+  import { xyzSource } from '../../mixin'
 
   const OSM_ATTRIBUTIONS = '&copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors.'
   const OSM_URL_TEMPLATE = 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
diff --git a/src/component/overlay/overlay.vue b/src/component/overlay/overlay.vue
index f462c51a..25b182df 100644
--- a/src/component/overlay/overlay.vue
+++ b/src/component/overlay/overlay.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :id="[$options.name, id].join('-')" :class="classes">
+  <div :id="vmId" :class="classes">
     <slot :id="id" :position="position" :offset="offset" :positioning="positioning"/>
   </div>
 </template>
@@ -7,18 +7,13 @@
 <script>
   import Overlay from 'ol/Overlay'
   import { merge as mergeObs } from 'rxjs/observable'
-  import uuid from 'uuid/v4'
   import { olCmp, projTransforms, useMapCmp } from '../../mixin'
-  import { initializeOverlay, OVERLAY_POSITIONING, setOverlayId } from '../../ol-ext'
+  import { getOverlayId, initializeOverlay, OVERLAY_POSITIONING, setOverlayId } from '../../ol-ext'
   import { observableFromOlChangeEvent } from '../../rx-ext'
   import { hasOverlay } from '../../util/assert'
   import { isEqual, identity } from '../../util/minilo'
 
   const props = {
-    id: {
-      type: [String, Number],
-      default: () => uuid(),
-    },
     offset: {
       type: Array,
       default: () => [0, 0],
@@ -71,7 +66,7 @@
     },
     classes () {
       return [
-        this.$options.name,
+        this.cmpName,
         this.visible ? 'visible' : undefined,
       ].filter(identity)
     },
@@ -140,7 +135,7 @@
 
   const watch = {
     id (value) {
-      if (!this.$overlay) return
+      if (!this.$overlay || value === getOverlayId(this.$overlay)) return
 
       setOverlayId(this.$overlay, value)
     },
diff --git a/src/component/point-geom/geom.vue b/src/component/point-geom/geom.vue
index 60c35048..183e623d 100644
--- a/src/component/point-geom/geom.vue
+++ b/src/component/point-geom/geom.vue
@@ -1,7 +1,7 @@
 <script>
   import Point from 'ol/geom/Point'
-  import geometry from '../../mixin/geometry'
-  import { GEOMETRY_TYPE } from '../../ol-ext/consts'
+  import { geometry } from '../../mixin'
+  import { GEOMETRY_TYPE } from '../../ol-ext'
   import { constant } from '../../util/minilo'
 
   const props = {
diff --git a/src/component/polygon-geom/geom.vue b/src/component/polygon-geom/geom.vue
index 3549d094..b0d4d7b7 100644
--- a/src/component/polygon-geom/geom.vue
+++ b/src/component/polygon-geom/geom.vue
@@ -1,7 +1,7 @@
 <script>
   import Polygon from 'ol/geom/Polygon'
-  import geometry from '../../mixin/geometry'
-  import { GEOMETRY_TYPE } from '../../ol-ext/consts'
+  import { geometry } from '../../mixin'
+  import { GEOMETRY_TYPE } from '../../ol-ext'
   import { constant } from '../../util/minilo'
 
   const props = {}
diff --git a/src/component/reg-shape-style/style.vue b/src/component/reg-shape-style/style.vue
index 763389d0..97cc0a6c 100644
--- a/src/component/reg-shape-style/style.vue
+++ b/src/component/reg-shape-style/style.vue
@@ -1,8 +1,7 @@
 <script>
-  import Vue from 'vue'
   import RegularShape from 'ol/style/RegularShape'
-  import imageStyle from '../../mixin/image-style'
-  import withFillStrokeStyle from '../../mixin/with-fill-stroke-style'
+  import Vue from 'vue'
+  import { imageStyle, withFillStrokeStyle } from '../../mixin'
   import { isEqual } from '../../util/minilo'
   import mergeDescriptors from '../../util/multi-merge-descriptors'
 
diff --git a/src/component/select-interaction/interaction.vue b/src/component/select-interaction/interaction.vue
index 87c39a8b..e23fc5cc 100644
--- a/src/component/select-interaction/interaction.vue
+++ b/src/component/select-interaction/interaction.vue
@@ -1,5 +1,5 @@
 <template>
-  <i :class="[$options.name]" style="display: none !important;">
+  <i :id="vmId" :class="cmpName" style="display: none !important;">
     <slot :features="featuresDataProj"/>
   </i>
 </template>
@@ -26,7 +26,8 @@
       empty: false,
       attrs () {
         return {
-          class: this.$options.name,
+          id: this.vmId,
+          class: this.cmpName,
         }
       },
     },
@@ -138,7 +139,7 @@
        */
       createInteraction () {
         return new SelectInteraction({
-          features: this._featuresCollection,
+          features: this.$featuresCollection,
           multi: this.multi,
           wrapX: this.wrapX,
           filter: this.filter,
@@ -312,11 +313,11 @@
   function subscribeToInteractionChanges () {
     hasInteraction(this)
 
-    const select = observableFromOlEvent(this._featuresCollection, 'add')
+    const select = observableFromOlEvent(this.$featuresCollection, 'add')
       .pipe(
         mapOp(({ element }) => ({ type: 'select', feature: element }))
       )
-    const unselect = observableFromOlEvent(this._featuresCollection, 'remove')
+    const unselect = observableFromOlEvent(this.$featuresCollection, 'remove')
       .pipe(
         mapOp(({ element }) => ({ type: 'unselect', feature: element }))
       )
diff --git a/src/component/snap-interaction/interaction.vue b/src/component/snap-interaction/interaction.vue
index c5e5bb9b..082af1c2 100644
--- a/src/component/snap-interaction/interaction.vue
+++ b/src/component/snap-interaction/interaction.vue
@@ -1,6 +1,6 @@
 <script>
   import SnapInteraction from 'ol/interaction/Snap'
-  import interaction from '../../mixin/interaction'
+  import { interaction } from '../../mixin'
   import { makeWatchers } from '../../util/vue-helpers'
 
   /**
diff --git a/src/component/sputnik-source/source.vue b/src/component/sputnik-source/source.vue
index 1a5f6b36..b283c0ce 100644
--- a/src/component/sputnik-source/source.vue
+++ b/src/component/sputnik-source/source.vue
@@ -1,5 +1,5 @@
 <script>
-  import xyzSource from '../../mixin/xyz-source'
+  import { xyzSource } from '../../mixin'
 
   /**
    * Layer source to work with Sputnik.ru tile server.
diff --git a/src/component/stamen-source/source.vue b/src/component/stamen-source/source.vue
index b20522ec..50a0b91d 100644
--- a/src/component/stamen-source/source.vue
+++ b/src/component/stamen-source/source.vue
@@ -1,6 +1,6 @@
 <script>
   import StamenSource from 'ol/source/Stamen'
-  import xyzSource from '../../mixin/xyz-source'
+  import { xyzSource } from '../../mixin'
 
   const props = {
     /**
diff --git a/src/component/stroke-style/style.vue b/src/component/stroke-style/style.vue
index c2afe407..9aac5880 100644
--- a/src/component/stroke-style/style.vue
+++ b/src/component/stroke-style/style.vue
@@ -1,6 +1,6 @@
 <script>
   import Stroke from 'ol/style/Stroke'
-  import style from '../../mixin/style'
+  import { style } from '../../mixin'
   import { isEqual } from '../../util/minilo'
 
   const props = {
diff --git a/src/component/style-box/style.vue b/src/component/style-box/style.vue
index fc00d749..4e716630 100644
--- a/src/component/style-box/style.vue
+++ b/src/component/style-box/style.vue
@@ -1,10 +1,9 @@
 <script>
-  import Vue from 'vue'
   import Style from 'ol/style/Style'
-  import style from '../../mixin/style'
-  import withFillStrokeStyle from '../../mixin/with-fill-stroke-style'
-  import mergeDescriptors from '../../util/multi-merge-descriptors'
+  import Vue from 'vue'
+  import { style, withFillStrokeStyle } from '../../mixin'
   import { isEqual } from '../../util/minilo'
+  import mergeDescriptors from '../../util/multi-merge-descriptors'
 
   /**
    * Style box component.
@@ -125,22 +124,5 @@
     props,
     methods,
     watch,
-    created () {
-      /**
-       * @type {Image|undefined}
-       * @private
-       */
-      this._image = undefined
-      /**
-       * @type {Text|undefined}
-       * @private
-       */
-      this._text = undefined
-      /**
-       * @type {Geometry|undefined}
-       * @private
-       */
-      this._geometry = undefined
-    },
   }
 </script>
diff --git a/src/component/style-func/style.vue b/src/component/style-func/style.vue
index af746dc2..c0b04586 100644
--- a/src/component/style-func/style.vue
+++ b/src/component/style-func/style.vue
@@ -1,6 +1,5 @@
 <script>
-  import style from '../../mixin/style'
-  import stylesContainer from '../../mixin/styles-container'
+  import { style, stylesContainer } from '../../mixin'
   import { hasMap } from '../../util/assert'
   import { warn } from '../../util/log'
   import { isFunction, noop } from '../../util/minilo'
@@ -124,7 +123,8 @@
       empty: false,
       attrs () {
         return {
-          class: this.$options.name,
+          id: this.vmId,
+          class: this.cmpName,
         }
       },
     },
diff --git a/src/component/text-style/style.vue b/src/component/text-style/style.vue
index 5a81e62c..9fed04a5 100644
--- a/src/component/text-style/style.vue
+++ b/src/component/text-style/style.vue
@@ -1,8 +1,7 @@
 <script>
   import Text from 'ol/style/Text'
-  import style from '../../mixin/style'
+  import { style, withFillStrokeStyle } from '../../mixin'
   import { isEqual } from '../../util/minilo'
-  import withFillStrokeStyle from '../../mixin/with-fill-stroke-style'
   import mergeDescriptors from '../../util/multi-merge-descriptors'
 
   const props = {
@@ -157,7 +156,8 @@
       empty: false,
       attrs () {
         return {
-          class: this.$options.name,
+          id: this.vmId,
+          class: this.cmpName,
         }
       },
     },
diff --git a/src/component/tile-layer/layer.vue b/src/component/tile-layer/layer.vue
index c751afa8..0a97e9e3 100644
--- a/src/component/tile-layer/layer.vue
+++ b/src/component/tile-layer/layer.vue
@@ -1,6 +1,6 @@
 <script>
   import TileLayer from 'ol/layer/Tile'
-  import layer from '../../mixin/layer'
+  import { layer } from '../../mixin'
 
   /**
    * @vueProps
diff --git a/src/component/vector-layer/layer.vue b/src/component/vector-layer/layer.vue
index 25776fe3..78ae4278 100644
--- a/src/component/vector-layer/layer.vue
+++ b/src/component/vector-layer/layer.vue
@@ -1,6 +1,6 @@
 <script>
   import VectorLayer from 'ol/layer/Vector'
-  import vectorLayer from '../../mixin/vector-layer'
+  import { vectorLayer } from '../../mixin'
 
   const RENDER_MODES = ['vector', 'image']
 
diff --git a/src/component/vector-source/source.vue b/src/component/vector-source/source.vue
index 7b3a3ad1..c346e8b3 100644
--- a/src/component/vector-source/source.vue
+++ b/src/component/vector-source/source.vue
@@ -1,9 +1,8 @@
 <script>
   import VectorSource from 'ol/source/Vector'
-  import { fetch } from 'whatwg-fetch'
   import { vectorSource } from '../../mixin'
   import { createGeoJsonFmt, getFeatureId, initializeFeature, loadingAll, transform } from '../../ol-ext'
-  import { constant, difference, isEmpty, isFinite, isFunction, stubArray } from '../../util/minilo'
+  import { constant, difference, isEqual, isFinite, isFunction, stubArray } from '../../util/minilo'
   import { makeWatchers } from '../../util/vue-helpers'
 
   export default {
@@ -25,7 +24,6 @@
        */
       loaderFactory: {
         type: Function,
-        default: defaultLoaderFactory,
       },
       /**
        * Source format factory
@@ -56,31 +54,34 @@
     },
     computed: {
       urlFunc () {
-        if (!this.url) {
-          return
-        }
+        if (!this.url) return
 
         let url = this.url
         if (!isFunction(url)) {
           url = constant(this.url)
         }
-        // wrap strategy function to transform map view projection to source projection
-        return (extent, resolution, projection) => url(
-          transformExtent(extent, projection, this.resolvedDataProjection),
-          resolution,
-          this.resolvedDataProjection,
-        )
+
+        return (extent, resolution, projection) => {
+          extent = transformExtent(extent, projection, this.resolvedDataProjection)
+          projection = this.resolvedDataProjection
+
+          return url(extent, resolution, projection)
+        }
       },
       loaderFunc () {
-        const loader = this.loaderFactory(this)
-        // wrap strategy function to transform map view projection to source projection
+        if (!this.loaderFactory) return
+
+        const loader = this.loaderFactory()
+
         return async (extent, resolution, projection) => {
-          const features = await loader(
+          let features = await loader(
             transformExtent(extent, projection, this.resolvedDataProjection),
             resolution,
             this.resolvedDataProjection,
           )
-
+          if (!Array.isArray(features)) {
+            features = this.readSourceData(features)
+          }
           if (Array.isArray(features)) {
             this.addFeatures(features)
           }
@@ -101,7 +102,7 @@
       createSource () {
         return new VectorSource({
           attributions: this.attributions,
-          features: this._featuresCollection,
+          features: this.$featuresCollection,
           projection: this.resolvedDataProjection,
           loader: this.loaderFunc,
           useSpatialIndex: this.useSpatialIndex,
@@ -129,19 +130,27 @@
         this.clear()
         this::vectorSource.methods.unmount()
       },
+      /**
+       * @param {mixed} data
+       * @returns {Array<FeatureLike>|Array<Feature>}
+       */
+      readSourceData (data) {
+        return this.dataFormat.readFeatures(data, {
+          featureProjection: this.viewProjection,
+          dataProjection: this.resolvedDataProjection,
+        })
+      },
     },
     watch: {
       features: {
         deep: true,
         handler (features) {
-          if (!this.$source) return
+          if (!this.$source || isEqual(features, this.featuresDataProj)) return
 
-          features = features.slice().map(feature => initializeFeature({
-            ...feature,
-          }))
+          features = features.map(feature => initializeFeature({ ...feature }))
           this.addFeatures(features)
 
-          const forRemove = difference(this.getFeatures(), features, (a, b) => getFeatureId(a) === getFeatureId(b))
+          const forRemove = difference(this.featuresDataProj, features, (a, b) => getFeatureId(a) === getFeatureId(b))
           this.removeFeatures(forRemove)
         },
       },
@@ -173,40 +182,6 @@
     return createGeoJsonFmt()
   }
 
-  /**
-   * Default loader for provided URL.
-   *
-   * @param vm
-   * @return {Function}
-   */
-  function defaultLoaderFactory (vm) {
-    return (extent, resolution, projection) => {
-      let url = vm.$source.getUrl()
-      if (isFunction(url)) {
-        url = url(extent, resolution, projection)
-      }
-
-      if (isEmpty(url)) {
-        return []
-      }
-
-      return fetch(url, {
-        credentials: 'same-origin',
-        mode: 'cors',
-      }).then(response => response.text())
-        .then(text => {
-          if (!vm.$source) {
-            return []
-          }
-
-          return vm.$source.getFormat().readFeatures(text, {
-            featureProjection: vm.viewProjection,
-            dataProjection: vm.resolvedDataProjection,
-          })
-        })
-    }
-  }
-
   function transformExtent (extent, sourceProj, destProj) {
     extent = extent.slice()
     if (isFinite(extent[0]) && isFinite(extent[1])) {
diff --git a/src/component/vector-tile-layer/layer.vue b/src/component/vector-tile-layer/layer.vue
index 9c0521d0..35a95ebb 100644
--- a/src/component/vector-tile-layer/layer.vue
+++ b/src/component/vector-tile-layer/layer.vue
@@ -1,6 +1,6 @@
 <script>
   import VectorTileLayer from 'ol/layer/VectorTile'
-  import vectorLayer from '../../mixin/vector-layer'
+  import { vectorLayer } from '../../mixin'
 
   const RENDER_MODES = ['vector', 'image', 'hybrid']
 
diff --git a/src/component/vector-tile-source/source.vue b/src/component/vector-tile-source/source.vue
index 6a793b7b..93376855 100644
--- a/src/component/vector-tile-source/source.vue
+++ b/src/component/vector-tile-source/source.vue
@@ -1,7 +1,7 @@
 <script>
   import VectorTileSource from 'ol/source/VectorTile'
-  import tileSource from '../../mixin/tile-source'
-  import { createMvtFmt } from '../../ol-ext/format'
+  import { tileSource } from '../../mixin'
+  import { createMvtFmt } from '../../ol-ext'
 
   export default {
     name: 'vl-source-vector-tile',
diff --git a/src/component/wmts-source/source.vue b/src/component/wmts-source/source.vue
index 04c3ae00..c2d63f31 100644
--- a/src/component/wmts-source/source.vue
+++ b/src/component/wmts-source/source.vue
@@ -1,12 +1,18 @@
 <script>
   import WMTSSource from 'ol/source/WMTS'
   import WMTSTileGrid from 'ol/tilegrid/WMTS'
-  import { makeWatchers } from '../../util/vue-helpers'
-  import tileSource from '../../mixin/tile-source'
-  import { EXTENT_CORNER, WMTS_FORMAT, WMTS_REQUEST_ENCODING, WMTS_VERSION } from '../../ol-ext/consts'
-  import { createExtentFromProjection, getExtentCorner } from '../../ol-ext/extent'
-  import { resolutionsFromExtent } from '../../ol-ext/tile-grid'
+  import { tileSource } from '../../mixin'
+  import {
+    createExtentFromProjection,
+    EXTENT_CORNER,
+    getExtentCorner,
+    resolutionsFromExtent,
+    WMTS_FORMAT,
+    WMTS_REQUEST_ENCODING,
+    WMTS_VERSION,
+  } from '../../ol-ext'
   import { range } from '../../util/minilo'
+  import { makeWatchers } from '../../util/vue-helpers'
 
   export default {
     name: 'vl-source-wmts',
diff --git a/src/mixin/features-container.js b/src/mixin/features-container.js
index b5e8ffb3..66a3f073 100644
--- a/src/mixin/features-container.js
+++ b/src/mixin/features-container.js
@@ -2,7 +2,7 @@ import Collection from 'ol/Collection'
 import Feature from 'ol/Feature'
 import Vue from 'vue'
 import { merge as mergeObs } from 'rxjs/observable'
-import { tap, debounceTime } from 'rxjs/operators'
+import { debounceTime } from 'rxjs/operators'
 import { getFeatureId, getObjectUid, initializeFeature, mergeFeatures } from '../ol-ext'
 import { instanceOf } from '../util/assert'
 import { forEach, isPlainObject } from '../util/minilo'
@@ -52,7 +52,7 @@ export default {
 
       const foundFeature = this.getFeatureById(getFeatureId(feature))
       if (foundFeature == null) {
-        this._featuresCollection.push(feature)
+        this.$featuresCollection.push(feature)
       } else {
         mergeFeatures(foundFeature, feature)
       }
@@ -73,13 +73,13 @@ export default {
       if (!feature) return
 
       initializeFeature(feature)
-      this._featuresCollection.remove(feature)
+      this.$featuresCollection.remove(feature)
     },
     /**
      * @return {void}
      */
     clearFeatures () {
-      this._featuresCollection.clear()
+      this.$featuresCollection.clear()
     },
     /**
      * @param {string|number} featureId
@@ -87,7 +87,7 @@ export default {
      */
     getFeatureById (featureId) {
       // todo add hash {featureId => featureIdx, ....}
-      return this._featuresCollection.getArray().find(feature => {
+      return this.$featuresCollection.getArray().find(feature => {
         return getFeatureId(feature) === featureId
       })
     },
@@ -95,7 +95,7 @@ export default {
      * @return {Feature[]}
      */
     getFeatures () {
-      return this._featuresCollection.getArray()
+      return this.$featuresCollection.getArray()
     },
     /**
      * @return {Collection<Feature>>}
@@ -123,39 +123,53 @@ export default {
     this._featuresCollection = new Collection()
     this._featureSubs = {}
 
-    const add = observableFromOlEvent(this._featuresCollection, 'add')
-      .pipe(
-        tap(({ element }) => {
-          const elementUid = getObjectUid(element)
-          const propChanges = observableFromOlEvent(element, 'propertychange')
-          const otherChanges = observableFromOlEvent(element, 'change')
-          const featureChanges = mergeObs(propChanges, otherChanges).pipe(
-            debounceTime(1000 / 60)
-          )
-
-          this._featureSubs[elementUid] = this.subscribeTo(featureChanges, () => {
-            ++this.rev
-          })
-        })
-      )
-    const remove = observableFromOlEvent(this._featuresCollection, 'remove')
-      .pipe(
-        tap(({ element }) => {
-          const elementUid = getObjectUid(element)
-          if (!this._featureSubs[elementUid]) {
-            return
-          }
-
-          this.unsubscribe(this._featureSubs[elementUid])
-          delete this._featureSubs[elementUid]
-        })
-      )
-    const events = mergeObs(add, remove)
-
-    this.subscribeTo(events, ({ type, element }) => {
+    this::defineServices()
+    this::subscribeToCollectionEvents()
+  },
+}
+
+function defineServices () {
+  Object.defineProperties(this, {
+    $featuresCollection: {
+      enumerable: true,
+      get: this.getFeaturesCollection,
+    },
+  })
+}
+
+function subscribeToCollectionEvents () {
+  const adds = observableFromOlEvent(this.$featuresCollection, 'add')
+  this.subscribeTo(adds, ({ element }) => {
+    const elementUid = getObjectUid(element)
+    const propChanges = observableFromOlEvent(element, 'propertychange')
+    const otherChanges = observableFromOlEvent(element, 'change')
+    const featureChanges = mergeObs(propChanges, otherChanges).pipe(
+      debounceTime(1000 / 60)
+    )
+
+    this._featureSubs[elementUid] = this.subscribeTo(featureChanges, () => {
       ++this.rev
+    })
+
+    ++this.rev
 
-      this.$emit(type + ':feature', element)
+    this.$nextTick(() => {
+      this.$emit('add:feature', element)
     })
-  },
+  })
+
+  const removes = observableFromOlEvent(this.$featuresCollection, 'remove')
+  this.subscribeTo(removes, ({ element }) => {
+    const elementUid = getObjectUid(element)
+    if (this._featureSubs[elementUid]) {
+      this.unsubscribe(this._featureSubs[elementUid])
+      delete this._featureSubs[elementUid]
+    }
+
+    ++this.rev
+
+    this.$nextTick(() => {
+      this.$emit('remove:feature', element)
+    })
+  })
 }
diff --git a/src/mixin/geometry-container.js b/src/mixin/geometry-container.js
index ccf6a833..36c7c193 100644
--- a/src/mixin/geometry-container.js
+++ b/src/mixin/geometry-container.js
@@ -45,6 +45,10 @@ export default {
       }
 
       if (geom !== this._geometry) {
+        /**
+         * @type {module:ol/geom/Geometry~Geometry|undefined}
+         * @private
+         */
         this._geometry = geom
       }
 
@@ -54,18 +58,4 @@ export default {
       }
     },
   },
-  created () {
-    /**
-     * @type {module:ol/geom/Geometry~Geometry|undefined}
-     * @private
-     */
-    this._geometry = undefined
-
-    Object.defineProperties(this, {
-      $geometry: {
-        enumerable: true,
-        get: this.getGeometry,
-      },
-    })
-  },
 }
diff --git a/src/mixin/geometry.js b/src/mixin/geometry.js
index 287958fb..b594a10c 100644
--- a/src/mixin/geometry.js
+++ b/src/mixin/geometry.js
@@ -1,5 +1,12 @@
 import { distinctUntilChanged, map as mapObs, throttleTime } from 'rxjs/operators'
-import { boundingExtent, findPointOnSurface, transforms } from '../ol-ext'
+import {
+  boundingExtent,
+  findPointOnSurface,
+  getGeometryId,
+  initializeGeometry,
+  setGeometryId,
+  transforms,
+} from '../ol-ext'
 import { observableFromOlEvent } from '../rx-ext'
 import { hasGeometry } from '../util/assert'
 import { isEqual } from '../util/minilo'
@@ -76,8 +83,12 @@ export default {
      * @return {module:ol/geom/Geometry~Geometry|Promise<module:ol/geom/Geometry~Geometry>}
      * @protected
      */
-    createOlObject () {
-      return this.createGeometry()
+    async createOlObject () {
+      const geometry = await this.createGeometry()
+
+      initializeGeometry(geometry, this.id)
+
+      return geometry
     },
     /**
      * @return {module:ol/geom/Geometry~Geometry|Promise<module:ol/geom/Geometry~Geometry>}
@@ -183,6 +194,13 @@ export default {
     },
   },
   watch: {
+    id (value) {
+      if (!this.$geometry || value === getGeometryId(this.$geometry)) {
+        return
+      }
+
+      setGeometryId(this.$geometry, value)
+    },
     coordinates (value) {
       if (!this.$geometry || !this.$view) return
 
@@ -208,7 +226,7 @@ export default {
   },
   stubVNode: {
     empty () {
-      return this.$options.name
+      return this.vmId()
     },
   },
   created () {
@@ -256,7 +274,7 @@ function defineServices () {
 function subscribeToGeomChanges () {
   hasGeometry(this)
 
-  const ft = 100
+  const ft = 1000 / 60
   const changes = observableFromOlEvent(
     this.$geometry,
     'change',
@@ -275,7 +293,10 @@ function subscribeToGeomChanges () {
 
   this.subscribeTo(changes, ({ prop, value }) => {
     ++this.rev
-    this.$emit(`update:${prop}`, value)
+
+    this.$nextTick(() => {
+      this.$emit(`update:${prop}`, value)
+    })
   })
 }
 
diff --git a/src/mixin/ident-map.js b/src/mixin/ident-map.js
index d6939f7a..91cfcb89 100644
--- a/src/mixin/ident-map.js
+++ b/src/mixin/ident-map.js
@@ -38,6 +38,16 @@ export default {
   created () {
     this::initIdentityMap()
   },
+  watch: {
+    ident (value, prev) {
+      if (prev && this.$identityMap.has(prev)) {
+        this.$identityMap.unset(prev)
+      }
+      if (value && !this.$identityMap.has(value)) {
+        this.$identityMap.set(value)
+      }
+    },
+  },
 }
 
 /**
diff --git a/src/mixin/image-source.js b/src/mixin/image-source.js
index 6426470f..5481de24 100644
--- a/src/mixin/image-source.js
+++ b/src/mixin/image-source.js
@@ -1,7 +1,6 @@
+import { EPSG_3857 } from '../ol-ext'
 import { observableFromOlEvent } from '../rx-ext'
-import { EPSG_3857 } from '../ol-ext/consts'
 import { hasSource } from '../util/assert'
-import { isEqual } from '../util/minilo'
 import { makeWatchers } from '../util/vue-helpers'
 import source from './source'
 
@@ -51,9 +50,7 @@ export default {
   watch: {
     ...makeWatchers([
       'crossOrigin',
-    ], () => function (value, prevValue) {
-      if (isEqual(value, prevValue)) return
-
+    ], () => function () {
       this.scheduleRecreate()
     }),
   },
@@ -68,5 +65,11 @@ function subscribeToSourceEvents () {
     'imageloadstart',
   ])
 
-  this.subscribeTo(events, evt => this.$emit(evt.type, evt))
+  this.subscribeTo(events, evt => {
+    ++this.rev
+
+    this.$nextTick(() => {
+      this.$emit(evt.type, evt)
+    })
+  })
 }
diff --git a/src/mixin/image-style.js b/src/mixin/image-style.js
index e129b01c..77314d39 100644
--- a/src/mixin/image-style.js
+++ b/src/mixin/image-style.js
@@ -50,7 +50,8 @@ export default {
     empty: false,
     attrs () {
       return {
-        class: this.$options.name,
+        id: this.vmId,
+        class: this.cmpName,
       }
     },
   },
diff --git a/src/mixin/interaction.js b/src/mixin/interaction.js
index 2342e380..958f6e92 100644
--- a/src/mixin/interaction.js
+++ b/src/mixin/interaction.js
@@ -1,4 +1,3 @@
-import uuid from 'uuid/v4'
 import {
   getInteractionId,
   getInteractionPriority,
@@ -14,10 +13,6 @@ import useMapCmp from './use-map-cmp'
 export default {
   mixins: [cmp, useMapCmp],
   props: {
-    id: {
-      type: [String, Number],
-      default: () => uuid(),
-    },
     active: {
       type: Boolean,
       default: true,
@@ -120,7 +115,7 @@ export default {
   },
   watch: {
     id (value) {
-      if (!this.$interaction || isEqual(value, getInteractionId(value))) {
+      if (!this.$interaction || isEqual(value, getInteractionId(this.$interaction))) {
         return
       }
 
@@ -149,7 +144,7 @@ export default {
   },
   stubVNode: {
     empty () {
-      return this.$options.name
+      return this.vmId
     },
   },
   created () {
diff --git a/src/mixin/interactions-container.js b/src/mixin/interactions-container.js
index 96c913c9..fb214b4f 100644
--- a/src/mixin/interactions-container.js
+++ b/src/mixin/interactions-container.js
@@ -27,7 +27,7 @@ export default {
 
       if (this.getInteractionById(getInteractionId(interaction)) == null) {
         initializeInteraction(interaction)
-        this._interactionsCollection.push(interaction)
+        this.$interactionsCollection.push(interaction)
         this.sortInteractions()
       }
     },
@@ -39,14 +39,14 @@ export default {
       interaction = this.getInteractionById(getInteractionId(interaction))
       if (!interaction) return
 
-      this._interactionsCollection.remove(interaction)
+      this.$interactionsCollection.remove(interaction)
       this.sortInteractions()
     },
     /**
      * @return {Interaction[]}
      */
     getInteractions () {
-      return this._interactionsCollection.getArray()
+      return this.$interactionsCollection.getArray()
     },
     /**
      * @return {Collection<Interaction>>}
@@ -59,7 +59,7 @@ export default {
      * @return {Interaction|undefined}
      */
     getInteractionById (interactionId) {
-      return this._interactionsCollection.getArray().find(interaction => {
+      return this.$interactionsCollection.getArray().find(interaction => {
         return getInteractionId(interaction) === interactionId
       })
     },
@@ -69,7 +69,7 @@ export default {
     sortInteractions (sorter) {
       sorter || (sorter = this.getDefaultInteractionsSorter())
 
-      this._interactionsCollection.getArray().sort(sorter)
+      this.$interactionsCollection.getArray().sort(sorter)
     },
     /**
      * @return {function}
@@ -88,7 +88,7 @@ export default {
      * @return {void}
      */
     clearInteractions () {
-      this._interactionsCollection.clear()
+      this.$interactionsCollection.clear()
     },
     /**
      * @returns {Object}
@@ -109,14 +109,29 @@ export default {
      */
     this._interactionsCollection = new Collection()
 
-    const add = observableFromOlEvent(this._interactionsCollection, 'add')
-    const remove = observableFromOlEvent(this._interactionsCollection, 'remove')
-    const events = mergeObs(add, remove)
+    this::defineServices()
+    this::subscribeToCollectionEvents()
+  },
+}
 
-    this.subscribeTo(events, ({ type, element }) => {
-      ++this.rev
+function defineServices () {
+  Object.defineProperties(this, {
+    $interactionsCollection: {
+      enumerable: true,
+      get: this.getInteractionsCollection,
+    },
+  })
+}
 
+function subscribeToCollectionEvents () {
+  const adds = observableFromOlEvent(this.$interactionsCollection, 'add')
+  const removes = observableFromOlEvent(this.$interactionsCollection, 'remove')
+
+  this.subscribeTo(mergeObs(adds, removes), ({ type, element }) => {
+    ++this.rev
+
+    this.$nextTick(() => {
       this.$emit(type + ':interaction', element)
     })
-  },
+  })
 }
diff --git a/src/mixin/layer.js b/src/mixin/layer.js
index 72c3b27f..30bc7e4a 100644
--- a/src/mixin/layer.js
+++ b/src/mixin/layer.js
@@ -1,4 +1,3 @@
-import uuid from 'uuid/v4'
 import Vue from 'vue'
 import { getLayerId, initializeLayer, setLayerId } from '../ol-ext'
 import { hasLayer, hasMap } from '../util/assert'
@@ -13,10 +12,6 @@ import useMapCmp from './use-map-cmp'
 export default {
   mixins: [cmp, useMapCmp, sourceContainer],
   props: {
-    id: {
-      type: [String, Number],
-      default: () => uuid(),
-    },
     /**
      * The bounding extent for layer rendering defined in the map view projection.
      * The layer will not be rendered outside of this extent.
@@ -230,17 +225,15 @@ export default {
     },
     ...makeWatchers([
       'overlay',
-    ], () => function (value, prevValue) {
-      if (isEqual(value, prevValue)) return
-
+    ], () => function () {
       this.scheduleRecreate()
     }),
   },
   stubVNode: {
     attrs () {
       return {
-        id: [this.$options.name, this.id].join('-'),
-        class: this.$options.name,
+        id: this.vmId,
+        class: this.cmpName,
       }
     },
   },
@@ -255,6 +248,10 @@ function defineServices () {
       enumerable: true,
       get: () => this.$olObject,
     },
+    $source: {
+      enumerable: true,
+      get: this.getSource,
+    },
     $map: {
       enumerable: true,
       get: () => this.$services && this.$services.map,
@@ -279,5 +276,11 @@ function subscribeToLayerEvents () {
     'render',
   ])
 
-  this.subscribeTo(events, evt => this.$emit(evt.type, evt))
+  this.subscribeTo(events, evt => {
+    ++this.rev
+
+    this.$nextTick(() => {
+      this.$emit(evt.type, evt)
+    })
+  })
 }
diff --git a/src/mixin/layers-container.js b/src/mixin/layers-container.js
index d4bd66dd..fb5d8864 100644
--- a/src/mixin/layers-container.js
+++ b/src/mixin/layers-container.js
@@ -27,7 +27,7 @@ export default {
 
       if (this.getLayerById(getLayerId(layer)) == null) {
         initializeLayer(layer)
-        this._layersCollection.push(layer)
+        this.$layersCollection.push(layer)
       }
     },
     /**
@@ -38,13 +38,13 @@ export default {
       layer = this.getLayerById(getLayerId(layer))
       if (!layer) return
 
-      this._layersCollection.remove(layer)
+      this.$layersCollection.remove(layer)
     },
     /**
      * @return {BaseLayer[]}
      */
     getLayers () {
-      return this._layersCollection.getArray()
+      return this.$layersCollection.getArray()
     },
     /**
      * @return {module:ol/Collection~Collection<BaseLayer>}
@@ -57,7 +57,7 @@ export default {
      * @return {BaseLayer|undefined}
      */
     getLayerById (layerId) {
-      return this._layersCollection.getArray().find(layer => {
+      return this.$layersCollection.getArray().find(layer => {
         return getLayerId(layer) === layerId
       })
     },
@@ -65,7 +65,7 @@ export default {
      * @return {void}
      */
     clearLayers () {
-      this._layersCollection.clear()
+      this.$layersCollection.clear()
     },
     /**
      * @returns {Object}
@@ -86,14 +86,29 @@ export default {
      */
     this._layersCollection = new Collection()
 
-    const add = observableFromOlEvent(this._layersCollection, 'add')
-    const remove = observableFromOlEvent(this._layersCollection, 'remove')
-    const events = mergeObs(add, remove)
+    this::defineServices()
+    this::subscribeToCollectionEvents()
+  },
+}
 
-    this.subscribeTo(events, ({ type, element }) => {
-      ++this.rev
+function defineServices () {
+  Object.defineProperties(this, {
+    $layersCollection: {
+      enumerable: true,
+      get: this.getLayersCollection,
+    },
+  })
+}
 
+function subscribeToCollectionEvents () {
+  const adds = observableFromOlEvent(this.$layersCollection, 'add')
+  const removes = observableFromOlEvent(this.$layersCollection, 'remove')
+
+  this.subscribeTo(mergeObs(adds, removes), ({ type, element }) => {
+    ++this.rev
+
+    this.$nextTick(() => {
       this.$emit(type + ':layer', element)
     })
-  },
+  })
 }
diff --git a/src/mixin/ol-cmp.js b/src/mixin/ol-cmp.js
index 09da176b..b903f4bc 100644
--- a/src/mixin/ol-cmp.js
+++ b/src/mixin/ol-cmp.js
@@ -1,6 +1,7 @@
 import debounce from 'debounce-promise'
 import { interval as intervalObs } from 'rxjs/observable'
 import { first as firstObs, skipUntil, skipWhile } from 'rxjs/operators'
+import uuid from 'uuid/v4'
 import { log } from '../util/log'
 import { identity, isFunction } from '../util/minilo'
 import identMap from './ident-map'
@@ -18,14 +19,26 @@ export default {
   VM_PROP,
   INSTANCE_PROMISE_POOL,
   mixins: [identMap, rxSubs, services],
+  props: {
+    id: {
+      type: [String, Number],
+      default: () => uuid(),
+    },
+  },
   data () {
     return {
       rev: 0,
     }
   },
   computed: {
-    name () {
-      return [this.$options.name, this.id].filter(identity).join(' ')
+    cmpName () {
+      return this.$options.name
+    },
+    vmId () {
+      return [this.cmpName, this.id].filter(identity).join('-')
+    },
+    vmName () {
+      return [this.cmpName, this.id].filter(identity).join(' ')
     },
   },
   methods: {
@@ -186,7 +199,7 @@ function defineLifeCyclePromises () {
     this.$emit(event, this)
 
     if (process.env.VUELAYERS_DEBUG) {
-      log(event, this.name)
+      log(event, this.vmName)
     }
 
     return this
diff --git a/src/mixin/ol-virt-cmp.js b/src/mixin/ol-virt-cmp.js
index 2ea36eea..433b9d0d 100644
--- a/src/mixin/ol-virt-cmp.js
+++ b/src/mixin/ol-virt-cmp.js
@@ -81,4 +81,12 @@ export default {
       this::cmp.methods.subscribeAll()
     },
   },
+  stubVNode: {
+    attrs () {
+      return {
+        id: this.vmId,
+        class: this.cmpName,
+      }
+    },
+  },
 }
diff --git a/src/mixin/overlays-container.js b/src/mixin/overlays-container.js
index 9d590b1d..8ab6e100 100644
--- a/src/mixin/overlays-container.js
+++ b/src/mixin/overlays-container.js
@@ -27,7 +27,7 @@ export default {
 
       if (this.getOverlayById(getOverlayId(overlay)) == null) {
         initializeOverlay(overlay)
-        this._overlaysCollection.push(overlay)
+        this.$overlaysCollection.push(overlay)
       }
     },
     /**
@@ -38,13 +38,13 @@ export default {
       overlay = this.getOverlayById(getOverlayId(overlay))
       if (!overlay) return
 
-      this._overlaysCollection.remove(overlay)
+      this.$overlaysCollection.remove(overlay)
     },
     /**
      * @return {Overlay[]}
      */
     getOverlays () {
-      return this._overlaysCollection.getArray()
+      return this.$overlaysCollection.getArray()
     },
     /**
      * @return {Collection<Overlay>}
@@ -57,7 +57,7 @@ export default {
      * @return {Overlay|undefined}
      */
     getOverlayById (overlayId) {
-      return this._overlaysCollection.getArray().find(overlay => {
+      return this.$overlaysCollection.getArray().find(overlay => {
         return getOverlayId(overlay) === overlayId
       })
     },
@@ -65,7 +65,7 @@ export default {
      * @return {void}
      */
     clearOverlays () {
-      this._overlaysCollection.clear()
+      this.$overlaysCollection.clear()
     },
     /**
      * @returns {Object}
@@ -86,14 +86,29 @@ export default {
      */
     this._overlaysCollection = new Collection()
 
-    const add = observableFromOlEvent(this._overlaysCollection, 'add')
-    const remove = observableFromOlEvent(this._overlaysCollection, 'remove')
-    const events = mergeObs(add, remove)
+    this::defineServices()
+    this::subscribeToCollectionEvents()
+  },
+}
 
-    this.subscribeTo(events, ({ type, element }) => {
-      ++this.rev
+function defineServices () {
+  Object.defineProperties(this, {
+    $overlaysCollection: {
+      enumerable: true,
+      get: this.getOverlaysCollection,
+    },
+  })
+}
 
+function subscribeToCollectionEvents () {
+  const adds = observableFromOlEvent(this.$overlaysCollection, 'add')
+  const removes = observableFromOlEvent(this.$overlaysCollection, 'remove')
+
+  this.subscribeTo(mergeObs(adds, removes), ({ type, element }) => {
+    ++this.rev
+
+    this.$nextTick(() => {
       this.$emit(type + ':overlay', element)
     })
-  },
+  })
 }
diff --git a/src/mixin/source.js b/src/mixin/source.js
index 1f1ef1da..5d210025 100644
--- a/src/mixin/source.js
+++ b/src/mixin/source.js
@@ -1,3 +1,4 @@
+import { getSourceId, initializeSource, setSourceId } from '../ol-ext'
 import { isArray, isEqual, isString } from '../util/minilo'
 import mergeDescriptors from '../util/multi-merge-descriptors'
 import cmp from './ol-virt-cmp'
@@ -34,8 +35,12 @@ export default {
      * @return {module:ol/source/Source~Source|Promise<module:ol/source/Source~Source>}
      * @protected
      */
-    createOlObject () {
-      return this.createSource()
+    async createOlObject () {
+      const source = await this.createSource()
+
+      initializeSource(source, this.id)
+
+      return source
     },
     /**
      * @return {module:ol/source/Source~Source|Promise<module:ol/source/Source~Source>}
@@ -127,6 +132,13 @@ export default {
     },
   },
   watch: {
+    id (value) {
+      if (!this.$source || value === getSourceId(this.$source)) {
+        return
+      }
+
+      setSourceId(this.$source, value)
+    },
     attributions (value) {
       if (!this.$source || isEqual(value, this.$source.getAttributions())) {
         return
@@ -161,7 +173,7 @@ export default {
   },
   stubVNode: {
     empty () {
-      return this.$options.name
+      return this.vmId
     },
   },
   created () {
diff --git a/src/mixin/style.js b/src/mixin/style.js
index 3902bd12..bcfbdb0b 100644
--- a/src/mixin/style.js
+++ b/src/mixin/style.js
@@ -1,6 +1,7 @@
 import { first as firstObs } from 'rxjs/operators'
-import mergeDescriptors from '../util/multi-merge-descriptors'
+import { getStyleId, initializeStyle, setStyleId } from '../ol-ext'
 import { observableFromOlEvent } from '../rx-ext'
+import mergeDescriptors from '../util/multi-merge-descriptors'
 import cmp from './ol-virt-cmp'
 import useMapCmp from './use-map-cmp'
 
@@ -14,8 +15,12 @@ export default {
      * @return {OlStyle|Promise<OlStyle>}
      * @protected
      */
-    createOlObject () {
-      return this.createStyle()
+    async createOlObject () {
+      const style = await this.createStyle()
+
+      initializeStyle(style)
+
+      return style
     },
     /**
      * @return {OlStyle|Promise<OlStyle>}
@@ -72,12 +77,21 @@ export default {
   },
   stubVNode: {
     empty () {
-      return this.$options.name
+      return this.vmId
     },
   },
   created () {
     this::defineServices()
   },
+  watch: {
+    id (value) {
+      if (!this.$style || value === getStyleId(this.$style)) {
+        return
+      }
+
+      setStyleId(this.$style, value)
+    },
+  },
 }
 
 function defineServices () {
diff --git a/src/mixin/tile-source.js b/src/mixin/tile-source.js
index 0fff10e0..47ac93d6 100644
--- a/src/mixin/tile-source.js
+++ b/src/mixin/tile-source.js
@@ -1,16 +1,16 @@
 import { createTileUrlFunction } from 'ol-tilecache'
-import { observableFromOlEvent } from '../rx-ext'
 import {
   CACHE_SIZE,
+  createExtentFromProjection,
+  createXyzGrid,
   EPSG_3857,
   MAX_ZOOM,
   MIN_ZOOM,
   PIXEL_RATIO,
   REPROJ_ERR_THRESHOLD,
   TILE_SIZE,
-} from '../ol-ext/consts'
-import { createExtentFromProjection } from '../ol-ext/extent'
-import { createXyzGrid } from '../ol-ext/tile-grid'
+} from '../ol-ext'
+import { observableFromOlEvent } from '../rx-ext'
 import { hasSource } from '../util/assert'
 import { isEqual, isString, pick, replaceTokens } from '../util/minilo'
 import { makeWatchers } from '../util/vue-helpers'
@@ -186,9 +186,7 @@ export default {
       'maxZoom',
       'minZoom',
       'tileSize',
-    ], () => function (value, prevValue) {
-      if (isEqual(value, prevValue)) return
-
+    ], () => function () {
       this.scheduleRecreate()
     }),
   },
@@ -203,5 +201,11 @@ function subscribeToSourceEvents () {
     'tileloaderror',
   ])
 
-  this.subscribeTo(events, evt => this.$emit(evt.type, evt))
+  this.subscribeTo(events, evt => {
+    ++this.rev
+
+    this.$nextTick(() => {
+      this.$emit(evt.type, evt)
+    })
+  })
 }
diff --git a/src/mixin/vector-source.js b/src/mixin/vector-source.js
index fea6edb5..595bbcef 100644
--- a/src/mixin/vector-source.js
+++ b/src/mixin/vector-source.js
@@ -1,7 +1,4 @@
-import { merge as mergeObs } from 'rxjs/observable'
-import { debounceTime } from 'rxjs/operators'
-import { observableFromOlEvent } from '../rx-ext'
-import * as assert from '../util/assert'
+import debounce from 'debounce-promise'
 import mergeDescriptors from '../util/multi-merge-descriptors'
 import { makeWatchers } from '../util/vue-helpers'
 import featuresContainer from './features-container'
@@ -68,7 +65,6 @@ export default {
      */
     subscribeAll () {
       this::source.methods.subscribeAll()
-      this::subscribeToEvents()
     },
     /**
      * @param feature
@@ -93,25 +89,17 @@ export default {
     ], () => function () {
       return this.scheduleRecreate()
     }),
+    featuresDataProj: debounce(function (features) {
+      this.$emit('update:features', features)
+    }, 1000 / 60),
   },
   stubVNode: {
     empty: false,
     attrs () {
       return {
-        class: this.$options.name,
+        id: this.vmId,
+        class: this.cmpName,
       }
     },
   },
 }
-
-function subscribeToEvents () {
-  assert.hasSource(this)
-
-  const add = observableFromOlEvent(this.getFeaturesCollection(), 'add')
-  const remove = observableFromOlEvent(this.getFeaturesCollection(), 'remove')
-  const events = mergeObs(add, remove).pipe(debounceTime(1000 / 60))
-  // emit event to allow `sync` modifier
-  this.subscribeTo(events, () => {
-    this.$emit('update:features', this.featuresDataProj)
-  })
-}
diff --git a/src/mixin/with-fill-stroke-style.js b/src/mixin/with-fill-stroke-style.js
index 1be21a5a..c0c74a84 100644
--- a/src/mixin/with-fill-stroke-style.js
+++ b/src/mixin/with-fill-stroke-style.js
@@ -1,60 +1,55 @@
 import Vue from 'vue'
 
-const methods = {
-  /**
-   * @param {Fill|Vue|undefined} fill
-   * @return {void}
-   * @protected
-   */
-  setFill (fill) {
-    fill = fill instanceof Vue ? fill.$style : fill
+export default {
+  methods: {
+    /**
+     * @param {Fill|Vue|undefined} fill
+     * @return {void}
+     * @protected
+     */
+    setFill (fill) {
+      fill = fill instanceof Vue ? fill.$style : fill
 
-    if (fill !== this._fill) {
-      this._fill = fill
-    }
-    if (this.$style && fill !== this.$style.getFill()) {
-      this.$style.setFill(fill)
-      this.scheduleRefresh()
-    }
-  },
-  /**
-   * @param {Stroke|Vue|undefined} stroke
-   * @return {void}
-   * @protected
-   */
-  setStroke (stroke) {
-    stroke = stroke instanceof Vue ? stroke.$style : stroke
+      if (fill !== this._fill) {
+        /**
+         * @type {Fill|undefined}
+         * @private
+         */
+        this._fill = fill
+      }
+      if (this.$style && fill !== this.$style.getFill()) {
+        this.$style.setFill(fill)
+        this.scheduleRefresh()
+      }
+    },
+    /**
+     * @param {Stroke|Vue|undefined} stroke
+     * @return {void}
+     * @protected
+     */
+    setStroke (stroke) {
+      stroke = stroke instanceof Vue ? stroke.$style : stroke
 
-    if (stroke !== this._stroke) {
-      this._stroke = stroke
-    }
-    if (this.$style && stroke !== this.$style.getStroke()) {
-      this.$style.setStroke(stroke)
-      this.scheduleRefresh()
-    }
+      if (stroke !== this._stroke) {
+        /**
+         * @type {Stroke|undefined}
+         * @private
+         */
+        this._stroke = stroke
+      }
+      if (this.$style && stroke !== this.$style.getStroke()) {
+        this.$style.setStroke(stroke)
+        this.scheduleRefresh()
+      }
+    },
   },
-}
-
-export default {
-  methods,
   stubVNode: {
     empty: false,
     attrs () {
       return {
-        class: this.$options.name,
+        id: this.vmId,
+        class: this.cmpName,
       }
     },
   },
-  created () {
-    /**
-     * @type {Fill|undefined}
-     * @private
-     */
-    this._fill = undefined
-    /**
-     * @type {Stroke|undefined}
-     * @private
-     */
-    this._stroke = undefined
-  },
 }
diff --git a/src/mixin/wms-source.js b/src/mixin/wms-source.js
index cd0c0db8..afc06c8a 100644
--- a/src/mixin/wms-source.js
+++ b/src/mixin/wms-source.js
@@ -1,6 +1,6 @@
 import { WMS_VERSION } from '../ol-ext'
 import { hasSource, hasView } from '../util/assert'
-import { isEqual, reduce } from '../util/minilo'
+import { reduce } from '../util/minilo'
 import { makeWatchers } from '../util/vue-helpers'
 
 const cleanExtParams = params => reduce(params, (params, value, key) => {
@@ -109,9 +109,7 @@ const watch = {
     'format',
     'bgColor',
     'time',
-  ], prop => function (value, prevValue) {
-    if (isEqual(value, prevValue)) return
-
+  ], prop => function (value) {
     prop = prop.toUpperCase()
     this.$source && this.$source.updateParams({ [prop]: value })
   }),
diff --git a/src/ol-ext/geom.js b/src/ol-ext/geom.js
index 008d5703..076d206f 100644
--- a/src/ol-ext/geom.js
+++ b/src/ol-ext/geom.js
@@ -1,3 +1,6 @@
+import Vue from 'vue'
+import Geometry from 'ol/geom/Geometry'
+import uuid from 'uuid/v4'
 import pointOnFeature from '@turf/point-on-feature'
 import Circle from 'ol/geom/Circle'
 import GeometryCollection from 'ol/geom/GeometryCollection'
@@ -132,3 +135,35 @@ export function findPointOnSurface (geom) {
     return pointFeature.geometry.coordinates
   }
 }
+
+export function getGeometryId (geometry) {
+  if (geometry instanceof Vue) {
+    return geometry.id
+  } else if (geometry instanceof Geometry) {
+    return geometry.get('id')
+  }
+
+  throw new Error('Illegal geometry argument')
+}
+
+export function setGeometryId (geometry, geometryId) {
+  if (geometry instanceof Vue) {
+    geometry.id = geometryId
+
+    return geometry
+  } else if (geometry instanceof Geometry) {
+    geometry.set('id', geometryId)
+
+    return geometry
+  }
+
+  throw new Error('Illegal geometry argument')
+}
+
+export function initializeGeometry (geometry, defaultGeometryId) {
+  if (getGeometryId(geometry) == null) {
+    setGeometryId(geometry, defaultGeometryId || uuid())
+  }
+
+  return geometry
+}
diff --git a/src/ol-ext/index.js b/src/ol-ext/index.js
index 1244966b..eddd1734 100644
--- a/src/ol-ext/index.js
+++ b/src/ol-ext/index.js
@@ -10,6 +10,7 @@ export * from './load-strategy'
 export * from './map'
 export * from './overlay'
 export * from './proj'
+export * from './source'
 export * from './style'
 export * from './tile-grid'
 export * from './util'
diff --git a/src/ol-ext/map.js b/src/ol-ext/map.js
index 2f8ecb5d..f70d8f42 100644
--- a/src/ol-ext/map.js
+++ b/src/ol-ext/map.js
@@ -1,6 +1,30 @@
 import PluggableMap from 'ol/PluggableMap'
 import Vue from 'vue'
 
+export function getMapId (map) {
+  if (map instanceof Vue) {
+    return map.id
+  } else if (map instanceof PluggableMap) {
+    return map.get('id')
+  }
+
+  throw new Error('Illegal map argument')
+}
+
+export function setMapId (map, mapId) {
+  if (map instanceof Vue) {
+    map.id = mapId
+
+    return map
+  } else if (map instanceof PluggableMap) {
+    map.set('id', mapId)
+
+    return map
+  }
+
+  throw new Error('Illegal map argument')
+}
+
 export function getMapDataProjection (map) {
   if (map instanceof Vue) {
     return map.dataProjection
diff --git a/src/ol-ext/source.js b/src/ol-ext/source.js
new file mode 100644
index 00000000..88453959
--- /dev/null
+++ b/src/ol-ext/source.js
@@ -0,0 +1,35 @@
+import Source from 'ol/source/Source'
+import uuid from 'uuid/v4'
+import Vue from 'vue'
+
+export function getSourceId (source) {
+  if (source instanceof Vue) {
+    return source.id
+  } else if (source instanceof Source) {
+    return source.get('id')
+  }
+
+  throw new Error('Illegal source argument')
+}
+
+export function setSourceId (source, sourceId) {
+  if (source instanceof Vue) {
+    source.id = sourceId
+
+    return source
+  } else if (source instanceof Source) {
+    source.set('id', sourceId)
+
+    return source
+  }
+
+  throw new Error('Illegal source argument')
+}
+
+export function initializeSource (source, defaultSourceId) {
+  if (getSourceId(source) == null) {
+    setSourceId(source, defaultSourceId || uuid())
+  }
+
+  return source
+}
diff --git a/src/ol-ext/style.js b/src/ol-ext/style.js
index d2a73481..455f2cf3 100644
--- a/src/ol-ext/style.js
+++ b/src/ol-ext/style.js
@@ -7,10 +7,54 @@ import Stroke from 'ol/style/Stroke'
 import Style from 'ol/style/Style'
 import Text from 'ol/style/Text'
 import parseColor from 'parse-color'
+import uuid from 'uuid/v4'
+import Vue from 'vue'
 import { isFunction, isNumeric, lowerFirst, pick, reduce, upperFirst } from '../util/minilo'
 import { GEOMETRY_TYPE } from './consts'
 import * as geomHelper from './geom'
 
+export function getStyleId (style) {
+  if (
+    style instanceof Vue ||
+    style instanceof Style ||
+    style instanceof ImageStyle ||
+    style instanceof Text ||
+    style instanceof Stroke ||
+    style instanceof Fill ||
+    style instanceof Function
+  ) {
+    return style.id
+  }
+
+  throw new Error('Illegal style argument')
+}
+
+export function setStyleId (style, styleId) {
+  if (
+    style instanceof Vue ||
+    style instanceof Style ||
+    style instanceof ImageStyle ||
+    style instanceof Text ||
+    style instanceof Stroke ||
+    style instanceof Fill ||
+    style instanceof Function
+  ) {
+    style.id = styleId
+
+    return style
+  }
+
+  throw new Error('Illegal style argument')
+}
+
+export function initializeStyle (style, defaultStyleId) {
+  if (getStyleId(style) == null) {
+    setStyleId(style, defaultStyleId || uuid())
+  }
+
+  return style
+}
+
 /**
  * @return {VlStyle[]}
  */
@@ -95,6 +139,7 @@ export function createStyle (vlStyle) {
     image: createImageStyle(vlStyle),
     geometry: createGeomStyle(vlStyle),
     zIndex: vlStyle.zIndex,
+    renderer: vlStyle.renderer,
   }
 
   if (!isEmpty(olStyle)) {
@@ -155,7 +200,15 @@ export function createFillStyle (vlStyle, prefix = '') {
  */
 export function createStrokeStyle (vlStyle, prefix = '') {
   const prefixKey = addPrefix(prefix)
-  const keys = ['strokeColor', 'strokeWidth', 'strokeDash', 'strokeCap', 'strokeJoin'].map(prefixKey)
+  const keys = [
+    'strokeColor',
+    'strokeWidth',
+    'strokeMiterLimit',
+    'strokeCap',
+    'strokeJoin',
+    'strokeDash',
+    'strokeDashOffset',
+  ].map(prefixKey)
   const compiledKey = prefixKey('stroke')
 
   if (vlStyle[compiledKey] instanceof Stroke) return vlStyle[compiledKey]
@@ -167,11 +220,13 @@ export function createStrokeStyle (vlStyle, prefix = '') {
     switch (name) {
       case prefixKey('strokeColor'):
       case prefixKey('strokeWidth'):
+      case prefixKey('strokeMiterLimit'):
         name = lowerFirst(name.replace(new RegExp(prefixKey('stroke')), ''))
         break
-      case prefixKey('strokeDash'):
       case prefixKey('strokeCap'):
       case prefixKey('strokeJoin'):
+      case prefixKey('strokeDash'):
+      case prefixKey('strokeDashOffset'):
         name = 'line' + name.replace(new RegExp(prefixKey('stroke')), '')
         break
     }
@@ -328,12 +383,15 @@ export function createGeomStyle (vlStyle) {
  * @property {string|number[]|undefined} fillColor
  * @property {string|number[]|undefined} strokeColor
  * @property {number|undefined} strokeWidth
+ * @property {number|undefined} strokeMiterLimit
  * @property {number[]|undefined} strokeDash
+ * @property {number[]|undefined} strokeDashOffset
  * @property {string|undefined} strokeCap
  * @property {string|undefined} strokeJoin
  * @property {number|undefined} zIndex
  * @property {Fill|undefined} fill
  * @property {Stroke|undefined} stroke
+ * @property {RenderFunction|undefined} renderer
  *
  * Text only
  * @property {string|Text|undefined} text
diff --git a/src/util/assert.js b/src/util/assert.js
index af5e8839..5d4816b2 100644
--- a/src/util/assert.js
+++ b/src/util/assert.js
@@ -107,6 +107,10 @@ export function hasSource (vm) {
   assert(vm.$source, 'component has "$source" property')
 }
 
+export function hasInnerSource (vm) {
+  assert(vm.$innerSource, 'component has "$innerSource" property')
+}
+
 /**
  * @param {Object} vm
  * @return {void}
diff --git a/test/app.vue b/test/app.vue
index 0f51aaf0..95b38b62 100644
--- a/test/app.vue
+++ b/test/app.vue
@@ -2,129 +2,35 @@
   <div id="app">
     <div style="height: 100%">
       <div class="panel">
-        <button @click="animate">Move animate</button>
-        <button @click="selectByHover = !selectByHover">Select by {{ !selectByHover ? 'hover' : 'click' }}</button>
-        <button @click="graticule = !graticule">Graticule</button>
-        <button @click="drawType = 'Polygon'">Draw polygon</button>
-        <button @click="drawType = undefined">Stop draw</button>
-        <button @click="loadClusterFeatures">Load cluster features</button>
-        <div>
-          {{ selectedFeatures }}
-        </div>
       </div>
 
-      <vl-map ref="map" v-if="showMap" data-projection="EPSG:4326">
+      <vl-map ref="map" data-projection="EPSG:4326" :default-controls="controls" :default-interactions="interactions">
         <vl-view :center.sync="center" :rotation.sync="rotation"
                  :zoom.sync="zoom" :extent="[0, 0, 100, 50]"
                  ident="view" ref="view" />
 
-        <!--<vl-graticule :show-labels="true" v-if="graticule">-->
-        <!--<vl-style-stroke :line-dash="[5, 10]" color="green" slot="stroke"></vl-style-stroke>-->
-        <!--<vl-style-text slot="lon" text-baseline="bottom">-->
-        <!--<vl-style-stroke color="blue" />-->
-        <!--</vl-style-text>-->
-        <!--<vl-style-text slot="lat" text-align="end">-->
-        <!--<vl-style-stroke color="black" />-->
-        <!--</vl-style-text>-->
-        <!--</vl-graticule>-->
-
-        <!--<vl-interaction-select :condition="selectCondition" :features.sync="selectedFeatures">-->
-        <!--  <template slot-scope="select">-->
-        <!--    <vl-overlay class="feature-popup" v-for="feature in select.features" :key="feature.id" :id="feature.id"-->
-        <!--                :position="pointOnSurface(feature.geometry)" :auto-pan="true"-->
-        <!--                :auto-pan-animation="{ duration: 300 }"-->
-        <!--                class-name="ol-overlay-container ol-selectable smooth-transition"-->
-        <!--                positioning="bottom-right">-->
-        <!--      <div style="background: #ffffff; padding: 10px; width: 200px">-->
-        <!--        {{ feature }}-->
-        <!--      </div>-->
-        <!--    </vl-overlay>-->
-        <!--  </template>-->
-        <!--</vl-interaction-select>-->
-
-        <!--<vl-geoloc @update:position="onUpdatePosition">-->
-        <!--  <template slot-scope="geoloc">-->
-        <!--    <vl-feature v-if="geoloc.position" id="position-feature">-->
-        <!--      <vl-geom-point :coordinates="geoloc.position" />-->
-        <!--      <vl-style-box>-->
-        <!--        <vl-style-icon :src="iconUrl" />-->
-        <!--        &lt;!&ndash;<vl-style-circle :radius="7">&ndash;&gt;-->
-        <!--        &lt;!&ndash;  <vl-style-stroke color="red" />&ndash;&gt;-->
-        <!--        &lt;!&ndash;  <vl-style-fill color="blue" />&ndash;&gt;-->
-        <!--        &lt;!&ndash;</vl-style-circle>&ndash;&gt;-->
-        <!--      </vl-style-box>-->
-        <!--    </vl-feature>-->
-        <!--  </template>-->
-        <!--</vl-geoloc>-->
-
         <vl-layer-tile>
           <vl-source-sputnik />
         </vl-layer-tile>
 
-        <!--<vl-layer-vector id="dyn-url" render-mode="image">-->
-        <!--  <vl-source-vector ref="dynUrlSource" :url="dynUrl" />-->
+        <!--<vl-layer-vector id="countries" render-mode="image">-->
+        <!--  <vl-source-vector ident="countries-source" :features.sync="countries" :url="countriesUrl" />-->
         <!--</vl-layer-vector>-->
 
-        <!--<vl-feature id="marker">-->
-        <!--<vl-geom-point :coordinates="[0, 0]" />-->
-        <!--</vl-feature>-->
-
-        <!--<vl-layer-group>-->
-        <!--  <vl-layer-heatmap id="features" ref="featuresLayer" render-mode="image">-->
-        <!--    <vl-source-vector :features.sync="features" ref="featuresSource" />-->
-        <!--    &lt;!&ndash;<vl-style-func :factory="styleFuncFactory" />&ndash;&gt;-->
-        <!--  </vl-layer-heatmap>-->
-
-        <!--  <vl-layer-vector id="clusters" render-mode="image">-->
-        <!--    <vl-source-cluster :distance="50">-->
-        <!--      <vl-source-vector :features="clusterFeatures" />-->
-        <!--    </vl-source-cluster>-->
-
-        <!--    <vl-style-func :factory="makeClusterStyleFunc" />-->
-        <!--  </vl-layer-vector>-->
-        <!--</vl-layer-group>-->
-
-        <vl-layer-vector id="draw-pane">
-          <vl-source-vector :features.sync="drawnFeatures" ident="drawTarget" />
+        <vl-layer-vector id="draw-target">
+          <vl-source-vector ident="draw-target" :features.sync="drawFeatures" />
         </vl-layer-vector>
 
-        <vl-interaction-draw v-if="drawType" :type="drawType" source="drawTarget" />
-
-        <vl-interaction-modify source="drawTarget">
-          <vl-style-box>
-            <vl-style-circle :radius="5">
-              <vl-style-stroke color="green" />
-              <vl-style-fill color="green" />
-            </vl-style-circle>
-          </vl-style-box>
-        </vl-interaction-modify>
+        <vl-interaction-modify source="draw-target" />
       </vl-map>
     </div>
   </div>
 </template>
 
 <script>
-  import { cloneDeep, forEach, isFunction, random, range, throttle } from 'lodash'
-  import { inAndOut } from 'ol/easing'
-  import * as eventCondition from 'ol/events/condition'
-  import Feature from 'ol/Feature'
-  import Point from 'ol/geom/Point'
-  import { createStyle, defaultStyle, findPointOnSurface, pointFromLonLat } from '../src/ol-ext'
-
-  const features = range(0, 100).map(() => {
-    let coordinate = [
-      random(-50, 50),
-      random(-50, 50),
-    ]
-    return {
-      type: 'Feature',
-      // id: 'random-' + i,
-      geometry: {
-        type: 'Point',
-        coordinates: coordinate,
-      },
-    }
-  })
+  import { defaults as defaultControls, ScaleLine } from 'ol/control'
+  import Collection from 'ol/Collection'
+  import { findPointOnSurface } from '../src/ol-ext'
 
   export default {
     name: 'app',
@@ -134,198 +40,38 @@
         resolution: 39135.75848201024,
         center: [100, 10],
         rotation: 0,
+        countriesUrl: 'https://openlayers.org/en/latest/examples/data/geojson/countries.geojson',
+        countries: [],
+        featureId: undefined,
         features: [],
-        featureAnimations: {},
         selectedFeatures: [],
-        graticule: false,
-        showMap: true,
-        drawType: undefined,
-        drawnFeatures: [
+        drawFeatures: [
           {
-            id: 'drawn-1',
             type: 'Feature',
+            id: '213456789',
+            properties: {},
             geometry: {
               type: 'Polygon',
-              coordinates: [
-                [
-                  [0, 0],
-                  [0, 20],
-                  [20, 20],
-                  [20, 0],
-                  [0, 0],
-                ],
-              ],
+              coordinates: [[
+                [0, 0],
+                [20, 0],
+                [20, 20],
+                [0, 20],
+                [0, 0],
+              ]],
             },
           },
         ],
-        selectByHover: false,
-        clusterFeatures: [],
-        dynUrl: undefined,
-        countriesUrl: 'https://openlayers.org/en/latest/examples/data/geojson/countries.geojson',
-        riversUrl: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_rivers_lake_centerlines.geojson',
-        iconUrl: 'https://openlayers.org/en/latest/examples/data/icon.png',
+        controls: defaultControls().extend([
+          new ScaleLine(),
+        ]),
+        interactions: new Collection(),
       }
     },
-    computed: {
-      selectCondition () {
-        return this.selectByHover ? eventCondition.pointerMove : eventCondition.singleClick
-      },
-    },
     methods: {
       pointOnSurface: findPointOnSurface,
-      styleFuncFactory () {
-        const style = createStyle(defaultStyle()[0])
-
-        return feature => {
-          if (feature.get('animating') === true) {
-            return null
-          }
-
-          return [style]
-        }
-      },
-      animate () {
-        requestAnimationFrame(() => {
-          this.features.forEach(feature => {
-            this.animateFeature(
-              feature,
-              [random(-50, 50), random(-50, 50)],
-              throttle((lon, lat) => {
-                feature.geometry.coordinates = [lon, lat]
-              }, 10),
-              undefined,
-              (lon, lat) => {
-                feature.geometry.coordinates = [lon, lat]
-              },
-            )
-          })
-        })
-      },
-      animateFeature (feature, destCoord, step, done) {
-        if (this.featureAnimations[feature.id]) {
-          this.featureAnimations[feature.id]()
-        }
-
-        this.$refs.featuresSource.getFeatureById(feature.id).set('animating', true)
-
-        let duration = 2000
-        let now = Date.now()
-        let start = Date.now()
-        let elapsed = 0
-        let complete = false
-        let progress = 0
-        let x, y
-
-        const animate = evt => {
-          const vectorContext = evt.vectorContext
-
-          now = Date.now()
-          elapsed = now - start
-
-          let fraction = elapsed / duration
-          if (fraction >= 1) {
-            fraction = 1
-            complete = true
-          }
-          if (complete) {
-            this.featureAnimations[feature.id]()
-
-            return
-          }
-
-          progress = inAndOut(fraction)
-
-          let x0 = feature.geometry.coordinates[0]
-          let y0 = feature.geometry.coordinates[1]
-          let x1 = destCoord[0]
-          let y1 = destCoord[1]
-          x = x0 + progress * (x1 - x0)
-          y = y0 + progress * (y1 - y0)
-
-          if (isFunction(step)) {
-            step(x, y, progress)
-          }
-
-          let currentPoint = new Point(pointFromLonLat([x, y]))
-          let animFeature = new Feature(currentPoint)
-          vectorContext.drawFeature(animFeature, createStyle(defaultStyle()[0]))
-
-          this.$refs.map.$map.render()
-        }
-
-        this.featureAnimations[feature.id] = () => {
-          this.$refs.map.$map.un('postcompose', animate)
-
-          delete this.featureAnimations[feature.id]
-
-          if (isFunction(done)) {
-            done(x, y, progress)
-          }
-
-          this.$refs.featuresSource.getFeatureById(feature.id).set('animating', false)
-        }
-
-        this.$refs.map.$map.on('postcompose', animate)
-        this.$refs.map.$map.render()
-      },
-      loadClusterFeatures () {
-        this.clusterFeatures = _.range(0, 100).map(i => {
-          let coordinate = [
-            _.random(-50, 50),
-            _.random(-50, 50),
-          ]
-          return {
-            type: 'Feature',
-            id: 'random-' + i,
-            geometry: {
-              type: 'Point',
-              coordinates: coordinate,
-            },
-          }
-        })
-      },
-      makeClusterStyleFunc () {
-        const cache = {}
-
-        return function __clusterStyleFunc (feature) {
-          const size = feature.get('features').length
-          let style = cache[size]
-
-          if (!style) {
-            style = createStyle({
-              imageRadius: 10,
-              strokeColor: '#ffffff',
-              fillColor: '#3399cc',
-              text: size.toString(),
-              textFillColor: '#ffffff',
-            })
-
-            cache[size] = style
-          }
-
-          return [style]
-        }
-      },
-      onUpdatePosition (position) {
-        console.log('geoloc pos', position)
-      },
     },
     mounted () {
-      setTimeout(() => {
-        this.features = cloneDeep(features)
-      }, 1000)
-
-      this.dynUrl = this.countriesUrl
-      setInterval(() => {
-        if (this.dynUrl === this.countriesUrl) {
-          this.dynUrl = this.riversUrl
-        } else {
-          this.dynUrl = this.countriesUrl
-        }
-      }, 5000)
-    },
-    beforeDestroy () {
-      forEach(this.featureAnimations, cancel => cancel())
     },
   }
 </script>
diff --git a/test/umd.html b/test/umd.html
index 0bbd09de..4d0208a0 100644
--- a/test/umd.html
+++ b/test/umd.html
@@ -65,7 +65,6 @@
   </div>
 
   <script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io/en/v5.3.0/build/ol.js"></script>
   <script src="../lib/index.umd.js"></script>
   <script>
     /* eslint-disable no-new */