Why is my array prop not being passed to the child component properly?

[Christoph-Harms]

I have a parent component that makes API calls to a backend and is then supposed to update its child:

<template>
  <ChessBoard :fen="game.fen" :view-as-black="viewAsBlack" :legal-moves="game.legalMoves" />
  <button @click.prevent="viewAsBlack = !viewAsBlack">Flip Board</button>
  <button @click.prevent="startNewGame()">New Game</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import ChessBoard from './ChessBoard.vue'
import type { AxiosInstance } from 'axios'

import type { Game } from '../types'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $axios: AxiosInstance
  }
}

export default defineComponent({
  name: 'ChessController',
  components: {
    ChessBoard
  },
  data() {
    return {
      viewAsBlack: false,
      game: {
        fen: '8/8/8/8/8/8/8/8 w - - 0 1',
        legalMoves: [{
          origin: "b2",
          target: "b4"
        }],
      } as Game,
    }
  },
  methods: {
    startNewGame() {
      this.$axios.post('/games/')
        .then(response => {
          this.game = response.data
        })
        .catch(error => {
          console.log(error)
        })
    },
  }
})
</script>

As you can see, i have assigned a default value to the game field of the data object just to make sure it is actually passed to the child. And this seems to be working fine:

After clicking the "New Game" button, the server responds with a new game that gets written to data. This also works:

However, this array is then not passed to the child component correctly:

Now I'm a backend dev and in no way any "good" with Vue or UI development in general, so I'm sure I'm doing something wrong that's very stupid here, but I just can't seem to find out what. If anyone could push me in the right direction I'd be very thankful.

[LinusBorg]

You have a typo.

It should be game.legal_moves