如何使用VueJs动态加载多个标记？

<template>
  <div>
    <div v-for="tag in tags" :key="tag.id">
      <component :is="tag.component"></component>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tags: [] // 存储动态加载的标记配置
    };
  },
  created() {
    // 动态加载标记配置数据
    this.loadTags();
  },
  methods: {
    loadTags() {
      // 从后端或其他来源获取标记配置数据
      // 根据实际需求，可以使用axios等库发起HTTP请求获取数据
      // 示例中使用静态数据作为示范
      const tagConfigs = [
        { id: 1, component: 'ComponentA' },
        { id: 2, component: 'ComponentB' },
        { id: 3, component: 'ComponentC' }
      ];
      this.tags = tagConfigs;
    }
  },
  components: {
    ComponentA: () => import('./ComponentA.vue'), // 动态导入标记组件A
    ComponentB: () => import('./ComponentB.vue'), // 动态导入标记组件B
    ComponentC: () => import('./ComponentC.vue')  // 动态导入标记组件C
  }
};
</script>