I'm having a strange issue in JavaScript / Vue.js. I'm trying to iterate through the properties of an object (newGame) and change their values to 'undefined'. They seem to pick up the value when I console.log() them from inside the for loop, but kind of "revert back" to their previous values after the loop. I'm pretty sure that I'm overlooking something here. The properties of newGame are also bound to some input elements with v-model. Here's the code snippet:

data() {
    return {
        newGame: {
            id: undefined,
            date: undefined,
            location: undefined,
            length: undefined,
            limit: undefined,
            buyIn: undefined,
            cashOut: undefined
        },
        games: Array
    };
},
methods: {
    addGame() {
        let newGameCopy = { ...this.newGame };
        newGameCopy.id = uuidv4();
        this.games = [...this.games, newGameCopy];

        console.log(this.newGame);

        // This one doesn't work.
        for (let property in this.newGame) {
            console.log(property);
            property = undefined;
            console.log(property);
        }
        console.log(this.newGame);

        // This one works.
        this.newGame.id = undefined;
        this.newGame.date = undefined;
        this.newGame.length = undefined;
        this.newGame.limit = undefined;
        this.newGame.buyIn = undefined;
        this.newGame.cashOut = undefined;
        this.newGame.location = undefined;

        console.log(this.newGame);
    },
}