如何在模板中循环components对象？

components: {
  component1: 'Component 1',
  component2: 'Component 2',
  component3: 'Component 3'
}

<template>
  <div>
    <div v-for="(value, key) in Object.entries(components)" :key="key">
      {{ key }}: {{ value }}
    </div>
  </div>
</template>

components: {
  component1: 'Component 1',
  component2: 'Component 2',
  component3: 'Component 3'
}

<template>
  <div>
    <div v-for="(component, index) in componentsArray" :key="index">
      {{ component }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      components: {
        component1: 'Component 1',
        component2: 'Component 2',
        component3: 'Component 3'
      }
    };
  },
  computed: {
    componentsArray() {
      return Object.values(this.components);
    }
  }
};
</script>