How to solve problems in a recursive component without violating SOLID principles?

Question

Vue.js

1. The component has 2 "modes" of display


How to do it through slots? (The slot must have category props, please note that this is a recursive component)
2. Data can be different on different pages, for example, on page 1:

{
    name: "test",
    items: [{name: "test"}, ...]
}

another:

{
    title: "test",
    items: [{title: "test"}, ...]
}

The problem is that the component itself is called (recursion) and it also needs to adapt the data to the props, how to solve this?