Search categories with input field in VUE.js - vue.js

Question

I have a little problem, if someone could help me I would be very grateful.
I have to make a list of categories and subcategories for each category. I have to put an input field which will search through the titles of categories and subcategories, but I do not know how to do that in vue.js
For example if I have something like this
Category 1 Fruit with subcategories Banana, Apple.
Category 2 Books with subcategories Drama, Romance
If I write fruit in the search field, it should return Fruit (Banana, Apple). If I write Romance in the search field, it should return Books (Romance)
Thanks in advance!
<table>
<input type="text" v-model="search" placeholder="Search">
<div> <p>Fruit</p> </div>
<tr v-for="fruit in fruits" :key="fruit.id">
<div v-if="fruit.id == 1" >
{{fruit.name}}
</div>
<div v-if="fruit.id == 2" >
{{fruit.name}} </div>
</tr>
<br>
<div> <p>Books</p> </div>
<tr v-for="book in books" :key="book.id">
<div v-if="book.id == 1" >
{{book.name}}
</div>
<div v-if="fruit.id == 2" >
{{book.name}} </div>
</tr>
</table>
data() {
return {
search:'',
fruititems: [
{name:Banana, id:1},
{name:Apple}, id:2}
],
bookitems: [
{name:Drama, id:1},
{name:Romance}, id:2}
],
}}
computed:{
fruits() {
return this.fruits.filter(fruit =>
fruit.name.toLowerCase().includes(this.search.toLowerCase()))},
books() {
return this.books.filter(book =>
fruit.name.toLowerCase().includes(this.search.toLowerCase()))},
}

Answer 1

I belive something like this ?
https://stackblitz.com/edit/vue2-vue-cli-pvbeex?file=src%2FApp.vue
to keep code history
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div>
<input type="text" v-model="search" />
<div v-for="category in getfiltered">
<h2>{{ category.name }}</h2>
<ul>
<li v-for="sub in category.subCategories">
{{ sub }}
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data: () => ({
search: '',
categories: [
{
name: 'fruits',
subCategories: ['Apple', 'Banana'],
},
{
name: 'books',
subCategories: ['Drama', 'Romance'],
},
],
}),
computed: {
getfiltered: function () {
return this.categories.filter((category) => {
return (
this.search.length < 2 ||
category.name.includes(this.search) ||
category.subCategories.find((sub) => sub.includes(this.search))
)
})
},
},
}
</script>