Framework7 : state vs data

Questions
1

I want to clarify the difference between state and data in framework7.

Let’s say I am building a mobile app that calls API and render response data received from server.

<template>
	<!-- template -->
	{{#each customers}}
		<!-- render each customer -->
	{{/each}}
</template>

<script>
	return {
		methods: {
			getData: {
				const self = this;
				app.request.get('http://example.com/customers').then((res) => {
					self.$setState({customers: res.customers});
					self.$update();
				});
			}
		},
		on: {
			pageBeforeIn: function() {
				this.getData();
			}
		}
	}
</script>

Should I put list of customers returned from server to data instead of state?

<template>
	<!-- template -->
	{{#each customers}}
		<!-- render each customer -->
	{{/each}}
</template>

<script>
	return {
		data: function() {
			return {
				customers: []
			}
		},
		methods: {
			getData: {
				const self = this;
				app.request.get('http://example.com/customers').then((res) => {
					self.customers = res.customers;
					self.$update();
				});
			}
		},
		on: {
			pageBeforeIn: function() {
				this.getData();
			}
		}
	}
</script>

If I do so then when the list changed (for example, the user scrolls the page and the page calls API to load more data) how can I update the view to reflect the change?
Does $update() worked the same way as when I put the list of cutomers in state?