It seems that the issue lies within the title. I suspect that the ref() and reactive() functions are conflicting with each other somehow, but I am unsure of how to address it.
Below is the snippet of the component utilizing the store:
<script setup>
import { ref } from "vue";
import { store } from "@/store.js";
const game = ref({
date: null,
location: null,
length: null,
});
</script>
<template>
<form @submit.prevent="store.addGame(game)">
<input v-model="game.date" type="date" required />
<input v-model="game.location" type="text" placeholder="Location" required />
<input v-model="game.length" type="number" placeholder="Length (in minutes)" required />
<button class="button" type="submit">Submit ✔</button>
</form>
</template>
The issue arises in the store file, specifically in the games array, after adding multiple items...
Below is the content of store.js:
import { reactive } from "vue";
export const store = reactive({
games: [],
addGame(game) {
this.games.push(game);
console.log(this.games);
}
});