I'm currently messing with someone else's project on Vue.js. The project is a webpage in php that asks for the user for his info. Then there is a series of exercises built with vue.js and in the end the results are stored in an excel file.

I've understood the layout of the project and how it works but I have a problem trying to add a new feature. I want to be able to save current progress in the exercises so that someone can continue from the exercise he was last time he opened the page. Every exercise has this code at the end:

handleSubmit(e) {
        e.preventDefault()

        for (let i = 0; i < e.target.length - 1; i++) {
            if (e.target[i].tagName === 'INPUT') {
                const result = {
                    id: e.target[i].id,
                    value: e.target[i].value,
                    exNumber: this.exNumber,
                }

                this.answers.push(result)
            }
        }

        this.addNewAnswer(this.answers)

so everything is added in a object.

At the last exercise there is this code:

const dataToPost = {
            name: this.name,
            age: this.age,
            birthday: this.birthday,
            city: this.city,
            gender: this.gender,
            loginDate: this.loginDate,
            exTimes: this.exTimes,
            totalTime: finalTime.toString(),
            class: classNumber,
            answers: this.finalScores,
        }

        this.axios
            .post(
                'http://***********/setAnswers.php',
                JSON.stringify(dataToPost)
            )
            .then((response) => {
                alert(response.data)
                router.push('/main')
            })

and sends all the answers from all the exercises to another php file that creates the excel file.

What would be the best way to handle state save between each exercise.