mobx action function not change store value

index.js

ReactDOM.render(
  <Provider store={new UserStore()}>
    <IndexPage/>
  </Provider>
);

store/index.js

class UserStore {
  @observable id = 0;
  @action signin = (id) => {
    this.id = id;
  }
  @action signout = () => {
    this.id = 0;
  }
}

export default UserStore;

pages/index.js

@inject('store')
@observer
class IndexPage extends Component {
  signin() {
    this.props.store.signin(1);
    console.log(this.props.store.id); // it is working. print 1.
  }
  render() {
    return (
      <div>
        {this.props.store.id} // it is not working. not change value.
        <button onClick={this.signin.bind(this)}>signin</button>
        <button>signout</button>
      </div>
    );
  }
}

export default IndexPage;

• signin function is working. but, not change this.props.store.id.
• mobx action function not working.
• How to fix it?