Почему не работает infinite scroll vue js на nuxt?

Question

[Алексей Тихонравов]

Добрый день.
У меня такая проблема, при попытки подключения infinite scroll
https://peachscript.github.io/vue-infinite-loading...

Вот script в моем page

import axios from 'axios';
	import InfiniteLoading from 'vue-infinite-loading';

	const api = './json/catalog.json';

	export default {
		components: {
		    InfiniteLoading,
		},
		props: ['startData'],
		data() {
			return {
				page: 1,
				list: [],
			}
		},
		methods: {
			routeCard(id) {
				console.log(id)
				this.$router.push({ path: `/catalog/${id}`  })
			},
		    infiniteHandler($state) {
		    	console.log('GET API')
		      		axios.get(api, {
		        		params: {
		          			page: this.page,
		        		},
		      }).then(({ data }) => {
		        if (data.length) {
		        	console.log('xyu')
		          this.page += 1;
		          this.list.push(...data);
		          $state.loaded();
		        } else {
		          $state.complete();
		        }
		      });
		    },
		  },
		
	}

Структура html

<div
		@click="routeCard(item.id)"
		class="card-product" 
		v-for="(item,index) in list"
		:key="item.id"
		v-bind:data-index="index"
		>	
			<div class="card-product-status">
				<div 
				class="card-product-status__item hit"
				v-show="item.hit"
				>хит</div>
				<div 
				class="card-product-status__item sale"
				v-show="item.sale"
				>sale</div>
				<div 
				class="card-product-status__item new"
				v-show="item.new"
				>новинка</div>
			</div>
			<img :src="item.image" class="card-product-image">
				
			</img>

			<div class="card-product-content">
				<div class="card-product-content__brand">
					{{item.brand}}
				</div>
				<div class="card-product-content__title">
					{{item.title}}
				</div>
				<div class="card-product-content-panel">
					<div class="card-product-content-panel__price">
						{{ item.price }} ₽
					</div>
					<logoBasket class="card-product-content-panel__basket">
							
					</logoBasket>
				</div>
				
			</div>
		</div>
		
		<infinite-loading @infinite="infiniteHandler"></infinite-loading>

В vueDevTools list равен пустому массиву и не заполняется


Делал все вроде по документации

Я еще новичек во vue/nuxt прошу не судить меня строго и подсказать.