No estoy seguro de por qué los datos no están definidos a pesar de pasar la propiedad correcta del componente.

Este es mi componente vue

 Vue.component('store-squaretile-component',{ template: '#store-squaretile-component', props: [ 'storeName' ], data: function () { return {} }, });

esta es su plantilla

 <script type='text/x-template' id='store-squaretile-component'> <div class="stores-squaretile__container"> <div class="stores-squaretile__btn stores-squaretile__btn--shadow" > <!-- background of store-squaretile to be set to img --> <div class="dropdown"> <div class="stores-squaretile__threedots" data-bs-toggle="dropdown" > <i class="fas fa-ellipsis-v"></i> </div> <ul id="dropdown-menu-store" class="dropdown-menu" > <div class="'dropdown-item dropdown-title">Quick Actions</div> <div class="dropdown-line"></div> <a class="dropdown-item" href="#">Edit Store</a> <a class="dropdown-item" href="#">Delete Store</a> </ul> </div> </div> <div class="stores-squaretile__title">{{storeName}}</div> </div> </script>

Cuando paso el componente esta matriz:

 stores: [ {name: "harry's",}, {name: "Carl's junior",}, {name: "Mcdonald's",} ]

en este componente

 <store-squaretile-component v-for="store in stores" :storeName="store.name" ></store-squaretile-component>

se supone que debe reemplazar el nombre de la tienda con el nombre en la matriz, pero en su lugar obtengo un NaN o el título desaparece por completo.

Recibí un valor indefinido. ¿Hay alguna razón para esto?