[Vue warn]: Ошибка при рендеринге: «Ошибка типа: невозможно прочитать свойство 'url' со значением NULL» при попытке создать журнал с использованием unite cms + vue.js.

Question

Я пытаюсь создать простой блог, используя одностраничное приложение vue.js, которое отображает статьи, хранящиеся в унифицированном cms.Я получаю странную ошибку, и я не могу выяснить причину этой ошибки.

введите описание изображения здесь Вот мой main.js

import Vue from 'vue'
import i18n from './lang/lang'
import store from './store'
import App from './App'
import router from './router'
import BootstrapVue from 'bootstrap-vue'
import vueVimeoPlayer from 'vue-vimeo-player'
import carousel from 'v-owl-carousel'


import VueMoment from 'vue-moment'
import { ApolloClient } from 'apollo-client'
import { ApolloLink, from } from 'apollo-link'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'


// css and scss files include
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import './assets/css/font-awesome.min.css'
import './assets/index.scss'


// remove below file for change color
// import './assets/css/color/color-2.css'
Vue.use(BootstrapVue)
Vue.use(vueVimeoPlayer)
Vue.component('carousel', carousel)
Vue.config.productionTip = false


// init graphql endpoint
const httpLink = new HttpLink({ uri: 'https://ianco.unitecms.io/blog/api'});

// add the authorization to the headers
const authMiddleware = new ApolloLink((operation, forward) => {
  operation.setContext(({ headers = {} }) => ({
    headers: {
      ...headers,
      authorization:'YxAW_Mj2P6Nz7RFrbhquHP3BZklkmeKWkcn0HPR_REE',
    }
  }));
  return forward(operation);
})


// Create apollo client and provider
const apolloClient = new ApolloClient({
  link: from([ authMiddleware, httpLink ]),
  cache: new InMemoryCache()
});
const apolloProvider = new VueApollo({
  defaultClient: apolloClient
});



export const vues = new Vue()


/* eslint-disable no-new */
export const app =  new Vue({
  i18n,
  el: '#app',
  router,
  store,
  apolloProvider,
  render: h => h(App)
})

window['vue'] = app
window.store = store

издесь может быть компонент ArticleList.vue

<template>
  <section>
  {{articles}}
    <article v-for="article in articles" v-bind:key="article.id">
      <div class="block" v-on:click="navigateToArticle(article.id)">
        <header>
          <img v-bind:src="article.image.url" v-bind:alt="article.headline" />
        </header>
        <h2>{{ article.headline }}</h2>
        <aside>{{ article.created|moment("d MMMM YYYY") }}</aside>
      </div>
    </article>
  </section>
</template>

<script>

import gql from 'graphql-tag'

export default {
  data() {
    return {
      articles: []
    }
  },
  methods: {
    navigateToArticle(id) {
      this.$router.push('article/' + id);
    }
  },
  apollo: {
    articles: {
      query: gql`
        {
          findArticles(
            sort: {
              field: "created",
              order: "DESC"
            },
            limit: 9,
            page: 1
          ) {
            result {
              id,
              created,
              headline,
              image {
                url
              }
            }
          }
        }
      `,
      update: (result) => { console.log(result.findArticles.result[0].headline); return result.findArticles.result; }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  section {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    max-width: 1140px;
    margin: 50px auto;
  }

  section article {
    width: 100%;
    max-width: 350px;
    box-sizing: border-box;
    padding: 10px;
  }

  section article .block {
    cursor: pointer;
    padding: 0;
  }

  section article header {
    height: 150px;
    background: #333;
    text-align: center;
    overflow: hidden;
    line-height: 150px;
  }

  section article img {
    width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    transition: all 0.5s ease-out;
  }

  section article h2 {
    opacity: 0.5;
    transition: all 0.3s ease-out;
  }

  section article aside {
    padding: 0 15px 10px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: right;
    opacity: 0.5;
    transition: all 0.3s ease-out;
  }

  section article .block:hover {
    box-shadow: 0 10px 25px 3px rgba(0,0,0,0.2);
  }

  section article .block:hover header img {
    width: 110%;
    margin-left: -5%;
    margin-top: -5%;
  }

  section article .block:hover h2,
  section article .block:hover meta {
    opacity: 1;
  }

</style>

Запрос graphql с использованием клиента Apollo возвращает result.findArticles.result результаты corect, но при рендеринге, похоже, имеются некоторые ошибки.