Ошибка при попытке отобразить значение с помощью v-for в vue

Question

У меня возникли проблемы с пониманием ошибки, которую я получаю с помощью vue.js, и надеюсь, что кто-то может мне здесь помочь. Я считаю, что это глупая ошибка, но я не могу ее обнаружить.

Я получаю эту ошибку здесь: Использование неопределенных постоянных провайдеров - предполагаемых "провайдеров". Я использую Ларавел и лезвие здесь. Я получаю эту ошибку в браузере. Я предполагаю, что это как-то связано с тем, как я пытаюсь отобразить объект провайдеров с помощью цикла v-for в vue.js, и, поскольку я новичок, я, вероятно, здесь ошибаюсь. Вот мой код:

Составная часть:

Vue.component('filter-section', {
   template: "#filter-template",
   props: ['providers']
});

// create a root instance
new Vue({
   el: '#home-filter-result'
});

Фильтр-blade.php

<div id="home-filter-result">
  <filter-section v-for="item in providers" :providers='{!! $providers !!}'>
  </filter-section>
  <template id="filter-template">
    {{ item }}  
  </template>
</div>

Провайдеры - это объекты в этом формате:

провайдеры: Array[20] 0:Object

значение1: "1"

значение2: "2"

значение3: "3"