Decide when to use a component in Vue

Instructor: [0:00] I have these different ticket types. What I'd like to be able to do is have the ability to purchase these individual tickets, so some bronze tickets, some silver tickets, and some gold tickets rather than just general tickets.

[0:12] I have these details for each of these ticket types. I've got my bronze ticket, my silver, and my gold. What I would like is a section here called ticketTypes, and I'd like to be able select from a dropdown how many bronze I want, how many silver, and how many gold. Let's see how I might do that.

[0:30] Let's have a div that starts with a h3 that says Ticket Types. For these ticket types, I want to have a div that describes each of the ticket types. I'm going to use v-for="type in ticketTypes". Additionally, let's take h4 and render the type name.

[0:54] Next, I'll add a paragraph descriptor for the type.description. Then I'm going to add the select.

[1:04] At this point, I'm feeling slightly concerned. I'm developing a lot of logic and styling that I may want to use elsewhere in my application. For me, this is saying, "Introduce a component." With a component, I'm going to be able to capture the logic here and add in my select boxes. I could try to build the functionality here, but I think it's better to pause and instead create a component.