you want in the Composition API, but in the Options API, we are limited to the options like data, computed properties, or methods. So let's go ahead and take a look at how to make use of the Composition API. So to start, we have to make a new setup method here. And this is where all of our options are going to go, and we can structure it however we want. So let's start with state. So here is our state here. And as you know, anything that returns an object in the data property is reactive in Vue.

And in the next video, we'll take a look at using refs, and we'll compare both of them. So like I said, I want this to be reactive. So let's say reactive, and I'm going to press tab here. And that automatically imported it from view here. And reactive takes an object as a parameter. And that object is your state. And I copied that. So let's just paste that in. And now our state should be reactive. Now the other thing you have to do in the setup method is return what you want to be

And now our state should be reactive. Now the other thing you have to do in the setup method is return what you want to be available in the template. So in our case, we want the state to be available in the template. So we can return it like this. And now in our template, we just have to replace all of our instances of state, because we changed it to state like this. So we have to update this accordingly. Update state.todos. And I'm just going to comment this part out now, which has to do with computer properties.

Update state.todos. And I'm just going to comment this part out now, which has to do with computer properties. Okay. So if I save this, let's see what we get in the browser. Okay, and it still renders correctly. So now let's start moving over our methods. So the first method is this addTodo method. So let's take a look at that addTodo. Okay, let's make sure we get rid of the old data here to make sure that it's using the composition API.

Okay, let's make sure we get rid of the old data here to make sure that it's using the composition API. So I no longer need this. Let's delete this data. And let's make sure it still renders. And it looks like it does. Cool. So back to addToDo. So let's just grab the logic for addToDo here. And then let's delete it.

So let's just grab the logic for addTodo here. And then let's delete it. Because we're going to move it to the setup method. And let's add that right here. So let's use the function keyword, you can make it an arrow function too, if you want. Say addTodo. And let's paste in that code. And now all references to this are now references to our state. So let's do that. And don't forget, we want this to be available in our template.

So let's do that. And don't forget, we want this to be available in our template. So we have to return it here. And now that I remove that, yeah, I did. Let's see if addTodo works now in our app. Adding. Okay, and it does. So I hope you can see the flexibility of this. If you look at that diagram, again, you'll see you can structure your code however you want.

And it still works. So I'm just gonna put that back. And let's just continue adding the rest of the stuff in the composition API. So let's do the same for deleting toDos. So it takes in an ID. So I'm just grab this whole thing. We no longer need this. And again, we can put it wherever we want. It's gonna put it underneath addToDo. Say function, deleteToDo, and don't need the comma.

It's gonna put it underneath add to do. Say function, delete toDo, and don't need the comma. And the references to this are now references to state. Sorry, this is, let's put this back. Okay. Let's check if that worked. Hello. And deleting up. Forgot to return it. And you're probably gonna forget this when you start using the composition API.

Forgot to return it. And you're probably gonna forget this when you start using the composition API. So make sure to always return what you want to be available in the template. Hello. And delete. Cool. So I also had that counter which showed how many items are left to do. And that is using a computed property right here called itemsLeft. So let's put this back. Remember, I commented it out.

So let's put this back. Remember, I commented it out. And let's see how to do computer properties. So I named it itemsLeft. So let's go ahead. And again, we can put it wherever we want in here. So let's do const itemsLeft equals, and we want it to be a computed property. So we can do computed. And I'm going to press tab and this should import it right here. And now this just takes a callback.

And I'm going to press tab and this should import it right here. And now this just takes a callback. So let's add that. And it's pretty much the same as what we have in here, we just have to replace the reference to this state. And that should work. So let me get rid of computed since we switched that over now. Okay. And again, don't forget, return it here. So itemsLeft.

And again, don't forget, return it here. So items left. And let's see if that works. 3, 2, 1, 0. Cool. Okay, now let's take a look at lifecycle hooks. And I have one in my code here. It's not really doing anything. It's just console.logging to mounted. And it's also console.logging the prop.

It's just console logging to do mounted. And it's also console logging the prop. So let's take a look at how to do lifecycle hooks. So it's pretty similar to computed properties here. And if you scroll down a bit, you'll see mapping the lifecycle hooks in Vue 2 to the composition API. So for created and beforeCreate, you just put that logic directly in the setup method. But for everything else, you can replace it with this new method. So in our case, we're making use of the onMounted hook. So let's do that.

So in our case, we're making use of the onMounted hook. So let's do that. So I'm gonna put it down here. Again, you're free to put this wherever you want, say onMounted, and I'm going to press tab and that should import it. And again, it's just a callback. And then we can just paste this logic in here. Let's do this, paste it in here. And let's get rid of this mounted hook. And this is the prop coming in.

And let's get rid of this mounted hook. And this is the prop coming in. So props, when you define them, it remains the same, as you see here. And you can use the object syntax if you want, but I'm just using the array syntax here. And the only thing I'm doing with the prop is, I'm console.logging it in the mounted hook here. But I'm also making use of it in the template for the title. So right here, so that would correspond to this to do app. And I'm just passing that in from the parent component, which is App.vue. And there you see the prop being passed in here.

And I'm just passing that in from the parent component, which is App View. And there you see the prop being passed in here. So for props, to get access to them, the template is fine, we don't have to change anything. But for our setup method, you can just pass in the props as an argument here. So say props. And then we can just refer to that instead of this. So now in our onMounted hook, we can just do props.title. And this should work as before. So if I open my DevTools, and there you see there, let me just refresh to make sure. And it does work, cool.

So if I open my DevTools, and there you see there, let me just refresh to make sure. And it does work, cool. And one more thing you might want to convert over is watchers. So I have this watcher here that just watches the todoId property. And it just outputs the new value and the old value. So this is how you would do it in the view two way. So let's go ahead and convert this to the composition API. So we can just say watch here. And I believe we have to import that. So it should have imported it Yep.

And I believe we have to import that. So it should have imported it Yep. And the first argument is going to be a callback. And whatever is returned is the thing you are watching for. So that would be state.toDoId. And the second argument is going to be pretty much the same as what we have in the options API. So newValue, oldValue, and that's going to be a method as well. And here is where this logic goes. So we can do the same thing.