Почему я получаю свойство undefined с моим компонентом vue.js?

У меня есть несколько компонентов в моем приложении vue.js, которые следуют приведенной ниже структуре, и все они выдают одну и ту же ошибку.

TypeError: Cannot read property 'id' of undefined

Я думал, что это будет легко исправить, обернув {{ jobs[0].id }}<template :v-if = "jobs"> или <template :v-if = "jobs[0].id">, поскольку большинство других сообщений о стеке переполнения указывают на это как на решение, но это действительно устраняет ошибки. Что интересно, в приведенном ниже коде все данные (включая идентификатор) отображаются на странице просто отлично, на странице нет данных, однако console.info продолжает показывать ошибку неопределенного свойства, и мои юнит-тесты терпят неудачу с тем же ошибка.

<template>
  <div class = "emptyDiv">
    <h3>
      Latest Build -
      <router-link:to = "{name: 'job_details'}">
      {{ jobs[0].id }}
      </router-link>
    </h3>
  </div>
<template>

<script>
export default {
  name: "Stages",
  data() {
    return {
      jobs: []
    };
  },
  created() {
    this.JobExecEndpoint =
    process.env.VUE_APP_TEST_URL +
    "/api/v2/job/"
    fetch(this.JobExecEndpoint)
    .then(response => response.json())
    .then(body => {
      this.cleanStartTime = moment(body[0].time_start);
      this.cleanEndTime = moment(body[0].time_end);
      this.cleanDuration = this.calculateDuration(
        this.cleanStartTime,
        this.cleanEndTime
        );
      this.jobs.push({
        name: body[0].job.name,
        id: body[0].id,
        env: body[0].job.env,
        time_start: this.cleanStartTime.format("LLL"),
        time_end: this.cleanEndTime.format("LLL"),
        duration: this.cleanDuration,
        status: body[0].status.name,
        job: body[0].job,
      });
    })
    .catch(err => {
      console.info("Error Fetching:", this.JobExecEndpoint, err);
      return { failure: this.JobExecEndpoint, reason: err };
    });
  }
};
</script>

Что я здесь делаю неправильно? Я пытался устранить эти ошибки около 10 часов подряд и не смог понять это.

ОБНОВИТЬ:

Я смог избавиться от этих ошибок и пройти свои юнит-тесты, добавив

  .then(() => {
  this.new_id = this.jobs[0].id
  })

в созданный блок и добавив new_id='' под данные

а затем вызов new_id из шаблона. Однако это неудовлетворительное решение, так как я до сих пор не знаю, почему он выдает ошибку с исходным кодом, и я не верю, что это решение будет работать с полным массивом (с более чем одним заданием).