align attributes with tidy to clean vueJS html code

Question

I want to indent the html part of VueJS code using tidy

My starting point below:

from this code

<div class="row mb-3 align-items-center">
<label for="titleInput" class="col-sm-2 col-form-label">Title:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="titleInput" placeholder="Enter title" v-model="title_put" required>
</div>
</div>
<div class="row mb-3 align-items-center">
<label for="descriptionTextarea" class="col-sm-2 col-form-label">Description:</label>
<div class="col-sm-10">
<textarea class="form-control" id="descriptionTextarea" rows="3"
         placeholder="Enter description" v-model="description_put" required></textarea>
  </div>
</div>
<input type="hidden"
placeholder="id" name="id_put" v-model="id_put">
<button  class='btn btn-primary m-1 mb-2'       v-on:click="putTasks()">update tasks</button>
<router-link class='btn btn-primary m-1 mb-2' to="/">Return Home</router-link>
</form> 

I get a pretty good result with (btw from vim):

:'<,'>!tidy -i --custom-tags blocklevel --doctype omit --show-body-only yes --indent-attributes yes --show-warnings no -q

$ tidy -i --custom-tags blocklevel --doctype omit   \
       --show-body-only yes --indent-attributes yes \
       --show-warnings no -q

<form>
  <div class="row mb-3 align-items-center">
    <label for="titleInput"
         class="col-sm-2 col-form-label">Title:</label>
    <div class="col-sm-10">
      <input type="text"
           class="form-control"
           id="titleInput"
           placeholder="Enter title"
           v-model="title_put"
           required="">
    </div>
  </div>
  <div class="row mb-3 align-items-center">
    <label for="descriptionTextarea"
         class="col-sm-2 col-form-label">Description:</label>
    <div class="col-sm-10">
      <textarea class="form-control"
           id="descriptionTextarea"
           rows="3"
           placeholder="Enter description"
           v-model="description_put"
           required=""></textarea>
    </div>
  </div><input type="hidden"
        placeholder="id"
        name="id_put"
        v-model="id_put"> <button class='btn btn-primary m-1 mb-2'
        v-on:click="putTasks()">update tasks</button>
  <router-link class='btn btn-primary m-1 mb-2'
               to="/">Return Home</router-link>
</form>

But I would like to have a better alignment of attributes

e.g.

replace

    <div class="col-sm-10">
      <textarea class="form-control"
           id="descriptionTextarea"
           rows="3"
           placeholder="Enter description"
           v-model="description_put"
           required=""></textarea>

by this:

    <div class="col-sm-10">
      <textarea class="form-control"
                id="descriptionTextarea"
                rows="3"
                placeholder="Enter description"
                v-model="description_put"
                required=""></textarea>

or this:

    <div class="col-sm-10">
      <textarea class="form-control"
        id="descriptionTextarea"
        rows="3"
        placeholder="Enter description"
        v-model="description_put"
        required=""></textarea>