Challenge 1 / 1

Imagine I have this data object that will hold some error messages, just like shown in the last videos:

data() {
    return {
        validationErrors: {},
    };
},

Whenever a user tries to buy more than 3 slices of pizza at once, I want to add a very specific validation error using this method:

methods: {
    addHealthyError() {
        this.validationErrors.healthyError = 'Please, consider getting a Doctor\'s appointment for a full blood test checkup';
    },
},

Then, we render the error at the top of the form:

<template>
    <form @submit.prevent="onSubmit">
        <div class="health-message">
            {{ validationErrors.healthyError }}
        </div>
    </form>
</template>

But, oh no! This isn't working properly! I'm getting all sorts of weird behavior! Why exactly is this?