我有用户的数组数据，并通过惯性渲染方法将其从路由到Dashboard.vue组件，其中我无法将用户数据从Dashboard.vue组件传递到Users.vue组件。

Route::get('/dashboard', function () {
        $users = User::all();
        return Inertia::render('Dashboard', ['users' => $users]);
    })->name('dashboard');

vue父组件

<Users title="Hello world" users="{{ $users }}"></Users> //this one passing {{ $users }} as string data in props.

<Users title="Hello world" :users="{{ $users }}"></Users> //this one getting syntax error.

users.vue子组件

<template>
<div>
  <h1>Component Displayed</h1>
  <p>{{ title }}</p>
    <ul v-for="user in users" :key="user.id">
        <li>{{ user.name }}</li>
    </ul>
</div>
</template>

<script>
export default{
  props:{
    users:Array,
    title:String
  }
}
</script>

有人能给我建议一下如何在Vue js中将数组数据从一个组件传递到另一个组件吗？