Challenge 1 / 2

Take a look at these two components. Then choose which option below correctly shows a mixin that will allow them to remove their duplicated logic.

<template>
    <h1>{{ pizzaName }}</h1>
    <p>{{ pizza.description }}</p>
    <ul>
        <li
            v-for="ingredient in pizza.ingredientes"
            :key="ingredient['@id']"
        >
            {{ ingredient.name }}
        </li>
    </ul>
</template>

<script>
import { getPizza } from '@/services/pizza';

export default {
    name: 'PizzaDetails',
    data() {
        return {
            pizza: null,
        };
    },
    computed: {
        pizzaName() {
            return this.pizza.name + (this.pizza.hasPineapple ? ' w/ Pineapple' : '');
        },
    },
    async created: {
        this.pizza = (await getPizza()).data;
    },
};
</script>

<template>
    <table v-if="pizza !== null">
        <tr>
            <td>{{ pizzaDescription }}</td>
            <td>{{ pizza.price }} </td>
        </tr>
    </table>
</template>

<script>
import { getPizza } from '@/services/pizza';

export default {
    name: 'PizzaDetails',
    data() {
        return {
            pizza: null,
        };
    },
    computed: {
        pizzaDescription() {
            return this.pizza.name +  ' ' + pizza.description;
        },
    },
    async created: {
        this.pizza = (await getPizza()).data;
    },
};
</script>