vue项目怎么在函数中注册并渲染组件？

原本组件片段是在函数中createElement的节点，然后appendChild到页面中的。
但是现在想把这一部分的功能提出来通过vue组件的方式添加到页面中。
因为是在函数中创建的节点，在DOM中没有固定的位置，所以，不太适合在template里面渲染组件了。
请问有什么方法？

for (let i = 0; i < userData.length; i ++) {
        let divCard = document.createElement("div");
        divCard.className = "card";
        divCard.style.backgroundColor =
          "rgba(0,127,127," + (Math.random() * 0.5 + 0.25) + ")";

        let divClass = document.createElement("div");
        divClass.className = "class";
        divClass.textContent = userData[i].class;
        divCard.appendChild(divClass);

        let divName = document.createElement("div");
        divName.className = "name";
        divName.textContent = userData[i].name;
        divCard.appendChild(divName);

        let divNumber = document.createElement("div");
        divNumber.className = "number";
        divNumber.textContent = userData[i].No;
        divCard.appendChild(divNumber);
        ...
        this.$refs.lottery.appendChild(this.renderer(divCard));
        }