dom + simulacra : event bindings problem

var bind = require('simulacra')
var dom = require('dom')

module.exports = function (update) {

    var template =
    `<div id="product">
      <h1 class="name"></h1>
      <div class="details">
        <div><span class="size"></span></div>
        <h4 class="vendor"></h4>
      </div>
      <button id="button">click me for another size</button>
    </div>`

    var v = dom(template)
    var $button = v.find('#button')

    $button.on('click', function () {
        update.addSize(' big gulp venti ')
    })

    var bindings = bind(v[0], {
        name: bind(v.find('.name')[0]),
        details: bind(v.find('.details')[0], {
            size: bind(v.find('.size')[0]),
            vendor: bind(v.find('.vendor')[0])
      })
    })

    return bindings

}