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

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>