Challenge 1 / 1

Imagine you have this component that renders the name of a Pizza object, which you can in turn modify by typing text into an input element:

<template>
    <label>Name:</table>
    <pizza-name-input :pizza="pizza" />
</template>

<script>
import { getPizza } from '@/services/get-pizza';
import PizzaNameInput from '@/components/pizza-name-input';

export default {
    name: 'PizzaFormField',
    components: {
        PizzaNameInput,
    },
    data() {
        pizza: null,
    },
    async created() {
        this.pizza = (await getPizza()).data['hydra:member'];
    },
};
</script>

<template>
    <input type="text" v-model="pizza.name" />
</template>

<script>
export default {
    name: 'PizzaNameInput',
    props: {
        pizza: {
            type: Object,
            required: true,
        },
    },
};
</script>

What is the mistake we've just made here?