How to make component observe on form data?

My parent component includes a form data as below:

render() {
    const form = this.form;
    return (
      <div className="pt-dark ">
        <form className="profile-form" onSubmit={form.onSubmit}>
          <div className="profile-input-row">
            <Input field={form.$('alias')}/>
          </div>
          <div className="profile-input-row">
            <Input field={form.$('port')}/>
          </div>

Below is the Input component code:

export default observer(({field}) => (

  <div >
    <label  htmlFor={field.id}>{field.label}</label>
    <div className="input-content">
      <input  {...field.bind()} />
    </div>
  </div>
));

when I change the value of the input, my parent component doesn’t got rendered. How can I make my current component listen on the form state change?

[zhaoyi0113]

Yup, that should work. Thanks.

[foxhound87]

So why not creating another store? Then pass it with @inject('store', 'form')