Possible to put component in array and render them?

I want to create a component and put that component in an array to render it later. I don’t want to take the data from the component, pass it, then reconstruct it. Is this possible?

What I am trying to do is currently not working and gives the error The "data" option should be a function that returns a per-instance value in component definitions but I don’t know if that is referring to this part of the code.

Code to create TodoItem component and add it to array

    addTodo() {
      if (!this.isTodoItemSet()) {
        this.throwError("You must input a todo!");
        return;
      }

      this.clearError();
      const todoItem = this.createTodoItem();
      this.addItem(todoItem);
    },

    createTodoItem() {
      const todoItem = <TodoItem id="this.newItemId" title="this.todoItem" />;
      this.newItemId += 1;
      return todoItem;
    },

    addItem(todoItem) {
      this.$props.todoItems.push(todoItem);
      console.log(this.$props.todoItems);
    },

Attempting to render the components from the array

<template lang="">
  <div>
    <li v-for="item in this.$props.todoItems" :key="item.id">
      <component v-bind:is="item"></component>
    </li>
  </div>
</template>
<script>
import TodoItem from "./TodoItem.vue";

export default {
  components: {
    TodoItem,
  },

  props: {
    todoItems: [],
  },
};
</script>
<style lang=""></style>