Vue component

Array.vue

<template>
    <div class="widget">
        <div v-if="activeItems && activeItems.length > 0">
            <ul>
                <li :key="item.id" v-for="item in activeItems">
                    {{item.name}}
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    export default {
    data() {
      return {
        loading: true,
        list: {
          'John': true,
          'Jane': true,
          'Bob': false
        },
      }
    },
    computed: {
      activeItems() {
        var result = [];
        var list   = this.list
        var keys   = Object.keys(list);

        for(let i = 0;i <= keys.length; i++ ) {
            if (list[keys[i]] == true) {
                let newItem =  {name:keys[i], active:true};
                result.push(newItem);
            }
        }
        return result
      }
    }
  }
</script>