title: Why "Error in render: TypeError: Cannot read property 'filter' of undefined" returned even data already available?
body: <p>I already initialize the data.</p>
  
  <pre><code>data () {
    return {
      current_product: {},
      current_ID: '',
    }
  }
  </code></pre>
  
  <p>Then, I fetch data from a REST API on lifecycle <strong>created</strong> hook.</p>
  
  <pre><code>created () {
    var skuID = this.$store.state.selected_productSKU.productSKU_ID
  
    axios.get(`http://localhost:8081/api/products/${skuID}`)
      .then(response =&gt; {
        this.current_ID = response.data.product_ID
        this.current_product = response.data
      })
      .catch(e =&gt; {
        alert(e)
    })
  }
  </code></pre>
  
  <p>And finally, I use computed property to get some value</p>
  
  <pre><code>// THIS JUST RETURN ['XL', 'M']
  focusedProduct_SKUS_NoDupSizes () {
    var newArr = this.current_product.product_SKU.filter((sku, index, self) =&gt;
      index === self.findIndex(t =&gt; (
        t.productSKU_size === sku.productSKU_size
      ))
    )
    var x = newArr.map(a =&gt; a.productSKU_size)
    return x
  }
  </code></pre>
  
  <p>The vue instance show expected result</p>
  
  <p><a href="https://i.stack.imgur.com/yQ7zO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yQ7zO.png" alt="Expected Result"></a></p>
  
  <p>But if i call <code>{{ focusedProduct_SKUS_NoDupSizes }}</code> in template. </p>
  
  <ul>
  <li>It doesn't rendered.  </li>
  <li>The browser return error <code>Error in render: "TypeError: Cannot read property 'filter' of undefined"</code></li>
  </ul>
  
  <p>What is happening? My first guess is the <code>computed property</code> using the initial structure of <code>current_product</code> which is <code>{} empty object</code>. But isn't that how to initialize an object?</p>