Okay, let's take a look at refs, which are another way to make state reactive in the composition API. So the idea with refs is instead of using objects, we can separate our state into primitive types and wrap them in a ref method. So let's see how that would look like in our current code. So right now, our state has three pieces of state, but it's wrapped in an object here and we're using the reactive method. So now let's separate them out into separate variables and use refs here. So it's a const to do from input. And just like how we wrapped our state with a reactive method, we can wrap this with a

So it's a const toDo from input. And just like how we wrapped our state with a reactive method, we can wrap this with a ref method. And let me do that again. So it imports it. So ref here, and you can see it being imported right here. So now let's just do an empty string and let's do the same for toDoID, toDoID. And this one will be defaulted to 4. And let's do the same for toDos. Now toDos isn't a primitive type, but I believe it just converts it to reactive under the

And let's do the same for toDos. Now toDos isn't a primitive type, but I believe it just converts it to reactive under the hood. So let's just copy this and let's duplicate this, say toDos, and let's go ahead and paste this in. Actually say ref and then paste it in. Okay. And let's get rid of our state here. Okay. So now there is no reference to state., since we are using separate values now.

Okay. So now there is no reference to state, since we are using separate values now. So let's update our template here. So let's say our search for state, and this will just be whatever we named the variable. Same with this one and same with this one. So I believe that's it for the template. Let's see. Sorry. I didn't delete that. There we go.

This is just a simple explanation with no code.

So let me save that. But this is not going to work yet. So let me do one thing here. Let me just console.log one of these refs. So I'm going to console.log the todoId and go back into our code here. And let's see if this shows up before the error. Okay. So it does console.log before the error happens. And if you look at it, it's not a primitive type. It's not a four.

And if you look at it, it's not a primitive type. It's not a four. It's an actual object. And this object has a single property of value. And there is our value there. So value of four. And there it is. It also has getters and setters that view makes use of whenever change detection is detected and view has to update this value. And why is it saying state is not defined?

detected and view has to update this value. And why is it saying state is not defined? I thought I removed all those. Okay. Yeah. So there is no more reference to state in the thing we're returning at the end of the setup method. So now we have to add those three that we added here. So let me get rid of this. So to do from input to toDoId and toDo.

So let me get rid of this. So to do from input to do id and to do. Now we have to return that to do id and to do. And let's see if this fixed anything. And we're still getting errors. And that's because when we are in our script, we can't refer to the refs directly. As you saw in the object, I deleted it. But you saw that there is a value property on these variables. So important thing to remember is when you're using refs, you have to refer to these variables using dot value in the script.

So important thing to remember is when you're using refs, you have to refer to these variables using dot value in the script. So everywhere I'm using these variables, we have to add dot value. Yes. To do id dot value description dot value. This is fine value here to value here. Same with this. Same with this. And same with this. This is fine.

So in my opinion, if you have a very simple component and maybe you have one or two pieces of state, then just stick with refs. But if you have a component that has multiple pieces of state, you can go ahead and wrap that in an object and use reactive. And you can always mix and match if you like as well. And if you look at the documentation, there's actually a section here for ref versus reactive. And it's kind of just saying it depends on how you write code. So if you're someone that separates variables out like this, then you can go ahead and just make use of refs like we did in this video. But if you're someone who likes to group similar variables together in an object like