Отображение вложенных массивов во vue

Есть страница со списком который рисуется из массива объектов через v-for, хочу сделать чтобы по нажатию на заголовок раскрывался подсписок из массива объектов который находится в первом массиве с заголовками. Подскажите пожалуйста как отобразить вложенный массив через пропсы и вывести раскрывающийся список

Первый файл с массивом данных

 <template>
  <div class="catalog">
    <vueTypeTextInput
    v-model="search"
    placeholder="Поиск"
    />
    <div class="catalog__self-roll-bad-search" v-if="badSearched"> 
      По вашему запросу ничего не найдено!
    </div>
    <div class="catalog__list" >
      <catalog-items
        v-for="item in searchedArray"
        :title="item.title"
        :dataSection="item.dataSection"
        :key="item.id"
      />
    </div>
  </div>
</template>

<script>
import catalogItems from '../vueCatalog/catalog-items.vue'
import vueTypeTextInput from '../vueTypeTextInput.vue'
export default {
  name: 'catalog',
  components: {
    catalogItems,
    vueTypeTextInput
  },
  data:() => ({
    dataCourses: [
      {
        id: '1',
        title: 'Заголовок',
        dataSection: [
          {
            key: '1',
            descr: 'Первый пункт',
            url: 'http://ya.ru'
          }
        ]
      }
    ],
    search: '',
    badSearch: true
  }),
  computed: {
    searchedArray() {
      if (!this.search) return this.dataCourses;
      return this.dataCourses.filter(({title}) => title.includes(this.search));
    }
  },
}
</script>

Второй файл с подключенным компонентом

    <template>
    <div class="catalog-items">

      <div class="catalog-items__title">
        <div class="catalog-items__showed">показать</div>
        <p> {{title}} </p>
      </div>
      
      <div class="catalog-items__section"
        v-for="item in dataSection"
        :descr="item.descr"
        :url="item.url"
        :key="item.dataSection"
        >
        <div class="b">
          <a :href="url">{{descr}}</a> 
        </div>

      </div>
    </div>

</template>

<script>
export default {
  name: 'catalog-items',
  props: {
    title: {
      type: String,
      required: true
    },
    dataSection: {
      type: Array,
      required: true
    }
  }
}
</script>

Текст выдаваемой ошибки Property or method "url" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.