Inertiaでpaginationを実装

Question

Vue.js、laravelでSPAアプリを作っています。Inertiaでpaginationを実装しようとしているのですが、エラーがでて困っております。

class TaskController extends Controller
{
    public function index() 
    {
　　　　　　　　　　　　　　　$tasks = DB::table('tasks')->orderBy('created_at', 'desc')->paginate(2);

        return Inertia::render (
            'Task/Index',
            ['tasks'=> $tasks]
        );
    }
}

↑このようにpaginate(数字)をつけることで全件中2件とって来れると思うのですが、[TypeError: Cannot read properties of null (reading 'id')]が出てきてしまいます。

※consoleではしっかりcurrent_pageの件数が２件と内容も出力されています。

class TaskController extends Controller
{
    public function index() 
    {
　　　　　　　　　　　　　　　$tasks = DB::table('tasks')->orderBy('created_at', 'desc')->get()->paginate(2);

        return Inertia::render (
            'Task/Index',
            ['tasks'=> $tasks]
        );
    }
}

↑もちろんget()をつければ全件とってこれますが、paginateがやりたいので、仮に上記のようにget()の後ろにpaginateを指定するとエラーが出ます。getとpaginateは混在できないですよね。

試したことは下記の記事を参考にしました。
https://stackoverflow.com/questions/66846136/laravel-inertia-vuejs-pagination
しかし解決には至らず。。。

　InertiaではLaravelのデフォルトのpaginateが使えなそうという事でしたが、いろんな記事や公式を見てもそんなことはなさそうで、普通に末尾にpaginate(数字)をつけて問題なさそうです。

原因が突き止められず質問させて頂きました。

<template>
    <app-layout title="Tasks">
        <header-component></header-component>
		<div class="flash_message" id="flash_message" v-if="show === true">
			<i class="far fa-check-circle mr-1"></i>
			{{ $page.props.flash.success }}
		</div>
		
        <table class="min-w-full border-collapse block md:table">
	        <thead class="block md:table-header-group">
	        	<tr class="border border-grey-500 md:border-none block md:table-row absolute -top-full md:top-auto -left-full md:left-auto  md:relative ">
	        		<th class="bg-gray-600 p-2 text-white font-bold md:border md:border-grey-500 text-left block md:table-cell">Number</th>
	        		<th class="bg-gray-600 p-2 text-white font-bold md:border md:border-grey-500 text-left block md:table-cell">Title</th>
	        		<th class="bg-gray-600 p-2 text-white font-bold md:border md:border-grey-500 text-left block md:table-cell">Content</th>
	        		<th class="bg-gray-600 p-2 text-white font-bold md:border md:border-grey-500 text-left block md:table-cell">Person in Charge</th>
	        		<th class="bg-gray-600 p-2 text-white font-bold md:border md:border-grey-500 text-left block md:table-cell">Actions</th>
	        	</tr>
	        </thead>
	        <tbody class="block md:table-row-group" v-for="(task, index) in tasks" :key="index">
	        	<tr class="bg-gray-300 border border-grey-500 md:border-none block md:table-row">
	        		<td class="p-2 md:border md:border-grey-500 text-left block md:table-cell"><span class="inline-block w-1/3 md:hidden font-bold">Number</span>{{ task.id }}</td>
	        		<td class="p-2 md:border md:border-grey-500 text-left block md:table-cell"><span class="inline-block w-1/3 md:hidden font-bold">Title</span>{{ task.title }}</td>
	        		<td class="p-2 md:border md:border-grey-500 text-left block md:table-cell"><span class="inline-block w-1/3 md:hidden font-bold">Content</span>{{ task.content }}</td>
	        		<td class="p-2 md:border md:border-grey-500 text-left block md:table-cell"><span class="inline-block w-1/3 md:hidden font-bold">Person in Charge</span>{{ task.person_in_charge }}</td>
	        		<td class="p-2 md:border md:border-grey-500 text-left block md:table-cell">
	        			<span class="inline-block w-1/3 md:hidden font-bold">Actions</span>
                        <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-2 border border-green-500 rounded">
							<Link :href="`/task/${task.id}`">
								show
							</Link>
						</button>
	        			<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 border border-blue-500 rounded">
							<Link :href="`/task/${task.id}/edit`">
								Edit
							</Link>
						</button>
	        			<button @click="deleteTask(task)" class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 border border-red-500 rounded">
							Delete
						</button>
	        		</td>
	        	</tr>	
	        </tbody>
	    </table>
		<paginator :paginator="tasks" />
    </app-layout>
</template>

<script>
    import { defineComponent } from 'vue'
    import AppLayout from '@/Layouts/AppLayout.vue'
    import HeaderComponent from '@/Pages/components/HeaderComponent.vue'
	import { Link } from '@inertiajs/inertia-vue3'
	import Paginator from "@/Components/Paginator";

	
    export default defineComponent({
        components: {
            AppLayout,
            HeaderComponent,
			Link,
			Paginator,
        },
		props: [
			'tasks',
			'show',
		],
		data: function() {
			return {
				show:false
			}
		},
		methods: {
			deleteTask: function (task) {
				this.$inertia.delete('/task/'+ task.id);
				this.show = true;
			},
		},
		updated() {
			setTimeout(() => {
				this.show = false}
				,3000
			)
		},
		mounted: function () {
			this.show = this.$page.props.flash.show;
			setTimeout(() => {
				this.show = false}
				,3000
			)
		}
    })

</script>
<style>
	.flash_message {
		background-color: rgb(122, 196, 27);
		width: 280px;
		font-size: 0.8rem;
		padding-left: 10px;
		padding-top: 5px;
		padding-bottom: 5px;
		position: fixed;
		top: 13.5%;
		left: 1%;
		opacity: 0.9;
		border-radius: 6px;
		z-index: 10;
	}
</style>

表示はInertiaVuePaginatorというものを使って表示させる予定です。
<paginator :paginator="tasks" />のところはそれになります。

何卒ご教示いただけると幸いです。