RactiveJS and Stapes model not updating

Question

I am trying to create a filtering for a Stapes object in RactiveJS, but it seem the two way binding is not responding correctly to the update.

I can't work out what is going wrong where as I thought it should just work without any issue, I have created a code example here:

https://jsbin.com/sajeje/4/edit?html,output

Answer 1

Here's the pattern I use for using a computed property with a filter adapted for your use case. I couldn't get the Stapes object to directly be usable as the result, but there is a getAllAsArray() that seems to work:

  computed: {
    filtered: function () {
       var query = this.get( 'query').trim(),
           users = this.get( 'users' );

      return query ? users.search(query) : users.getAllAsArray();
    }
  },

  data: function () {
    return {
      users: usersModel,
      query: ''
    }
  }

Works with the sub-component as pure reactive programming without the need for an event:

<Search query="{{query}}" placeholder="Search users" />

Updated bin here: https://jsbin.com/bomumajagu/edit?html,output

Push works against Stapes model:

this.get( 'users' ).push( { name: newUser } );