How to properly specify nested v-ifs?

Question

Vue.js

There is a component structure like this

...
<div class="role-grid">
    <div class="role-my">
    <h5><strong>Me:</strong></h5>
    <ul class="dots">
    <template v-for="(m, index) in cd.role" :key="index">
    <li v-for="m in m.me">{{ m.li }}</li>
    </template>
    </ul>
    </div>

    <div class="role-others">
    <h5><strong>Others:</strong></h5>
    <ul class="dots">
    <template v-for="(o, index) in cd.role" :key="index">
    <li v-for="o in o.other">{{ o.li }}</li>
    </template>
    </ul>
    </div>
</div>
....

In json file it looks like this:

"role": [
            {
                "me": [
                    {
                        "li": "Lorem"
                    },
                    {
                        "li": "Lorem"
                    },
                    {
                        "li": "Lorem"
                    },
                    {
                        "li": "Lorem"
                    }
                ],
                "other": [
                    {
                        "li": "Lorem"
                    },
                    {
                        "li": "Lorem"
                    }
                ]
            }
        ],

Can you tell me how to correctly specify the conditions in the template so that if one of the blocks (me / other) does not have data, it will not be displayed? Well, or just the absence of the entire block in the json file.
Those. hide all...

<div class="role-others">
    <h5><strong>Others:</strong></h5>
    <ul class="dots">
    <template v-for="(o, index) in cd.role" :key="index">
    <li v-for="o in o.other">{{ o.li }}</li>
    </template>
    </ul>
</div>

...if other looks like this:

"other": [
                    {
                        "li": ""
                    },
                    {
                        "li": ""
                    }
                ]

Answer 1

<div class="role-others" v-if="cd.role.some(el => el.other.length)">
    <h5><strong>Others:</strong></h5>
    <ul class="dots">
    <template v-for="(o, index) in cd.role" :key="index">
    <li v-for="o in o.other">{{ o.li }}</li>
    </template>
    </ul>
</div>

Well, and put it in computed so that it caches.