Дочерний компонент не обновляется в Vue 3

У меня есть приложение Vue3, в котором я хочу проверить шаг. Итак, как вы видите, pageControl - это дочерний компонент, который должен получать реквизиты.

Проблема в том, что дочерний компонент сначала получает реквизиты, но когда я обновляю значения (реквизиты) внутри родительского компонента (строка, начинающаяся с const firstName = computed(), дочерний компонент не запускается и не обновляется.

Любая идея будет оценена по достоинству?

Вот мой родительский компонент:

<template>
     <input type="text" v-model="firstName" />
    {{ nextStep.isDisabled }} //**** here the value will change *****//
    <pageControl :previous-step="previousStep" :next-step="nextStep" />
</template>

<script lang="ts">
import { defineComponent, inject, computed } from "vue";
import { useRouter } from "vue-router";
import pageControl from "@/components/pageControl.vue";

interface State {
  firstName: string;
  lastName: string;
  githubUsername: string;
  email: string;
  hasAcceptedTermsAndServices: boolean;
}
interface Store {
  state: State;
  methods: () => void;
  getters: () => void;
}

export default defineComponent({
  name: "RequestForm",
  components: {
    pageControl
  },
  setup() {
    const store: State | undefined = inject("store");
    const router = useRouter();

    const nextStep = {
      action: () => {
        router.push("/github-info");
      },
      isDisabled: true,
    };
    const previousStep = {
      action: () => {
        router.push("/");
      },
      isDisabled: false,
    };
    const firstName = computed({
      get() {
        return (store as any).state.firstName;
      },
      set(val) {
        (store as any).methods.updateFirstName(val);
        nextStep.isDisabled = !(store as any).getters.isValidPersonalInfo();
      }
    });
    return {
      store,
      nextStep,
      previousStep,
      firstName
    };
  }
});
</script>

дочерний компонент:

<template>
  <nav class="page-control__container">
    <button
      v-if="nextStep"
      :disabled="nextStep.isDisabled"
      @click="nextStep.action"
    >
      {{ nextStep.label }}
    </button>
  </nav>
</template>

<script>
import pageValidator from "@/utils/pageValidator";

export default {
  name: "pageControl",
  props: {
    nextStep: {
      type: Object,
      required: false,
      default: null,
      validator: pageValidator
    },
  }
};
</script>