Display data, relational database with inertia + vue

I need help, I am trying to display data with inertia and vue.js from a related database, but I get the following error:

Uncaught (in promise) TypeError: can't access property "categoria", subcategoria.categorias is undefined

Código

<?php

namespace App\Http\Controllers;

use App\Models\Categoria;
use App\Models\SubCategoria;
use Illuminate\Http\Request;
use Inertia\Inertia;

class RelacionController extends Controller
{
    public function index(){
        $subcategorias = SubCategoria::all();
        return Inertia::render('Subcategorias', ['subcategorias' => $subcategorias]);
        
    }
}

vista vue

<script>
import AppLayout from '@/Layouts/AppLayout.vue';

export default {
    components: {
        AppLayout,
    },
    props: ['subcategorias']
}
</script>

<tr v-for="subcategoria in subcategorias" :key="subcategoria.idSubCategoria">
  <td>{{ subcategoria.idSubCategoria }}</td>
  <td>{{ subcategoria.subcategoria }}</td>
  <td>{{ subcategoria.categorias.categoria }}</td>
</tr>

I would like to know how to get data from a relational database with Inertia and Vue.js, I know how to get data from a non-relational database, but I'm trying to show the products with their categories, but I can even though I already have everything related, I'm missing in the view.