Получение всех идентификаторов/значений в форме в vuejs

Я использую компонент vuetifys v-form для создания формы. Внутри формы есть множество компонентов v-text-fields и v-checkbox, которые получают динамически создаваемые и назначаемые идентификаторы. Я хотел бы иметь возможность распечатать все идентификаторы/значения (на консоль в качестве доказательства концепции), но я не вижу документации о том, как это сделать.

Бывший:

<v-form v-model = "foo" ref = "bar">
 <v-text-field :id = "dynamicallyGenerated" class = "baz"/>
 <v-text-field :id = "anotherDynamicallyGenerated" class = "baz"/>
 <v-checkbox :id = "yetAnotherDynamicallyGenerated" class = "baz"/>
</v-form>

...
const elements = this.$refs.bar.$el;

// And somehow I would like to get an array of all the form elements that have
// the class called "baz" then do something like this with it
someArray.forEach((entry) ==> {
  console.info(entry.id, entry.value);
});

Я пытался использовать this.$refs.bar.$el.querySelectorAll(".baz");, однако он возвращает тонны вложенных элементов div (из-за того, как vuetify собирает компоненты) и выглядит как боль для троллинга. Мне интересно, следует ли мне использовать querySelectorAll или есть что-то более простое.