How to add a Components instead of the Html code ?

Question

Here is the code :
https://code.sololearn.com/W4CKjK1g7l2u/?ref=app

I want to add a Component in which the user play with props and states ...
I have done it locally on phone on ACode editor but cant add it on sololearn ....

I want to add three components

Todo App -> todoListCon -> todo Items

Answer 1

this is how i usually did in sololearn, not exactly 3 components hierarchy but you get the idea
https://code.sololearn.com/WLCLQfA91v41/?ref=app

Answer 2

Rei thanks for your answer.
I need three components bro
Read the last line bro

Answer 3

its practically same code, i updated the code

Answer 4

Have you look at this vue js docs?
I search i found you need to add this for adding components

Vue.component(name,{
template:"<p>hello </p>",
props:[Props]
})