title: Invoke property getter Chart not displaying
body: <p>I'm trying to build an object that will fit chartJS's model for a line-chart</p>
  
  <pre><code>&lt;line-chart :data="{'2017-05-13': 2, '2017-05-14': 5}"&gt;&lt;/line-chart&gt;
  </code></pre>
  
  <p>I have an API that returns a standard array of objects that I transform like so:</p>
  
  <pre><code>getData: function() {
    MyService.getData().then(res =&gt; {
      this.data = res.reduce((obj, item) =&gt; {
        obj[item.date] = item.value;
        return obj;
      }, {});
      console.log(this.data);
    });
  }
  </code></pre>
  
  <p>Result from the API is correctly 'flattened' but in chrome I get this</p>
  
  <pre><code>{
    2018-03-05: (...),
    2018-03-06: (...),
    2018-03-07: (...)
  }
  </code></pre>
  
  <p>At first I thought that this was the cause of the chart not displaying but it's not.</p>
  
  <p>Here is the complete HTML</p>
  
  <pre><code>&lt;div class="data" v-if="data.length &gt; 0"&gt;
    &lt;line-chart :data="data"&gt;&lt;/line-chart&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the component's data()</p>
  
  <pre><code>export default {
    name: 'Graphs',
    data() {
      return {
        listOfStuff: [],
        selectedStuff: "",
        data: {}
      }
    }
  </code></pre>