I have several VTextField in one page, they define like this

<v-text-field
            v-model="searchContent"
            ref="searchDelcarationProductRef"
            :label="t('Declaration.SearchContent')"
            :placeholder="t('Declaration.PleaseSearchContent')"
            persistent-placeholder
            variant="outlined"
            density="compact"
            hide-details
            @keyup.enter="handleSearch"
          >
            <template #append-inner>
              <v-icon @click="handleSearch">mdi-magnify</v-icon>
            </template>
          </v-text-field>

and in the test file, I try to get this component by

const searchContent = wrapper.find('[ref="searchDelcarationProductRef"]');

const searchContent = wrapper.find({ref : 'searchDelcarationProductRef'});

const searchContent = wrapper?.find('[data-testid="searchDelcarationProductRef"]');

const searchContent = wrapper?.find('[data-test="searchDelcarationProductRef"]');

none of them can exactly find the component, the result is empty.....

currently i find this component by

const warehouseSelect = wrapper.findAllComponents(VSelect)[0];
expect(warehouseSelect).toBeTruthy();

warehouseSelect.setValue(testWarehouseData().data[0].id);
const typeSelect = wrapper.findAllComponents(VSelect)[1];

this way is kind of stupid, it can not handle with complicated situations.

how can i get this component in my unit test, pls?