I am working on implementing a state using the composition API in Vue 3 with the code in the file below:
// useNotifications.ts
const state = reactive<Array<Notification>>([]);
export function useNotifications() {
return {
state,
add: (notification: Notification) => {
state.push(notification);
},
};
}
The notifications from this state are displayed in the HTML as shown below:
// TheNotifications.vue
setup() {
const notifications = useNotifications();
let first = notifications.state[0];
return {
first,
};
},
New notifications are added when a form is submitted like this:
// SomeForm.vue
notifications.add({ type: "success", text: "Food added" });
However, the TheNotifications component does not reflect the changes when new notifications are added. I have attempted using different methods, such as toRef, but have not been successful. As someone new to the composition API, I am wondering what I may be missing.