Using Vue component in this gist link. Complete the computed property "activeItems". https://gist.github.com/anish-dcruz/1fa2af7357914750ee2e21f74db4231b .

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