Laravel + vueを使用してBladeを通してvueに変数を渡しているのだがうまく表示されない

Question

bladeで変数受け渡し（JSON）

@extends('layouts.app')

@section('content')
<div>
    


    <test-component :items='{{ $items }}'></test-component>

    
  </div>
@endsection

vueコンポーネント

<template> 

<ul id="example-1">
  <li v-for="item in items" :key="item.id">
    {{ item.id }}
  </li>
</ul>




</template>

<script>
  // Vue.js のインスタンス
module.exports = new Vue({
　props:{
  items:{
      type:Object,
      defalut:{},
    },
  },

処理結果。

<ul id="example-1" items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"></ul>

というような状況に見舞われています。bladeから受け渡された値を<li>表示したいのですが、よくわかりません。

Vue warn]: Property or method "items" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

といったワーニングも出ています。
解決できなくて困っています。

誠に申し訳ございませんが、よろしくお願いいたします。

Answer 1

// Vue.js のインスタンス
module.exports = new Vue({

の表記かが間違っていました。
すみません。

Answer 2

$itemsの中身がよく分からないので違うかもしれませんが

<test-component :items='@json($items)'></test-component>

でどうなるでしょう？

Comments

[gomengo]

元がjsonのはずなのですが、試しても同じでした

[gomengo]

<ul id="example-1" items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"></ul>

<li></li>に値が挟まらないので困っています。