vue.js updated hook keeps on rerendering page without update in the state

Question

I am trying to get data from an api, while using updated() to rerender when there is a change in the state that holds the fetch url but the updated hooks keeps rendering without any change in the state.

I use click events to monitor the state change but the update happens without state change

the template

  <template>
    <div class="overlay" ref="overlay">
    </div>
    <div class="home">
      Hello People
     
      <form @submit.prevent="handleSearch">
        <input type="text" name="search" v-model="search" />
        <button type="submit">Search</button>
      </form>
      <select name="" id="select" v-model="select" v-on:change="selectclass">
        <option value="">Default</option>
        <option value="Breaking+Bad">Breaking Bad</option>
        <option value="Better+Call+Saul">Better call saul</option>
      </select>
      <div class="charlist">
        <div class="gridlist" v-for="char in chars" :key="char.id">
          <div>
            <div class="subgrid">
              <img class="img" :src="char.img" alt="alt">
              <p> {{ char.name }} </p>
              <router-link :to="{ name: `Details`, params: {id: char.char_id} }">
              <button> more</button>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>

the script

  <script>
    export default {
      name: 'Home',
      components: {
    
      },
      data() {
        return {
          url: 'https://www.breakingbadapi.com/api/characters?limit=10&offset=10',
          search: "",
          select: "",
          chars: []
        }
      },
      methods: {
        handleSearch() {
          this.url = `https://www.breakingbadapi.com/api/characters?name=${this.search}`
        },
        selectclass() {
          this.url = `https://www.breakingbadapi.com/api/characters?category=${this.select}`
        },
        getData() {
          fetch(this.url)
            .then(res => res.json())
            .then(data => {
              this.chars = data
              console.log(this.chars)
            })
        }
      },
      mounted() {
        this.getData()
      },
      updated() {
        console.log(this.url)
        this.getData()
      }
    }
  </script>

Answer 1

What I think is happening is a loop - Component Inits -> Gets Data -> Updated is called, which again triggers getData again, then the cycle repeats itself.

From what I remember Vue will rerender as long as a variable value is set and it does not care if the old value and the new are the same.

To get around that you should just call getData inside the selectclass and handleSearch. That should prevent the loop from starting.

Look at this warning in the documentation: https://vuejs.org/api/options-lifecycle.html#updated