So far, you've built a sweet interface to view one card and a list of all the major cards. Now, you want to show a layout to a user so that three cards can be displayed; then, you can do a 'Past/Present/Future' style reading. It's the most basic Tarot reading.

This layout is a little more complicated than the ones we've done previously; you will make a layer of three cards with titles that change color when they are selected. You'll notice that as you tap around in this screen, you will find the cards reshuffled. Can you figure out why? If you didn't want this behavior, how would you change it?

In this chapter, you'll be recreating several cards and again using the Tarot dataset, so given DRY principles ("Don't Repeat Yourself!"), it's time for a refactor. There are several ways to modularize your code to avoid repetition.

One would be to create reusable template files.

A second would be using Vuex (Vue's state management library) to share data.

Another is leveraging mixins to share logic throughout the app.

We will be doing this third refactor by creating a separate file for our data call and a mixin to use in several places in the app.

Now you need to add a method so that when a user taps a label, a new card appears. Add this method to a new methods property under the computed property as well as a created lifecycle hook to call it. This method will take a card's context and pass through two random numbers to select the card and its up or reversed meaning: