title: observer mobx-react seems not working in React
body: <p>I am a starter to React and mobx. Based on my design, data should be updated after click the button using observer, observable modules. Even though the console log displays the email changed whenever clicking the button, the view doesn't change at all. Could you give me any advice? </p>
  
  <pre><code>import Link from 'next/link';
  import React, { useState } from 'react';
  import ProfileImage from '../components/ProfileImage';
  import faker from 'faker';
  import { decorate, observable } from 'mobx';
  import { observer } from "mobx-react"
  
  
  class Data {
      avartar = faker.image.avatar();
      email = faker.internet.email();
      name = {
          firstName: faker.name.firstName(),
          lastName: faker.name.lastName(),
      };
  }
  
  decorate(Data, {
      avartar: observable,
      email: observable,
      name: observable,
  })
  
  class Index extends React.Component {
      data = new Data();
  
      generate = () =&gt; {
          this.data.email = faker.internet.email();
          this.data.name.firstName = faker.name.firstName();
          this.data.avartar = faker.image.avatar();
          console.log("check: ", this.data.email);
      }
  
      render() {
          return (
              &lt;&gt;
                  &lt;h1&gt;Index&lt;/h1&gt;
                  &lt;button className="btn btn-primary" onClick={this.generate}&gt;Change&lt;/button&gt;
                  &lt;div&gt;
                      &lt;dl className="row"&gt;
                          &lt;dt className="col-sm-3"&gt;Avatar&lt;/dt&gt;
                          &lt;dd className="col-sm-9"&gt;&lt;img src={this.data.avartar} /&gt;&lt;/dd&gt;
                          &lt;dt className="col-sm-3"&gt;Name&lt;/dt&gt;
                          &lt;dd className="col-sm-9"&gt;{this.data.name.firstName} {this.data.name.lastName}&lt;/dd&gt;
                          &lt;dt className="col-sm-3"&gt;Email&lt;/dt&gt;
                          &lt;dd className="col-sm-9"&gt;{this.data.email}&lt;/dd&gt;
                      &lt;/dl&gt;
                  &lt;/div&gt;
              &lt;/&gt;);
      }
  }
  
  Index = observer(Index);
  export default Index;
  </code></pre>