VUE - Call a function after v-for has done looping

Question

This is my approach of calling a method after v-for has done looping. It works perfectly fine but i still want to know if there's a better approach than this or if vue is offering something like v-for callback. Parent Component

<template>
    <loader-component v-show="show_loader" />
    <list-component @onRendered="hideLoader"/>
</template>

<script>
export default {
    components: {
        loaderComponent,
        listComponent
    },
    data() {
        return {
            show_loader: true
        }
    }
    methods: {
        hideLoader() {
            this.show_loader = false;
        }
    }
}
</script>

List Component

<template>
    <item-component v-for="(item, key) in items" :isRendered="isRendered(key)" />
</template>

<script>
export default {
    prop: ['items'],
    methods: {
        isRendered(key) {
            let total_items = this.items.length - 1;
            if (key === total_items) {
                this.$emit('onRendered');
            }
        }
    }
}
</script>

Answer 1

I believe there is a misunderstanding in how exactly Vue updates its reactive properties.

I made a little demo for you hoping it clears it up.

https://codesandbox.io/s/prod-star-pzjhc

I would also recommend some reading from the Vue docs computed properties