demo for performance of https://github.com/nextcloud/nextcloud-vue/pull/486

App.vue

<template>
	<Content app-name="vueexample">
		<AppNavigation>
			<ul id="app-vueexample-navigation">
				<AppNavigationItem v-for="item in items"
					:key="item"
					:title="item"
					@click="dummy">
					<template slot="actions">
						<ActionButton icon="icon-starred" @click="dummy">
							Favorit
						</ActionButton>
						<ActionButton icon="icon-files-dark" @click="dummy">
							Kategorie
						</ActionButton>
						<ActionButton icon="icon-delete" @click="dummy">
							Löschen
						</ActionButton>
					</template>
				</AppNavigationItem>
			</ul>
			<AppNavigationSettings>
				Example settings
			</AppNavigationSettings>
		</AppNavigation>
		<AppContent>
			<span>This is the content</span>
			<button @click="longnav = !longnav">
				Toggle navigation
			</button>
		</AppContent>
	</Content>
</template>

<script>
import {
	Content,
	ActionButton,
	AppContent,
	AppNavigation,
	AppNavigationItem,
	AppNavigationSettings
} from 'nextcloud-vue'
export default {
	name: 'App',
	components: {
		Content,
		ActionButton,
		AppContent,
		AppNavigation,
		AppNavigationItem,
		AppNavigationSettings
	},
	data: function() {
		return {
			longnav: false
		}
	},
	computed: {
		itemsLong: function() {
			let items = []
			for (let i = 1; i <= 200; i++) {
				items.push('Item ' + i)
			}
			return items
		},
		items: function() {
			return this.longnav ? this.itemsLong : []
		}
	},

	beforeUpdate() {
		console.debug('vue: beforeUpdate')
	},

	updated() {
		console.debug('vue: updated')
		this.$nextTick(function() {
			console.debug('vue: updated -> nextTick')
		})
	},

	methods: {
		dummy() {
			console.debug('Action')
		}
	}

}
</script>