How to correctly change the property of the parent component, when bypassing all elements in the child component?

Question

Vue.js

I apologize right now. It is very difficult to dive into reactivity and into vue after jQuery.

For example, there is one component BaseComponent . When the list is rendered, the second one is connected, to which the "classGroup" parameter is passed, how, under a certain condition for traversing the list in the child component, assign some value to "classGroup".

Here is the first component

<template>
    <div>
        <ul>
            <li
                v-for="item in items"
                v-bind::key="item.id">
                {{ item.name }}
                <ChildComponent v-if="item.inner" v-bind:itemInner="item.inner" v-bind: classGroup ="classGroup" />
            </li>
        </ul>
    </div>
</template>

<script>
import ChildComponent from "./ChildComponent";
export default {
    name: "BaseComponent",
    components: {
        ChildComponent
    },
    data() {
        return {
            classGroup: 'class1',
            items: [
                {
                    id: 1,
                    name: 'name1'
                }, {
                    id: 2,
                    name: 'name2',
                    inner: [
                        {
                            id: 5,
                            name: 'name5'
                        }, {
                            id: 6,
                            name: 'name6'
                        }
                    ]
                }, {
                    id: 3,
                    name: 'name3'
                }, {
                    id: 4,
                    name: 'name4'
                }
            ]
        }
    }
}
</script>

And the second ChildComponent

// Вот тут то и вопрос где и как правильно мне осуществить проверку к примеру (id=4). 
// Грубо говоря:  this. classGroup = (item.id == 4) ? 'class2' : 'class3';
// Если это делается через method, то как вызвать этот метод (в какой конструкции) при отрисовки "itemInner" ?

<template>
    <ul>
        <li
            v-for="item in itemInner"
            :key="item.id" >
            {{ item.name }}
        </li>
    </ul>
</template>

<script>
export default {
    name: "ChildComponent",
    props: {
        itemInner: {},
        classGroup: {}
    }
}
</script>

If I do not fit correctly at all, tell me in which direction I am making a mistake.

Answer 1

In the child, it is worth making a calculated property, but on the basis of which we will endow the element with classes
<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}