Two-way binding doesn't work inside Ractive.components

Question

I want to divide layout for some components and i used Ractive.components for it. All data are correct in component and used in it (like id and color).

But variable for two-way binding don't used correct. I have one javascript behavior and three html layouts, and two layout from them don't work.

JS behavior

var config = [
  {id: 1, color: '#cc8'},
  {id: 2, color: '#c88'},
  {id: 4, color: '#8c8'},
  {id: 8, color: '#8cc'}
];

var Panel = Ractive.extend({
  el: document.body,
  template: '#panel',
  data: function() {
    return {
      config: config,
      filters: [4,8]
    };
  },
  components: {
    switcher: function() {return 'Switcher';}
  }
});

var Switcher = Ractive.extend({
  template: '#switcher'
});

Ractive.components.Switcher = Switcher;

var panel = new Panel();

HTML layout 1 (doesn't work)

<script id="panel" type="text/ractive">
    <h4>Doesn't work: {{filters}}</h4>
    {{#each config}}
      <switcher name="{{filters}}">
        filter #{{id}}
      </switcher><br/>
    {{/each}}
    <br/>
  </script>

  <script id="switcher" type="text/ractive">
    <label
      class="switcher"
      style="color:{{color}};">
      <input
        type="checkbox"
        value={{id}}
        name={{name}}
        class="switcher__input">{{>content}}
    </label>
  </script>

HTML layout 2 (doesn't work)

<script id="panel" type="text/ractive">
    <h4>Doesn't work too ("~/"): {{filters}}</h4>
    {{#each config}}
      <switcher name="{{~/filters}}">
        filter #{{id}}
      </switcher><br/>
    {{/each}}
    <br/>
  </script>

  <script id="switcher" type="text/ractive">
    <label
      class="switcher"
      style="color:{{color}};">
      <input
        type="checkbox"
        value={{id}}
        name={{name}}
        class="switcher__input">{{>content}}
    </label>
  </script>

HTML layout 3 (work)

<script id="panel" type="text/ractive">
    <h4>Work: {{filters}}</h4>
    {{#each config}}
      <label
        class="switcher"
        style="color:{{color}};">
        <input
          type="checkbox"
          value={{id}}
          name={{filters}}
          class="switcher__input">
          tags #{{id}}
      </label><br/>
    {{/each}}
  </script>

And live demo

How to make right Ractive.component with two-way binding?

P.S. Sorry for my English..