I want to save the object in array json database and I dont know how

Question

I just started programming and I don't know how to do this. Every help is welcome.

I have a mini pokemon game that gives me random from the first 151 pokemon and when I answer correctly I want to save that pokemon in the json database from the logged in user in the array user_pokedex.

And I want to save the id of that correct aswered pokemon in one array so that I can use that array later so that those pokemons are no longer shown in the game for that user

This is my db.js local database :

{
  "users": [
    {
      "username": "Trpimir",
      "email": "ttom@gmail.com",
      "password": "Password123",
      "id": 1,
      "user_pokedex": []
    },
    {
      "username": "user2",
      "email": "user1@gmail.com",
      "password": "user12345",
      "id": 2,
      "user_pokedex": []
    }
  ]
}

This is my game.vue component where the game is:

<script setup lang="ts">
import { ArrowRight,} from '@element-plus/icons-vue'
import { ref, computed } from 'vue'
import axios from 'axios';
import { pokeStore } from '../store/pokemonStore'
import { usePokedexStore } from '../store/pokedexStore';

import { useLoginStore } from '../store/loginStore';
import { useGameStore } from '../store/gameStore';
const PokemonStore = pokeStore();
const pokedexStore = usePokedexStore();

let gameStore = useGameStore()

let correct = ref<boolean>(false)
let inccorect = ref<boolean>(false)
let pokemonName = ref<string>('')
let isLoading = ref<boolean>(true)

let randomPokemon = ref<any>()

async function getRandomPokemon() {
   isLoading.value = true
   correct.value = false
   inccorect.value = false
 try {
   let response = await PokemonStore.getOnePokemon();
   randomPokemon.value = response;
   
   console.log(randomPokemon.value)
   isLoading.value = false
 } catch (error) {
   throw error;
 }
}

getRandomPokemon()

function submitAnswer(){
   pokemonName.value = pokemonName.value.toLowerCase()
   if(pokemonName.value == randomPokemon.value.name){
       inccorect.value = false
       correct.value = true
       pokemonName.value = ''
       setTimeout(function() {
           getRandomPokemon()
       }, 1500);
   } else{
       console.log("Incorrect answer")
       correct.value = false
       inccorect.value = true
       pokemonName.value = ''
   }
}
</script>

<template>
    <el-dialog v-if="!isLoading"  v-model="gameStore.showModal" width="35%" height="50%" center @keyup.enter="submitAnswer" >
        <template #header>
            <img class="whosThatPokeImg" src="/src/assets/images/Whos-that-Pokemon.png" />
        </template>
        <template #default>
            <div class="modalHeader">
                <img :src="randomPokemon.image" width="250" height="250" />
            </div>
            <div class="footer">
                <div class="inputDiv">
                    <input v-model="pokemonName" class="pokeNameInput" onfocus="this.value=''" type="text" placeholder="This pokemon is ..." maxlength="20" minlength="4" />
                </div>
                <div v-if="inccorect" class="incorrect">
                    <el-row justify="center">
                        <span class="incorrectBold">Incorrect answer!</span>
                    </el-row>
                </div>
                <div v-if="correct" class="correct">
                    <el-row justify="center">
                        <span class="correctBold">Correct answer!</span>
                    </el-row>
                </div>
                <span>
                    <el-button id="submitBtn" @click="submitAnswer()" :disabled="!pokemonName.length">Submit</el-button>
                    <el-button id="skipBtn" @click="getRandomPokemon() ">Skip
                        <el-icon class="el-icon--right"><ArrowRight /></el-icon></el-button>
                    <el-button id="pokedexGameBtn" @click="pokedexStore.changeModal()">Pokedex</el-button>
                </span>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped>
.footer{
    text-align: center;
    padding-top: 10px;
}

.pokeNameInput{
    padding: 5px;
    border-radius: 4px;
    font-size: 14px;
    width: 57%;
    background-color: transparent;
    text-align: center;
}
.inputDiv{
    padding-bottom: 15px;
}
#skipBtn{
    background-color: #FFD700;
    border: 1.5px solid black;
}
#submitBtn{
    background-color:black;
    border: 1.5px solid black;
    color: yellowgreen;
}
#pokedexGameBtn{
    background-color:whitesmoke;
    border: 1.5px solid black;
}
.modalHeader{
    text-align: center;
}

.el-dialog{
    opacity: 0.8;
}
.whosThatPokeImg{
    width: 100%;
    max-width: 85%;
    text-align: center;
}
.incorrect{
    padding-bottom: 15px;
    color: red;
}
.correct{
    padding-bottom: 15px;
    color: green;
}
.correctBold, .incorrectBold{
    font-weight: bold;
}
</style>

This is pokemonStore.js where i het random pokemon from API:

import { defineStore } from 'pinia'
import axios from 'axios'

let apiLink = 'https://pokeapi.co/api/v2'

export const pokeStore = defineStore("pokemons", {
  state: () => {
    return {
      pokemons: []
    };
  },
  actions: {
    async getOnePokemon() {
      try {
        let id = Math.floor(Math.random() * 151) + 1;
        let response = await axios.get(`${apiLink}/pokemon/${id}`)
        if(response.data){
          let pokemon = {
            id: response.data.id,
            name: response.data.name,
            image: response.data.sprites.front_default
          }
          return pokemon
        }
      } catch (error) {
        console.log(error)
      }
    },
    
  }
});