error with computed function (Calendar)

The $refs values will only be accessible after the component is mounted. Before that, this.$refs.calendar (or any other $refs value) will be undefined and you will see this error.

1. If you move your logic to the mounted() hook it should work fine.

2. In some scenarios, it may help to resolve it conditionally:

calendar() {
  return this.$refs.calendar?.control;
}

But note that this.calendar can result in null/undefined in this case.

Thanks, and is it a reason of not showing the events or it's not related ?
I put some events in the loadEvents method but they don't appear.
Here is the code :

loadEvents() {
            // placeholder for an HTTP call
            const events = [
          {
            id: 1,
            start: "2023-02-28T10:00:00",
            end: "2023-02-28T11:00:00",
            text: "Event 1",
            backColor: "#6aa84f",
            borderColor: "#38761d",
          },
          {
            id: 2,
            start: "2023-02-28T13:00:00",
            end: "2023-02-28T16:00:00",
            text: "Event 2",
            backColor: "#f1c232",
            borderColor: "#bf9000",
          },
          {
            id: 3,
            start: "2023-03-01T13:30:00",
            end: "2023-03-01T16:30:00",
            text: "Event 3",
            backColor: "#cc4125",
            borderColor: "#990000",
          },
          {
            id: 4,
            start: "2023-03-01T10:30:00",
            end: "2023-03-01T12:30:00",
            text: "Event 4"
          },
        ];
        this.calendar.update({ events });
},

You use "this.calendar" computed property to display events - so yes, this error needs to be fixed for the update() call to work.

I moved my logic to mounted() but there is still the error with the calendar. I don't really understand where the error is coming from.
My computed() is now empty.
Here is my new mounted() (not sure if I should do it like this) :

    mounted() { 
        this.$refs.calendar?.control;
        this.loadEvents();
    },

loadEvents() is the same as before.

Thanks in advance.

I recommend checking this tutorial:
https://code.daypilot.org/10748/vue-js-weekly-calendar-tutorial

It includes a working Vue Calendar example, including loadEvents() method that is called from the mounted() hook. Try running this project and see if there is any error. Then you can use it as a starting point and add things from your implementation. That could help you find the problem.

You can't remove "calendar()" from computed properties, because that is what lets you use "this.calendar" in other methods.

mounted() { 
  const events = [
    {
      id: 1,
      start: "2023-02-28T10:00:00",
      end: "2023-02-28T11:00:00",
      text: "Event 1",
      backColor: "#6aa84f",
      borderColor: "#38761d",
    },
  ];
  this.$refs.calendar.control.update({
    events
  });
},