Primevue PanelMenu focused element

Question

I want to get an expanded view of the first PanelMenu element when the page starts. The official documentation says to use focused, but it is not clear how to call it in the page launch code https://primevue.org/panelmenu/#api.panelmenu.interfaces.PanelMenuContext

Default start

Running with an expanded element

My code:

<template>
    <div class="card flex justify-content-center">
        <PanelMenu :model="items" class="w-full md:w-20rem" />
    </div>
</template>

<script setup>
import { ref } from "vue";

const items = ref([
    {
        label: 'Files',
        icon: 'pi pi-file',
        items: [
            {
                label: 'Documents',
                icon: 'pi pi-file',
                items: []
            },
            {
                label: 'Images',
                icon: 'pi pi-image',
                items: []
            }
        ]
    },
    {
        label: 'Cloud',
        icon: 'pi pi-cloud',
        items: []
    },
    {
        label: 'Devices',
        icon: 'pi pi-desktop',
        items: []
    }
]);
</script>