Ошибка TypeError: "_vm.activeContract is undefined"

У меня есть список пользователей с контрактами, все работает корректно, но иногда при открытия пользователя с контрактом и при перелистывании по кнопке Следующий, activeContract получается пустой хотя у него точно есть контракты и ошибка TypeError: "_vm.activeContract is undefined" Помогает только перезагрузка страницы

<div class="row">
    <div class="col-md-6 border-bottom">
        <div class="row">
            <div class="btn-group btn-group-sm mb-3 text-center mx-auto" v-if="dataObject.contracts_active.length > 0">
                <button class="btn btn-sm btn-outline-secondary mr-4" @click="indexactiveContract--" :disabled="indexactiveContract <= 0">Предыдущий</button>
                <button class="btn btn-sm btn-outline-secondary ml-4" @click="indexactiveContract++" :disabled="indexactiveContract === dataObject.contracts_active.length - 1">Следующий</button>
            </div>
        </div>
    </div>
    <hr>
</div>
<div class="row">
    <div class="col-md-6 mt-3">
        <transition name="fade" mode="out-in">
        <div v-if="dataObject.contracts_active.length > 0" class="table-responsive" :key="indexactiveContract">
                    <p class="card-text text-center">"{{ activeContract.name }}"</p>
                    <table class="table table-bordered table-hover datatable datatable-User">
                        <tbody>
                            <tr>
                                <td>Дата составления:</td>
                                <td>{{ activeContract.date }}</td>
                            </tr>
                            <tr>
                                <td>Начало:</td>
                                <td>{{ activeContract.start }}</td>
                            </tr>
                        </tbody>
                    </table>
        </div>
        <p class="text-center font-weight-bold" v-else>Нет активных контрактов</p>
        </transition>
    </div>
</div>

<script>
  export default {
    data() {
      return {
         indexactiveContract: 0,
      }
    },
        computed: {
            activeContract() {
              return this.dataObject.contracts_active[this.indexactiveContract]
            },
      }
  }
</script>