I have a problem when working with RouterView when simulating Tabbed, because I want to get all ref values of child components from parent to check validate when submit form, I have defined array of refs for child components from parent then provide them to child components, in order to make the parent component receives all ref values from child components by keep alive, I need to render all child components before submit.

Parent component:

<script setup>
const inputRefsGeneral = ref(null)
const inputRefsProperties = ref(null)
provide('inputRefsGeneral', inputRefsGeneral)
provide('inputRefsProperties', inputRefsProperties)
</script>

<template>
<div class="ml-8 flex flex-grow flex-col">
        <div>
          <RouterLink :to="{ name: 'general' }">
            <span>General</span>
          </RouterLink>
          <RouterLink :to="{ name: 'properties' }">
            <span>Properties</span>
          </RouterLink>
        </div>
        <RouterView v-slot="{ Component }">
          <KeepAlive>
            <component :is="Component" />
          </KeepAlive>
        </RouterView>
        <div class="ml-auto mt-5">
          <button>
            <span>Cancel</span>
          </button>
          <button class="ml-2 rounded-md bg-blue-500 p-2" @click="handleSaveChanges">
            <span class="text-white">Save changes</span>
          </button>
        </div>
      </div>
</template>

Child Components 1:

<script setup>
 const inputRefsGeneral = inject('inputRefsGeneral')
</script>

<template>
  <input type=text ref="inputRefsGeneral" />
</template>

Child Components 2:

<script setup>
 const inputRefsProperties= inject('inputRefsProperties')
</script>

<template>
  <input type=text ref="inputRefsProperties" />
</template>