laravel vue.js не видит переменную

Связался я с vue.js, прочитал кучу отзывов, что это легко и просто иии попал сразу же. Ошибка, что vue не видит переменной rows. Использую laravel и у меня в файле products.vue:

<template>
<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Phone</th>
            <th>Profession</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="row in rows">
            <td>{{row.id}}</td>
            <td>{{row.name}}</td>
            <td>{{row.phone}}</td>
            <td>{{row.profession}}</td>
        </tr>
    </tbody>
</table>
</template>
<script>
    export default {
        data() {
            return {
                props: [
                  { id: 1, name: "Chandler Bing", phone: '305-917-1301', profession: 'IT Manager' },
                  { id: 2, name: "Ross Geller", phone: '210-684-8953', profession: 'Paleontologist' },
                  { id: 3, name: "Rachel Green", phone: '765-338-0312', profession: 'Waitress'},
                  { id: 4, name: "Monica Geller", phone: '714-541-3336', profession: 'Head Chef' },
                  { id: 5, name: "Joey Tribbiani", phone: '972-297-6037', profession: 'Actor' },
                  { id: 6, name: "Phoebe Buffay", phone: '760-318-8376', profession: 'Masseuse' }
                ]
            };
        },          
    }
</script>

В app.js:

Vue.component('products', require('./components/products.vue'));
const firstTable = new Vue({
  el: '#firstTable'
});

ну и в самой странице:

<div id="firstTable">
<products></products>
</div>

Если делать все в app.js через template прямо в нем - все работает, но выглядит жутко неудобно. Интересует именно такой вариант, как предлагает сам laravel.

У меня где-то есть ошибка, но где - ума не приложу, с vue работаю первый день =)