Laravelにて。モーダルをVue.jsで実装する方法

LaravelとVueの勉強中です。

テーブルの行にあるボタン「出入」をクリックすると、そのデータが格納されたモーダルが出るというページで、
モーダルをVue.jsにしたいと思っています。

このようなテーブルがあり、「出入」をクリックするとモーダルが出ます。

モーダルに$productオブジェクトを渡す部分の実装方法についてアドバイスをいただけますと幸いです。

■bladeのコード　index.blade.php

@extends('layouts.admin_app')

@section('content')
<!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">商品一覧vue</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href={{ route('admin.index') }}>Home</a></li>
                    <li class="breadcrumb-item active">Product</li>
                </ol>
            </div>
        </div>
        <div class="mt-4 mb-2 col-md-2">
            <button type="button" onclick="location.href='{{ route('product.add') }}'" class="btn btn-block btn-info">新規作成</button>
        </div>
    </div>
</div>
<!-- /.content-header -->
<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="table-responsive mb-4 p-4">
                        {{ $products->links('pagination::bootstrap-4') }}
                        <table class="table table-hover text-sm" id="tbl_product">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th></th>
                                    <th>#</th>
                                    <th class="wide">商品名</th>
                                    <th>価格</th>
                                    <th class="middle">詳細</th>
                                    <th>有効/無効</th>
                                    <th>Available</th>
                                    <th>登録日</th>
                                    
                                </tr>
                            </thead>
                            <tbody>
                            @if($products)
                                @foreach($products as $product)
                                <tr>
                                    <td><button type="button" class="btn btn-pill btn-block btn-info largeModal" data-toggle="modal" data-target="#modal-lg" data-product="{{ $product }}" }}">出入</button></td>
                                    <td><button type="button" onclick="location.href='{{ route('product.edit', ['product' => $product]) }}'" class="btn btn-pill btn-block btn-warning">編集</button></td>
                                    <td>{{ $product->id }}</td>
                                    <td>{{ $product->name }}</td>
                                    <td>{{ $product->price }}</td>
                                    <td>{{ $product->description }}</td>
                                    <td>{{ Util::get_yukoflg($product->yuko_flg) }}</td>
                                    <td>{{ $product->stocks->avairable }}</td>
                                    <td>{{ $product->created_at->format('Y/m/d H:i') }}</td>
                                </tr>
                                @endforeach
                            @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>
<!-- /.main content -->
<!-- modal -->
<product-inout-modal
    :csrf='{{ json_encode(csrf_token()) }}'
    :product='@json($product)'
>
</product-inout-modal>
<!-- /.modal -->
@endsection

ここまで来て、モーダルのコンポーネントが、テーブルの外なので、$productを<product-inout-modal>に渡せないな…となりました。
……テーブルとモーダルのセットをvueのコンポーネントにして、そこから更にモーダルコンポーネントにproductオブジェクトを渡す、という方法も考えましたが、もう少しシンプルに行う方法はありますでしょうか？