Vue Test - Computed Property

VTest.vue

<template>
    <div class="widget">
        <div v-if="activeItems && activeItems.length > 0">
            <ul>
                <li
                    v-for="item in activeItems"
                    :key="item.id"
                >
                    {{ item.name }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: true,
            list: {
                'John': true,
                'Jane': true,
                'Bob': false
            },
        }
    },
    computed: {
        activeItems() {
            /*
              return `this.list` as an Array of object and filter by if active is true
              Expected output
              [
                {name: 'John', active: true},
                {name: 'Jane', active: true}
              ]
            */

            return Object.keys(this.list).map((key) => {
                return {
                    name: key,
                    active: this.list[key],
                }
            }).filter((item) => item.active);
        }
    }
}
</script>