我正在尝试学习一些Vue，我有一个选项卡组件，它有2个选项卡，里面有一些下拉列表和文本字段，问题是当我在选项卡之间切换时，它会丢失数据，如从下拉列表或文本值中选择的项目，我已经尝试了v模型，但没有任何帮助？

这是选项卡视图

<script setup>
import { ref } from 'vue';

const nestedRouteItems = ref([
    {
        label: 'Personal',
        to: '/uikit/ficha'
    },
    {
        label: 'Seat',
        to: '/uikit/ficha/seat'
    },
]);

</script>

<template>
    <div class="grid">
        <div class="col-12 md:col-12">
            <div class="card p-fluid">
                <h5>Ficha</h5>
                <div class="col-12 md:col-12">
                    <div class="card card-w-title">
                        <h5>Tab container</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur.</p>
                        <TabMenu :model="nestedRouteItems" />
                        <router-view />
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</template>

以下是第一个选项卡的内容：

<template>
    <div class="flex align-items-center py-5 px-3">
        <div class="card p-fluid" style="width:800px">
                <h5>Datos personales</h5>
                <div class="field">
                    <label for="name1">Nombre</label>
                    <InputText id="name1" type="text" />
                </div>
            </div>
    </div>
</template>

以下是第二个选项卡的内容：

<script setup>
import { ref } from 'vue';

const dropdownItems = ref([
    { name: 'Principal', code: 'Principal' },
    { name: 'Laboral', code: 'Laboral' },
    { name: 'Familiar', code: 'Familiar' }
]);

const dropdownItem = ref(null);

</script>
<template>
    <div class="flex align-items-center py-5 px-3">
        <div class="card p-fluid" style="width:800px">
            <h5>Domicilio</h5>
            <div class="field">
                <label for="tipoDomicilio">Tipo de domicilio</label>
                <Dropdown id="tipoDomicilio" v-model="dropdownItem" :options="dropdownItems" optionLabel="name" placeholder="Elegir opción..."></Dropdown>
            </div>
        </div>
    </div>
</template>