Данные не извлекаются в компоненте Vue с использованием инерции laravel9

я загружаю меню и подменю из базы данных в компонент Vue, используя laravel9 Inertia vue3 vit3
вот мой компонент Vue. Я попробовал console.info, не отображающий никаких данных для боковой панели. Как я могу загрузить свою категорию и подкатегорию на боковой панели? компоненты существуют в каталоге Ресурсы/JS/Страницы/Администратор/Общие/Sidebar.vue

<template>

</template>

в настройках реквизита console.info не дает значений. в контроллере я проверил, что значения отображаются правильно, используя dd ($ sidebar)

<script>
  import { ref } from 'vue';
  import { Link } from '@inertiajs/inertia-vue3';

  export default {
    name: 'Sidebar',
    props: {
      sidebar: {
        type: Array,
        required: true,
      },
      isDarkMode: {
        type: Boolean,
        default: false,
      },
    },
    setup(props) {
      console.info(props.sidebar);
      const state = {
        openCategories: ref([]),
      };

      const toggleCategory = (categoryId) => {
        if (state.openCategories.value.includes(categoryId)) {
          state.openCategories.value = state.openCategories.value.filter((id) => id !== categoryId);
        } else {
          state.openCategories.value = [...state.openCategories.value, categoryId];
        }
      };

      return {
        state,
        toggleCategory,
      };
    },
  };
</script>

вот мой контроллер, он будет передавать массив боковой панели компоненту

<?php
namespace App\Http\Controllers;

use App\Models\Sidebar;
use Illuminate\Http\Request;
use Inertia\Inertia;

class SidebarController extends Controller
{
    public function index()
    {
        $sidebar = Sidebar::with('subcategories')->whereNull('parent_id')->get();
          // dd($sidebar->first());

       return Inertia::render('Admin/Index', [
            'sidebar' => $sidebar,
            'isDarkMode' => false,
        ]);


    }
}