laravel - vueコンポーネントにページネーションlaravelを表示するにはどうすればよいですか?

Question

このような私のコントローラ：

public function index()
{
    $products = $this->product->list(); 
    dd($products);
    return view('admin.product.index',compact('products'));
}

このような結果dd($products);: https://postimg.org/image/w39usbfrv/

このような私のビューブレードlaravel：

<section class="content">
    <product-list :product-data="{{json_encode($products)}}" :page="{{json_encode($products->links())}}"></product-list>
</section>

次のような私のvueコンポーネント製品リスト：

<template>
    <div class="box">
        ...
            <table class="table table-list">
                ...
                <tr v-for="item in products" :key="item.id">
                    <td>{{item.name}}</td>
                    <td>{{item.createdAt}}</td>
                    <td>{{item.updatedAt}}</td>
                </tr>
                ...
            </table>
            <div class="box-footer">
                ...
                    {{this.page}}
                ...
            </div>
        ...
    </div>
</template>
<script>
    export default {
        props: ['productData','page'],
        data(){
            return {
                ...
                products: this.productData.data,
            }
        },
        ...
    }
</script>

コードを実行すると、結果{{this.page}}は空です

これが：{{$products->links()}}ビューlaravelに配置されている場合、動作します

しかし、それが vue コンポーネントに渡された場合、結果は空です

どうすればこの問題を解決できますか?

ノート ：

私は ajax リクエストの使い方を知っています。しかし、私はそれを使用しません。ここで、別の方法を試してみたいだけです