[Vue warn]: Error in render: "Typeerror: Cannot read Property 'image' of Undefined" also Happens Property "name" and "price"

Question

In the Userboard.Ve template I bring the selected product with image, name and price, but does not yield and presents the error:

vue.esm.js?a026:628 [Vue warn]: Error in render: "TypeError: Cannot read property 'image' of undefined"

found in

---> <UserBoard> at resources/assets/js/views/UserBoard.vue
       <App> at resources/assets/js/views/App.vue
         <Root>

The template loads normally without the data. I also changed the call from Next to Next.(api/users/${this.user.id}/pedidos) but did not resolve.

    <template>
    <div>
        <div class="container-fluid hero-section d-flex align-content-center justify-content-center flex-wrap ml-auto">
            <h2 class="title">Seus Pedidos</h2>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <br>
                    <div class="row">
                        <div class="col-md-4 product-box" v-for="(pedido, index) in pedidos" :key="index">
                            <img :src="pedido.produto.image" :alt="pedido.produto.nome">
                            <h5><span  v-html="pedido.produto.nome"></span><br>
                                <span class="small-text text-muted">R$ {{pedido.produto.preco}}</span>
                            </h5>
                            <hr>
                            <span class="small-text text-muted">Quantidade: {{pedido.quantidade}}
                                <span class="float-right">{{pedido.entregue == 1 ? "enviado!" : "não enviado"}}</span>
                            </span>
                            <br><br>
                            <p><strong>Endereço de entrega: </strong> <br>{{pedido.endereco}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            user: null,
            pedidos: [],            
        }
    },
    beforeMount() {
        this.user = JSON.parse(localStorage.getItem('user'))
        axios.defaults.headers.common['Content-Type'] = 'application/json'
        axios.defaults.headers.common['Authorization'] = 'Bearer' + localStorage.getItem('jwt')

        axios.get('api/users' + this.user.id + '/pedidos')
        
             .then(response => {
                 this.pedidos = response.data
             })

             .catch(error => {
                 console.error(error);
             })
    }
    
}
</script>

    <?php

namespace App\Http\Controllers;

use App\Models\Pedido;
use App\Models\Produto;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class PedidoController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
        return response()->json(Pedido::with(['produto'])->get(), 200);
        // return response()->json(Pedido::with('produto')->orderBy('id','DESC')->paginate(10) , 200);
    }

    public function entregarPedido(Pedido $pedido)
    {
        $pedido->entregue = true;
        $status = $pedido->save();

        return response()->json([
            'status' => $status,
            'data' => $pedido,
            'message' => $status ? 'Pedido Entregue!' : 'Erro ao entregar pedido'
        ]);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
        $pedido = Pedido::create([
             'produto_id' => $request->produto,
             'user_id' => Auth::id(),
             'quantidade' => $request->quantidade,
             'endereco' => $request->endereco
        ]);

        return response()->json([
            'status' => (bool) $pedido,
            'data' => $pedido,
            'message' => $pedido ? 'Pedido Criado!' :  'Erro ao criar pedido'
        ]);
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Models\Pedido  $pedido
     * @return \Illuminate\Http\Response
     */
    public function show(Pedido $pedido)
    {
        //
        return response()->json($pedido,200);
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Models\Pedido  $pedido
     * @return \Illuminate\Http\Response
     */
    public function edit(Pedido $pedido)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Models\Pedido  $pedido
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Pedido $pedido)
    {
        //
        $status = $pedido->update(
            $request->only(['quantidade'])
        );

        return response()->json([
            'status' => $status,
            'message' => $status ? 'Pedido Atualizado' : 'Erro ao atualizar produto'
        ]);
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Models\Pedido  $pedido
     * @return \Illuminate\Http\Response
     */
    public function destroy(Pedido $pedido)
    {
        //
        $status = $pedido->delete();

        return response()->json([
            'status' => $status,
            'message' => $status ? 'Pedido excluído!' : 'Erro ao excluir pedido'
        ]);
    }
    public function json(Pedido $pedido)
    {
        $produtos = $pedido->line_items;
        $produtosId = array_column($produtos, 'produto_id');
        $orderedProducts = Produto::whereIn('id', $produtosId)->get()->groupBy('id');
        return response()->json(['pedidos' => $pedido, 'orderedProducts' =>$orderedProducts->toArray() ]);
    }
}