Focus multiple inputs at once

How can I focus more than one input when I get validation errors from the controller? I'm using Inertia and Vue Tailwind, this is my code. The inputs are never all put into focus, what am I doing wrong?

<t-input-group  
	:variant="{danger: $page.props.errors.name}"   :feedback="$page.props.errors && $page.props.errors.name ? $page.props.errors.name : ''">

	<template slot="label">
		<strong class="text-red-600">* </strong>
		Name
	</template>

	<t-input ref="name" v-model="memo.name" placeholder="Name"
		:variant="{danger: $page.props.errors.name}"/>
 </t-input-group>


//method
createOrUpdateMemo() {
            if (this.memo.id) {
                this.memo.put(`/memos/memo/${this.memo.id}`);
            } else {
                this.memo.post(`/memos/memo`, {
                    onError: errors => {
                        if (errors.name) {
                            this.$refs.name.$el.focus();
                        }
                        if (errors.ac) {
                            this.$refs.ac.$el.focus();
                        }
                    },
                });
            }
        },

I was trying to use focus because the inputs already have a error mode :variant="{danger: $page.props.errors.name}" this sets the borders and focus to red, so I would like to see that when there is an error.

Right now only the second input is being focused, I would like to focus more that one at a time. My idea really is just to focus the inputs that have errors, but if using focus isn't correct what can I do to make these inputs standout a bit?