vue exchange position between two tags

I am working on an assignment where I have to implement accordion. But there is a complex. I need to exchange the position of two accordions like this-- adode xd example

I have done the accordion part.

<template>
  <div>
     <div>
      <div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header " id="headingOne">
      <button class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        User
      </button>
    </h2>
    
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        View
      </button>
    </h2>
    
  </div>
  <div>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>User Content</strong>
        
      </div>
    </div>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>View Content</strong> 
        
      </div>
    </div>
  </div>
</div>
    </div>
  </div>
</template>

How do I do the task using vue js? Can anyone help?