如何在 Vue.js 中使用组件和选项卡组件来动态显示多个同一组件实例？

<template>
  <div>
    <h1>测试</h1>
    <div>
      <el-radio-group v-model="radio1" @input="radio_onchange">
        <el-radio-button v-for="(item, index) in page_list" :key="index" :label="item.view_code">{{item.label}}</el-radio-button>
      </el-radio-group>
    </div>
    <div>
      <keep-alive>
        <component :is="radio1" :message="message"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import Test1 from "@/testComponent/test1.vue";
import Test3 from "@/testComponent/test3.vue";

export default {
  data() {
    return {
      radio1: "a1",
      message: undefined,
      page_list: [
        { seq: 1, view_code: "a1", label: "测试1", type: 1 },
        { seq: 3, view_code: "b0", label: "特定测试组件A", type: 2, message: "参数777", is_regist: false },
        { seq: 4, view_code: "bc", label: "特定测试组件B", type: 2, message: "参数666", is_regist: false },
      ],
    };
  },
  components: {
    a1: Test1,
  },
  methods: {
    radio_onchange(value) {
      const item = this.page_list.find((item) => item.view_code === value);
      if (item.type != 2) {
        return;
      }
      if (!item.is_regist) {
        Vue.component(item.view_code, Test3);
        item.is_regist = true;
      }
      this.message = item.message;
    },
  },
};
</script>