title: VueJS: variable is undefined inside computed only
body: <p>I'm trying to make async autocomplete input with Vue, Nuxt, Axios and Buefy. It basically works, but I need to have different strings when user just starts typing and there's yet nothing to show, and when there is nothing found for such request.</p>
  
  <p>I'm checking in computed variable if input value isn't empty and axios returns empty array to handle if the request address cannot be found. But it causes error </p>
  
  <blockquote>
    <p>Cannot read property 'length' of undefined</p>
  </blockquote>
  
  <p>The weird thing is that <code>address</code> variable is successfully used in other parts of my component.</p>
  
  <p>My vue file below:</p>
  
  <pre><code>&lt;template lang="pug"&gt;
  b-field(label="Your address?")
      b-autocomplete(
      rounded,
      v-model="address",
      :data="data",
      placeholder="Start typing",
      icon="magnify",
      @input="getAsyncData",
      @select="option =&gt; selected = option",
      :loading="isFetching"
      )
          template(slot="empty") {{ dummyText }}
  &lt;/template&gt;
  
  &lt;script&gt;
  import axios from 'axios'
  import debounce from 'lodash/debounce'
  
  export default {
      data() {
          return {
              data: [],
              address: '',
              selected: null,
              isFetching: false,
              nothingFound: false,
              test: false
          }
      },
  
      computed: {
          dummyText: () =&gt; {
              if (this.address.length &gt; 0 &amp;&amp; this.nothingFound) { // This will return error
                  return 'There is no such address'
              } else {
                  return 'Keep typing'
              }
          }
      },
  
      methods: {
          getAsyncData: debounce(function () {
              this.isFetching = true
  
              axios.post('https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/address', {
                  "query": this.address,
                  "count": 8
              }, {
                  headers: {
                      'Authorization': 'Token sometoken',
                      'Content-Type': 'application/json',
                      'Accept': 'application/json',
                  }
              })
                  .then(response =&gt; {
                      this.isFetching = false
                      this.data = Object.values(response.data.suggestions)
                      if (response.data.suggestions.length===0) this.nothingFound = true
                      console.log(this.address.length) // This will work
                  })
                  .catch(error =&gt; {
                      this.isFetching = false
                      console.log(error);
                  })
          }, 300)
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>This is not about ssr, I've tried to init component inside mounted hook. Think I'm missing out something obvious, but I've already spent hours trying to fix this without success</p>