Vuejs2 如何在Laravel中使用刀片视图获得Vue v-for列表渲染

我正在使用Laravel练习Vue列表渲染，无法使用v-for指令在刀片视图中显示数据

我试过互联网上的各种例子。我有一个简单的列表，其中有一些我想在列表中显示的项目，但是我没有显示内容，而是接收到显示在屏幕上的项目名称，如{{item.name}

这是my item.blade.php视图文件中的相关部分：

 <ul>
   <li v-for="item in inventory">
   @{{ item.name }}
   </li>
 </ul>
</div>


@section('scripts.app.footer')
   <script type="text/javascript" src="{{ mix('js/app2.js') }}"></script>
@endsection

---

我在浏览器中得到的只是

{{{item.name}}

我希望看到4个项目名称的列表。我不确定我会错在哪里，因为我已经看过其他示例，我的另一个团队项目与v-for（使用.js文件，而不是.vue文件）配合得很好，但我无法得到一个简单的列表来显示。任何帮助都将不胜感激。npm运行开发也运行良好

数据必须返回数据对象

Data:（）=>{return{a:'stuff'}}

<template>
  <div>
    <ul>
      <li v-for="item in inventory" :key="item">@{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data: () => {
    return {
      inventory: [
        { name: "MacBook Air", price: 1000 },
        { name: "MacBook Pro", price: 1800 },
        { name: "Lenovo W530", price: 1400 },
        { name: "Acer Aspire One", price: 300 }
      ]
    };
  }
};
</script>

@{{item.name}

导出默认值{
数据：（）=>{
返回{
库存：[
{名称：“MacBook Air”，价格：1000}，
{名称：“MacBook Pro”，价格：1800}，
{名称：“联想W530”，价格：1400}，
{名称：“宏基Aspire One”，价格：300}
]
};
}
};

<template>
  <div>
    <ul>
      <li v-for="item in inventory" :key="item">@{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data: () => {
    return {
      inventory: [
        { name: "MacBook Air", price: 1000 },
        { name: "MacBook Pro", price: 1800 },
        { name: "Lenovo W530", price: 1400 },
        { name: "Acer Aspire One", price: 300 }
      ]
    };
  }
};
</script>