Изменить состояние в классе для 2 way binding на js

Есть класс для создания двухсторонней связи на джиесе, подобной по смыслу тем, что применяются во вью, реакте, ангуляре и т.д. Я отобрал его на просторах интернета среди сотен подобных, но не до конца понимаю, как его использовать.

Простыми словами, задача приведенного ниже класса связывать инпут с другим элементом на странице, чтобы при заполнении инпута текст из него выводился в элементе и наоборот, если меняется значение StateObserver.state то обновлялся инпут.

Скрипт работает, когда я меняю текст в инпуте все обновляется, но как мне обновить состояние, например, по таймауту в качестве значения заносить в него рандомную цифру? Чтобы обновился инпут.

Таким образом должно получиться так, что если мы по таймеру будем обновлять состояние, то должен обновляться инпут.

// create a base class to handle state
class StateObserver extends HTMLElement {
 constructor () {
   super()
    StateObserver.instances.push(this)
  }
 stateUpdate (update) {
   StateObserver.lastState = StateObserver.state
    StateObserver.state = update
    StateObserver.instances.forEach((i) => {
     if (!i.onStateUpdate) return
     i.onStateUpdate(update, StateObserver.lastState)
    })
  }
}

StateObserver.instances = []
StateObserver.state = {}
StateObserver.lastState = {}

// create a web component which will react to state changes
class CustomReactive extends StateObserver {
 onStateUpdate (state, lastState) {
   if (state.someProp === lastState.someProp) return
    this.innerHTML = `input is: ${state.someProp}`
  }
}
customElements.define('custom-reactive', CustomReactive)

class CustomObserved extends StateObserver {
 connectedCallback () {
   this.querySelector('input').addEventListener('input', (e) => {
     this.stateUpdate({ someProp: e.target.value })
    })
  }
}
customElements.define('custom-observed', CustomObserved)

Использование

<custom-observed>
  <input>
</custom-observed>
<br />
<custom-reactive></custom-reactive>