В родительском компоненте, дочерние компонент отдельных данных не имеют, данные, как часть родительсикх данных, например, какого-то поля booksList.
Скорее в компоненте, родительском для каталога книг, а глубже спускать в виде пропсов.
И как это должно выглядить в коде, чтобы данные оставались связанными?
<template>
<lib-category v-model="booksList"></lib-category>
</template>
<script>
import libCategory from "./libCategory.vue"
default export {
//...
components: {libCategory},
data() {
return {
booksList: [],
}
}
//...
}
</script>
libCategory.vue
<template>
<div v-for="(category, i) in booksListInner" :key="'i' + i">
<!-- тут какое-то оформление категории -->
...
<!-- а тут перечисляем книги, в нее входящие -->
<lib-book v-for="(book, k) in category.children" :key="'k' + k" v-model="book"></lib-book>
</div>
</template>
<script>
import libBook from "./libBook.vue"
default export {
//...
props: ['value'],
components: {libBook},
data() {
return {
booksListInner: [],
}
},
watch: {
value: {
handler (value) { //связанность снаружи внутрь
this.booksListInner = value
},
immediate: true,
deep: true, //необходимо для объекта с вложенностью
},
booksListInner: {
handler (booksListInner) { //связанность изнутри наружу
this.$emit("input", booksListInner)
},
deep: true, //необходимо для объекта с вложенностью
}
}
}
</script>
libBook.vue аналогично.
Не знаю всех особенностей вашего списка, исхожу из минимального понимания. В зависимости от структуры данных могут быть нюансы в реактивности при добавлении новых элементов.
