Untitled

return view('reports.single', [
  'orderData' => $orderData
]);

<example-component :orders='@json($orderData)'></example-component>

<script>
export default {
  props: [
    'orders'
  ],
  mounted() {
    console.log(this.$props.orders)
  }
}
</script>

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
    ... Тут остальная разметка
  </head>
  <body>

    <div id="app">
        @yield('content')
    </div>

    <script>
      "use strict";

      // Объявляем глобальный контейнер для данных
      window.vueData = {}
    </script>

    {{-- Объявляем стек, к которому дочерние шаблоны могут "стыковать" свои данные --}}
    @stack('vue-data')

    {{-- Подключение основных скриптов, как пример --}}
    <script src="/js/app.js"></script>
  </body>
</html>

@extends('layouts.app')

@section('content')
    <example-component></example-component>
@endsection

{{-- Отправляем необходимые данные в стек --}}
@push('vue-data')
  <script>
    // Объявляем новое свойство.
    Object.defineProperty(vueData, 'orderData', {
      writable: false,
      configurable: false,
      value: @json($orderData)
    })
  </script>
@endpush

<script>
export default {
  data() {
    return {
      orders: vueData.orderData
    }
  },

  mounted() {
    console.log(this.orders)
  }
}

</script>