Spliting form in tabs and get children computed value from parent component

How to split a form in tabs, and get a validation state of each from parent component ?
I used this approach but $refs is undefined at this moment, I can’t understand why

"TypeError: Cannot read properties of undefined (reading 'isValidTab')"

Any other approach or good pratices to do that ?

App.vue

<template>
  <form>
    <userTab v-model="user" ref="userTab" />
    <input type="submit" :disabled="!areValidTabs" />
  </form>
</template>

<script>
import userTab from "./components/Tab1";
export default {
  components: {
    userTab,
  },
  computed: {
    areValidTabs() {
      return this.$refs.userTab.isValidTab;
    }
  },
  data: function () {
    return {
      user: {
        email: null,
      },
    };
  },
};
</script>

Tab1.vue

<template>
  <div>
    <input v-model="user.email" placeholder="username" />
  </div>
</template>

<script>
export default {
  model: {
    prop: "user",
    event: "change",
  },
  props: {
    user: {
      type: Object,
    },
  },
  computed: {
    isValidTab() {
      return this.user.email !== "";
    },
  },
  data: () => ({}),
};
</script>

https://codesandbox.io/s/quizzical-voice-c8ih9?file=/index.js