Automatically Unique Id generate at all html tag in vue cli

I have a vue project where more than 100 vue file with lot of html(I use vuetify for metarial design) code.

Now, all vue files need to generate unique id at all html tag. For this problem, I implemented a solution. That is:

mounted() {
    let tags = document.querySelectorAll( "div, span"); 
    //here I will add more html tag. Now div and span use for testing purpose
    for (let i = 0; i<tags.length; i++) {
       if (!tags[i].getAttribute('id')) {
          let id_value = `${this.$route.meta.page_id}-tmtw-0${i}`;
          tags[i].setAttribute('id', id_value);
       }
    }
},

THis code give me a proper solution at my existing html tag. Problem is when I add a new vuetify tag (like: v-textfield), then automatically generate the code:

<div data-v-a52abf8c="" class="tm-login-input-join"><div data-v-a52abf8c="" class="v-input tm-input-text-field-login v-input--has-state v-input--dense theme--light v-text-field v-text-field--single-line v-text-field--solo v-text-field--solo-flat v-text-field--is-booted v-text-field--enclosed v-text-field--placeholder error--text"><div class="v-input__control"><div class="v-input__slot"><div class="v-input__prepend-inner"><div class="v-input__icon v-input__icon--prepend-inner"><i aria-hidden="true" class="v-icon notranslate mdi mdi-email-outline theme--light error--text"></i></div></div><div class="v-text-field__slot"><input required="required" name="email" autofocus="autofocus" id="email" placeholder="Type your Email" type="text"></div></div><div class="v-text-field__details"><div class="v-messages theme--light error--text" role="alert"><div class="v-messages__wrapper"><div class="v-messages__message">E-mail is required</div></div></div></div></div></div><form data-v-a52abf8c="" novalidate="novalidate" class="v-form tm-login-form"><button data-v-a52abf8c="" type="button" class="tm-button-next v-btn v-btn--contained theme--dark v-size--default"><span class="v-btn__content"><i data-v-a52abf8c="" aria-hidden="true" class="v-icon notranslate mdi mdi-play theme--dark white--text"></i></span></button></form></div>

So next time at mounted hook, the id regenarate with the new tags. Thats for existing id is changed.

My question is: how can solve this issue for vuetify in vue js?