Challenge 1 / 1

Let's say you have a component with a prop named firstName and you change it inside that component using a method like so:

<template>
    <span>{{ name }}</span>
    <button @click="changeFirstName">Change First Name</button>
</template>

<script>
export default {
    name: 'NameComponent',
    props: ['firstName', 'lastName'],
    computed: {
        name() {
            return this.firstName + ' ' + this.lastName;
        }
    },
    methods: {
        changeFirstName() {
            this.firstName = 'Beckett';
        },
    },
};
</script>

What is wrong with this code?