ractivejs - Ractive.components 内で双方向バインディングが機能しない

Question

一部のコンポーネントのレイアウトを分割したいので、Ractive.components を使用しました。すべてのデータはコンポーネントで正しく、その中で使用されます (id や色など)。

しかし、双方向バインディングの変数は正しく使用されていません。1 つの JavaScript 動作と 3 つの HTML レイアウトがあり、そのうちの 2 つのレイアウトが機能しません。

JS の動作

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 レイアウト 1 (機能しません)

<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 レイアウト 2 (動作しません)

<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レイアウト3（作品）

<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>

そしてライブデモ

双方向バインディングで正しい Ractive.component を作成するには?

PS私の英語でごめんなさい..