Vue computed property

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