Challenge 9: Solution

[00:00:00]
>> Evan You: The catch of this implementation is, obviously, you can have a shared object as our state.
>> Evan You: And, [COUGH] if we are smart, we can make it directly return the thing from within the render function. So like,
>> Evan You: We can do it like this, but you realize that this does not really work.

[00:00:32]
Let's implement the methods first.
>> Evan You: If we run this, you'll realize that when you click, state doesn't increment.
>> Evan You: And the reason to this is that,
>> Evan You: If you never really had the chance to make state reactive, the default, so in Vue,
>> Evan You: The way to let Vue know that it should make something reactive is by returning it within data.

[00:01:05]
>> Evan You: If you return something within data, this is the object that Vue will call to observe or confer function on. Right, if we don't do that, then state was never actually passed to Vue and Vue never had a chance to make it reactive then nothing will happen, right?

[00:01:20]
So,
>> Evan You: What we can do is just return the same object inside the data function.
>> Evan You: And now, we can do,
>> Evan You: this.count.
>> Evan You: So, this should do the trick.
>> Evan You: Let's run it.
>> Evan You: No,
>> Evan You: I didn't register Counter, okay.
>> Evan You: So, components counter.
>> Evan You: Oops.
>> Evan You: So now it works as intended because Vue's got a chance to take state to burden to a reactive object.

[00:02:16]
And state.count is proxied on to the counter instance as this.count.