Компонент Rivets.js - сохранение двухсторонней привязки в rv-each

Question

Я пытаюсь создать повторно используемый компонент (шаблон) с библиотекой привязки данных Rivets. jsFiddle с подтверждением концепции здесь: https://jsfiddle.net/Zireael/ok6haqxg

const obj_Labels = {
  id: [{
    "text": "AAA",
    "color": "red",
    "sth": "qwe"
  }, {
    "text": "HHH",
    "color": "green",
    "sth": "zxc"
  }, {
    "text": "KKK",
    "color": "blue",
    "sth": "jkl"
  }]

}

function testComponentViewModelCol(obj) {
  const self = this;
  self.data = obj;
}

rivets.components['colorized'] = {
  //attributes: ['colorx'],
  template: function(el, data) {
    return '<input rv-value="data.colorx">';
  },
  initialize: function(el, data) {
    return new testComponentViewModelCol(data, el);
  }
  //() => new Object()
};

rivets.configure({
  preloadData: true,
  templateDelimiters: ['{{', '}}']
})

const rivetBinding = rivets.bind(rvapp, {
  ['rvLabels']: obj_Labels
})

Проблема в том, что элементы DOM, созданные компонентом, больше не имеют двухсторонней привязки к данным (введите синее поле в jsfiddle - три сгенерированных текстовых поля не обновляют свое значение после создания) , Я адаптировал логику из нескольких примеров компонентов, которые я нашел. Либо я все делаю неправильно, либо я не добавил достаточную логику обратной связи в код компонента, чтобы он отслеживал модель данных после добавления элемента в DOM.

Я хочу создать компонент, который берет одну привязку данных и генерирует один или несколько элементов DOM / HTML с примененной привязкой данных (например, изменение видимости, свойства стиля CSS на основе изменений в связанных данных).

Итак, вместо того, чтобы делать несколько раз

<input rv-value='xxx.aaa' rv-style='xxx.yyy' rv-visible='xxx.zzz'>

Я хочу

<componentX rv-data='xxx'>

, который выводит один или несколько (rv-each) DOM-элементов (например, отформатированное поле ввода текста), привязанных к модели данных.

Буду признателен за указатели / отзывы.