apollo - Nuxt JS Apollo データはページの更新後にのみ利用可能

Question

Nuxt 内で Apollo を使用してデータを取得しています。どういうわけか、そのページに移動すると、エラーが発生します

Cannot read property 'image' of undefined

ページを更新すると、すべてが期待どおりに機能します。

同様の問題を抱えている人々のスレッドをいくつか見つけましたが、解決策がないようです:/

これは今の私のテンプレートファイルです:

/products/_slug.vue

<template>
  <section class="container">
    <div class="top">
      <img :src="product.image.url"/>
      <h1>{{ product.name }}</h1>
    </div>
  </section>
</template>

<script>
import gql from 'graphql-tag'

export default {
  apollo: {
    product: {
      query: gql`
        query Product($slug: String!) {
          product(filter: { slug: { eq: $slug } }) {
            slug
            name
            image {
              url
            }
          }
        }
      `,
      prefetch({ route }) {
        return {
          slug: route.params.slug
        }
      },
      variables() {
        return {
          slug: this.$route.params.slug
        }
      }
    }
  }
}
</script>

基本的に、ページを更新しない限り $apolloData は空のままです。どんなアイデアでも大歓迎です

編集 一歩近づきました（と思います）。以前は、最初にページに移動したときにすべて (image.url と名前) が未定義でした。

追加した：

data() {
    return {
      product: []
    };
  }

エクスポートの一番上にあり、少なくとも名前は常に定義されているため、画像を削除すると、すべてが期待どおりに機能します。image.url だけが未定義のままです。

私が気づいたことの 1 つ (どの程度関連性があるかはわかりません) は、この問題は を使用してのみ発生することです。通常の a タグを使用すると機能しますが、もちろん vue マジックが失われます。

EDIT-2 Nuxt をバージョン 1.0.0 にダウングレードすると、すべて正常に動作します