diff --git a/lib/config.js b/lib/config.js
index bd0068ed4..9a6683e57 100644
--- a/lib/config.js
+++ b/lib/config.js
@@ -1,61 +1,80 @@
 import get from 'lodash/get'
 import each from 'lodash/each'
+import Vue from 'vue'
 import defaultValues from './config.default'
 
-const _VALUES = typeof Symbol === 'function' ? Symbol('values') : '_VALUES'
-const _SCOPES = typeof Symbol === 'function' ? Symbol('scopes') : '_SCOPES'
+const _VALUES = '_VALUES'
+const _SCOPES = '_SCOPES'
 
-export class Config {
-  constructor (values = {}) {
-    this[_VALUES] = {}
-    this.merge(values)
-    return this;
-  }
-  merge (values = {}) {
-    return each(values, (value, key) => {
-      this.set(key, value)
-    })
-  }
-  set (key, value) {
-    const levels = key.split('.')
-    if (levels.length > 1) {
-      this[_VALUES][key] = this.scope(levels.shift()).set(levels.join('.'), value)
-    } else {
-      this[_VALUES][key] = value
+export const Config = Vue.extend({
+  props: {
+    defaultValues: {
+      type: Object,
+      default: () => ({})
     }
-    return value
-  }
-  get (key, defaultValue) {
-    return get(this[_VALUES], key, defaultValue)
-  }
-  is (key) {
-    const value = this.get(key, null)
-    switch(value) {
-      case 1: return true
-      case true: return true
-      case '1': return true
-      case 'true': return true
-      case 0: return false
-      case false: return false
-      case '0': return false
-      case 'false': return false
-      default: return !!value
+  },
+  data () {
+    return {
+      [_VALUES]: null,
+      [_SCOPES]: null
+    }
+  },
+  created () {
+    this[_VALUES] = Vue.observable({})
+    this[_SCOPES] = Vue.observable({})
+    this.merge(this.defaultValues)
+  },
+  methods: {
+    merge (values = {}) {
+      return each(values, (value, key) => {
+        this.set(key, value)
+      })
+    },
+    set (key, value) {
+      const levels = key.split('.')
+      if (levels.length > 1) {
+        this.$set(this[_VALUES], key, this.scope(levels.shift()).set(levels.join('.'), value))
+      } else {
+        this.$set(this[_VALUES], key, value)
+      }
+      return value
+    },
+    get (key, defaultValue) {
+      return get(this[_VALUES], key, defaultValue)
+    },
+    is (key) {
+      const value = this.get(key, null)
+      switch(value) {
+        case 1: return true
+        case true: return true
+        case '1': return true
+        case 'true': return true
+        case 0: return false
+        case false: return false
+        case '0': return false
+        case 'false': return false
+        default: return !!value
+      }
+    },
+    isnt (key) {
+      return !this.is(key)
+    },
+    scope (name) {
+      this.$set(this[_SCOPES], name, get(this.scopes, name, new Config()))
+      return this[_SCOPES][name]
+    },
+  },
+  computed: {
+    values () {
+      return this[_VALUES]
+    },
+    scopes () {
+      this[_SCOPES] = get(this, _SCOPES, {})
+      return this[_SCOPES]
     }
   }
-  isnt (key) {
-    return !this.is(key)
-  }
-  scope (name) {
-    this.scopes[name] = get(this.scopes, name, new Config())
-    return this.scopes[name]
-  }
-  get values () {
-    return this[_VALUES]
-  }
-  get scopes () {
-    this[_SCOPES] = get(this, _SCOPES, {})
-    return this[_SCOPES]
-  }
-}
+})
 
-export default new Config(defaultValues)
+export default new Config({
+  propsData: { defaultValues }
+})
diff --git a/tests/unit/config.spec.js b/tests/unit/config.spec.js
index af7b1edc3..87f29a585 100644
--- a/tests/unit/config.spec.js
+++ b/tests/unit/config.spec.js
@@ -93,4 +93,8 @@ describe('config.js', () => {
     config.set('activated', false)
     expect(config.isnt('activated')).toBeTruthy()
   })
+
+  it('should create an observable object', () => {
+
+  })
 })