Retrieve query from url in vuejs

Tenho um componente vuejs para buscar dados com filtros pelo método GET do próprio form:

<template>

<main role="main" class="flex-grow container max-w-7xl mx-auto px-2 py-4 sm:px-6 sm:py-6 lg:px-8 lg:py-8">
   <div class="px-2 mb-3 text-sm sm:px-0">
      <a class="primary-link" href="/">Home</a>
      /
      Pets
   </div>
   <div class="flex flex-col gap-2 mb-6 sm:flex-row sm:justify-between sm:items-center">
      <h1 class="title-lg">Encontre seu novo amigo</h1>
   </div>
   <div>
      <form action="/pets" class="bg-white flex flex-col md:gap-2 mx-auto rounded-lg mb-5 p-5 pt-0" method="get">
         <div class="flex flex-col md:gap-2 sm:flex-row">
            <div class="form-field flex-1">
               <select id="tipo" name="tipo">
                  <option value="">Adoção e Venda</option>
                  <option value="Doar">Apenas adoção</option>
                  <option value="Vender">Apenas venda</option>
               </select>
            </div>
            <div class="form-field flex-1">
               <select id="specie" name="especie">
                  <option value="">Todas as espécies</option>
                  <option value="Cachorro">Cachorro</option>
                  <option value="Gato">Gato</option>
                  <option value="Peixe">Peixe</option>
                  <option value="Ave">Ave</option>
                  <option value="Coelho">Coelho</option>
                  <option value="Hamster">Hamster</option>
                  <option value="Porquinho-da-índia">Porquinho-da-índia</option>
                  <option value="Furão">Furão</option>  
                  <option value="Tartaruga/Jabuti">Tartaruga/Jabuti</option>
               </select>
            </div>
            <div class="form-field flex-1">
               <select id="sex" name="sexo">
                  <option value="">Todos os sexos</option>
                  <option value="macho">Macho</option>
                  <option value="fêmea">Fêmea</option>
               </select>
            </div>
            <div class="form-field flex-1">
               <select id="size" name="porte">
                  <option value="">Todos os portes</option>
                  <option value="Porte pequeno">Porte pequeno</option>
                  <option value="Porte médio">Porte médio</option>
                  <option value="Porte grande">Porte grande</option>
               </select>
            </div>
         </div>
</main>
</template>

So that when you click fetch the url is updated and looks like this:

http://127.0.0.1:8000/pets?tipo=Doar&especie=Gato&sexo=macho&porte=Porte+pequeno&estado=AP&cidade=bauru

But when I click fetch the page is updated (and I want to keep it that way), but I would like to keep the fields selected, because at the moment it is reset to zero after updating.

How could I retrieve the url query with vuejs or make the selected options not reset after refresh ?