Why is vue throwing a warn error even though everything is working correctly?

Question

Vue.js

I have such a component.
This is an accordion with checkboxes (I removed the extra code for brevity)

<script lang='coffee'>
  Vue = require 'vue/dist/vue.js'
  checkordion = Vue.component "checkordion",
    props: ['columns']
    data: ->
      return
        spoilers: [{shown: false}]
        isDataSet: false

    methods: 
      toggleSpoilers: (key) ->
        that = this
        that.spoilers.forEach (spoiler, index) ->
          if index == key
            if spoiler.shown
              spoiler.shown = false
            else
              spoiler.shown = true
          else
            spoiler.shown = false
      setInnerCheckboxes: (type, value) ->
        this.columns.array.forEach (item, index) ->
          if type == item.type
            item.visible = value
    updated: ->
      that = this
      if !this.isDataSet
        Object.keys(this.columns.categories).forEach (key) ->
          spoiler = {shown: false}
          that.spoilers.push spoiler
        that.isDataSet = true
  module.exports = checkordion
</script>
<template>
  <div class='checkordion'>
    <div class='checkordion__section' v-for='(category, key) in columns.categories' :class="{'checkordion__section--opened': spoilers[key].shown}">
      <div class='checkordion__header'>
        <checkbox v-model='category.visible'></checkbox>
        <div class='checkordion__label' @click="toggleSpoilers(key)">{{category.label}}</div>
      </div>
      <div class='checkordion__body'>
        <div class='checkordion__checkbox' v-if='item.type === category.type' v-for='item in columns.array'>
          <checkbox v-model='item.visible' :label='item.value'></checkbox>
        </div>
      </div>
    </div>
  </div>
</template>

It receives in props an object with two arrays - the checkbox categories, from which I get the number of accordion spoilers, and an array of checkbox objects.
Everything opens and closes correctly, it works correctly, but when rendering, I get an error in :class="{'checkordion__section--opened': spoilers[key].shown}" about propetry spoilers[key].shown of undefined.. Why undefined I don't really understand.
Wrote several hooks. mounted - spoilers[0].shown - available. created - available, updated - available, beforeUpdate - available. key in the template is available.
Why is Vue swearing?

Answer 1

You can add a check:

{'checkordion__section--opened': spoilers && spoilers[key].shown}