Challenge 2 / 2

In my CarTitle component, I receive a car prop that contains both model and brand as separate keys. These two keys change when a user selects different options from 2 select elements that exist elsewhere on the page.

What I'd like to do is "listen" to these prop change and automatically update the car title in the template.

Which of these examples would do the job in the best way?

<template>
    <h1>{{ carName }}</h1>
</template>

<script>
export default {
    name: 'CarTitle',
    props: ['car'],
    computed: {
        carName() {
            return car.brand + ' ' + car.model;
        },
    },
};
</script>

<template>
    <h1>{{ carName }}</h1>
</template>

<script>
export default {
    name: 'CarTitle',
    props: ['car'],
    data() {
        return {
            carName: car.brand + ' ' + car.model,
        };
    },
    watchers: {
        car(newVal) {
            this.carName = newVal.brand + ' ' + newVal.model;
        },
    },
};
</script>

<template>
    <h1>{{ carName }}</h1>
</template>

<script>
export default {
    name: 'CarTitle',
    props: ['car'],
    data() {
        return {
            carName: this.getCarName(),
        };
    },
    methods: {
        getCarName() {
            return car.brand + ' ' + car.model;
        },
    },
};
</script>

<template>
    <h1>{{ getCarName }}</h1>
</template>

<script>
export default {
    name: 'CarTitle',
    props: ['car'],
    methods: {
        getCarName() {
            return car.brand + ' ' + car.model;
        },
    },
};
</script>

Rewatch the video