add directive deep option

src/directive.js

@@ -85,7 +85,8 @@ p._bind = function (def) {
  this._watcherExp,
  update, // callback
  this.filters,
- this.twoWay // need setter
+ this.twoWay, // need setter,
+ this.deep
  )
  } else {
  watcher.addCb(update)

src/watcher.js

@@ -75,10 +75,11 @@ p.get = function () {
  } catch (e) {
  _.warn(e)
  }
- // use JSON.stringify to "touch" every property
- // so they are all tracked as dependencies for
- // deep watching
- if (this.deep) JSON.stringify(value)
+ // "touch" every property so they are all tracked as
+ // dependencies for deep watching
+ if (this.deep) {
+ traverse(value)
+ }
  value = _.applyFilters(value, this.readFilters, vm)
  this.afterGet()
  return value
@@ -214,4 +215,23 @@ p.teardown = function () {
  }
 }
 
+
+/**
+ * Recrusively traverse an object to evoke all converted
+ * getters, so that every nested property inside the object
+ * is collected as a "deep" dependency.
+ *
+ * @param {Object} obj
+ */
+
+function traverse (obj) {
+ var key, val
+ for (key in obj) {
+ val = obj[key]
+ if (_.isObject(val)) {
+ traverse(val)
+ }
+ }
+}
+
 module.exports = Watcher

test/unit/specs/directive_spec.js

@@ -15,7 +15,8 @@ describe('Directive', function () {
  }
  vm = new Vue({
  data:{
- a:1
+ a:1,
+ b: { c: 2 }
  },
  filters: {
  test: function (v) {
@@ -148,6 +149,18 @@ describe('Directive', function () {
  })
  })
 
+ it('deep', function (done) {
+ def.deep = true
+ var d = new Directive('test', el, vm, {
+ expression: 'b'
+ }, def)
+ vm.b.c = 3
+ nextTick(function () {
+ expect(def.update.calls.count()).toBe(2)
+ done()
+ })
+ })
+
  it('function def', function () {
  var d = new Directive('test', el, vm, {
  expression: 'a'