[Vuejs]-How to render recursive components outside of parent component in Vue.js?

const tree = [
    {
      name: "hello",
      children: [
        {
          name: "world",
          children: [
            {
              name: "bye"
            }
          ]
        },
        {
          name: "hola"
        }
      ]
    },
    {
      name: "how",
      children: [
        {
          name: "is",
          children: [
            {
              name: "life"
            }
          ]
        }
      ]
    }
];

function getData(tree) {
    if (tree && typeof tree[0].children === "undefined") return tree[0].name;
    var outputString = [];
    for (let i = 0; i < tree.length; i++) {
        if (typeof tree[i].children != "undefined") {
          outputString.push(tree[i].name, getData(tree[i].children));
        } else {
          outputString.push(tree[i].name);
        }
    }

    return outputString.toString().split(",");
}
console.log(getData(tree));