Image not rendering in _slug.vue page.

[Marvin]

My _slug.vue single article page renders properly except the image.

<template>
  <article class="article">
    <div class="article__container">
      <h1 class="article__title">{{ articles.title }}</h1>
      <img :src="api_url + articles.image.url" class="article__img" />
      <div
        class="article__content"
        v-html="$md.render(articles.content || 'No description provided')"
      ></div>
      <div class="article__side-bar"><p>Sidebar</p></div>
    </div>
  </article>
</template>

<script>
import articleQuery from "~/apollo/queries/article/Article";
export default {
  data() {
    return {
      articles: {},
      api_url: process.env.strapiBaseUri
    };
  },
  data: () => ({
    articles: {}
  }),
  apollo: {
    articles: {
      prefetch: true,
      query: articleQuery,
      variables() {
        return { slug: this.$route.params.slug };
      },
      update: data => data.articles[0]
    }
  }
};
</script>