title: MobX observable changes not updating components
body: <p>I have a store in MobX that handles containing the cart, and adding items to it. However, when that data is updated the components don't re-render to suit the changes.
  I tried using <code>useEffect</code> to set the total price, however when the <code>cartData</code> changes, the state is not updated. It does work on mount, though.</p>
  <p>In another component, I call <code>addItemToCart</code>, and the console.warn function returns the proper data - but that data doesn't seem to be synced to the component. <code>clearCart</code> also seems to not work.</p>
  <p>My stores are contained in one RootStore.</p>
  <pre class="lang-js prettyprint-override"><code>import React, {useState, useEffect} from 'react';
  import {List, Text} from '@ui-kitten/components';
  import {CartItem} from '_molecules/CartItem';
  import {inject, observer} from 'mobx-react';
  
  const CartList = (props) =&gt; {
      const {cartData} = props.store.cartStore;
      const [totalPrice, setTotalPrice] = useState(0);
  
      const renderCartItem = ({item, index}) =&gt; (
          &lt;CartItem itemData={item} key={index} /&gt;
      );
  
      useEffect(() =&gt; {
          setTotalPrice(cartData.reduce((a, v) =&gt; a + v.price * v.quantity, 0));
          console.warn('cart changed!');
      }, [cartData]);
  
      return (
          &lt;&gt;
              &lt;List
                  data={cartData}
                  renderItem={renderCartItem}
                  style={{backgroundColor: null, width: '100%'}}
              /&gt;
              &lt;Text style={{textAlign: 'right'}} category={'s1'}&gt;
                  {`Total $${totalPrice}`}
              &lt;/Text&gt;
          &lt;/&gt;
      );
  };
  
  export default inject('store')(observer(CartList));
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>import {decorate, observable, action} from 'mobx';
  
  class CartStore {
      cartData = [];
  
      addItemToCart = (itemData) =&gt; {
          this.cartData.push({
              title: itemData.title,
              price: itemData.price,
              quantity: 1,
              id: itemData.id,
          });
          console.warn(this.cartData);
      };
  
      clearCart = () =&gt; {
          this.cartData = [];
      };
  
  }
  
  
  decorate(CartStore, {
      cartData: observable,
      addItemToCart: action,
      clearCart: action,
  });
  
  export default new CartStore();
  </code></pre>