Vue component: method property not rendering correctly on an app

I’m a beginner that is reading and practicing a book called ‘Full Stack Vue.js’ by Hassan Djirdeh and I’m having trouble rendering the showTitleOfActiveDay computed property in my Vue component CalendaryEntry. The component is supposed to display the name of the active day you click on the header row, but it’s not rendering correctly.

It’s supposed that the CalendaryEntry should also appear, but it doesn’t. I know it’s by that method as its dynamic data is linked directly to it.

This is how the app currently looks

Eliminating the v-model and moustache data for the Entry name renders the Entry, again, static

When the site is loaded, these are the errors shown:

The directories are ordered like this:

public
└── index.html
src
└── app
├── components
│ ├── calendaryDay.vue
│ ├── calendaryEntry.vue
│ ├── calendaryEvent.vue
│ └── calendaryWeek.vue
└── app.vue
├── seed.js
└── main.js

The problem is probably got from the calendaryEntry.vue, calendaryDay.vue and seed.js

Here’s the calendaryEntry (no style)

<template>
    <div id="nav-entry">
        <div class="event-container">
            <div class="event-outside-error">
                <input type="text" placeholder="New Event" v-model="newEvent" class="event-input" required>

                    <p class="event-text">Day of the event: 
                        <span>
                            <strong>
                                {{ showTitleOfActiveDay }}
                            </strong>
                        </span>
                    </p>
                    
                    <button class="event-submit" @click="submitEventRequest(newEvent)">Submit</button>
            </div>
            <p class="event-error" v-if="error"> Type an event, please. </p>        
        </div>
    </div>
</template>

<script>
    import store from '../seed.js';
    export default {
        name: 'CalendaryEntry',
        props: ['activeDay'],
        data() {
            return {
                newEvent: '',
                error: false,
        }},
        computed: {
            allDataStored: () => store.seedData,
            showTitleOfActiveDay() {
                return store.activeDay.name;
            }
        },
        methods: {
            submitEventRequest(newEvent) {
                if(newEvent === '') return this.error = true;
                store.submitEvent(newEvent);
                this.newEvent = '';
            },
        }
    };
</script> 

Here’s the calendaryDay:

<template>
    <div class="d-column" @click="store.setActiveDay(day.id)">
            <h3 class="d-banner">{{ day.name }}</h3>
            <div class="d-actions">
                <div class="d-number has-text-centered"> 
                    {{ day.id }}
                </div>

                <CalendaryEvent v-for="(event, index) in day.events" 
                                :key="index" :event="event" :day="day"/>
            </div>
    </div>
</template>

<script>
    import store from '../seed.js';
    import CalendaryEvent from './calendaryEvent.vue';
    
    export default {
        name: 'CalendaryDay',
        props: ['day'],
        methods: {
            setActiveDay(day) {
                if (day !== null && day !== undefined) {
                    store.setActiveDay(day)
                } else {
                    console.error('Error: setActiveDay called with null or undefined day')
                }
            }
            
        },
        components: {
            CalendaryEvent,
        }
    }
</script>

Here’s the export for the seed.js, the db array is well-defined btw, as the events are loaded on the calendar.

export const store = {
    seedData: seedData,
    state: {
        seedData,
    }, 
    methods: {
        getActiveDay(){
            return this.state.seedData.find(day => day.id === this.state.activeDay);
        },
        setActiveDay: function(dayId) {
            console.log('checking out the function01', dayId);
            return this.state.seedData.map(day => {
                if (day.id === dayId) {
                    return {...day, active: true};
                } else {
                    return {...day, active: false};
                }
            });
        },

        SubmitEvent(event){
            const activeDay = this.getActiveDay();
            activeDay.events.push({'details': event, 'edit': false});           
        },
        editEvent(id, eventDetail){
            const editedEvent = this.getActiveDay().events.find(event => event.id === id);
            const eventObj = editedEvent.events.find(event => event.details === eventDetail);
            eventObj.edit = true;
        }
    }
};

I was just trying to solve it. I tried first by myself, then I asked to Codeium, ChatGPT, Monica, Gemini but none of these gave me a solution. Hope you can bring support.