title: In alpine flow got error var is not defined
body: <p>in my Laravel 8 /  tailwindcss 2 / Alpinejs 2.8 app
  on the page I load listing of data with axios and fill my template in alkpine template circle :</p>
  <pre><code>&lt;div class=&quot;editor_form_wrapper w-10/12&quot; x-data=&quot;adminAdEditorComponent()&quot;&gt;
     ...
              &lt;div x-show=&quot;activeTab === 2&quot; class=&quot;p-2&quot;&gt;
                  Tab #2 : Categories
                  &lt;div id=&quot;div_ad_categories&quot;&gt;
                      &lt;table x-show=&quot;adCategories.length&quot;&gt;
                          &lt;tbody&gt;
  
                          &lt;template x-for=&quot;nextCategory in adCategories&quot; :key=&quot;nextCategory.id&quot;&gt;
                              &lt;tr&gt;
                                  &lt;td class=&quot;editor_listing_cell&quot; x-text=&quot;nextCategory.id&quot;&gt;
  
  
  
  function adminAdEditorComponent() {
      console.log('adminAdEditorComponent::')
  
      return {
          adCategories: [],
          showDatepicker: false,
          ...
          loadAdCategories: function () {
              window.axios.get('/admin/ads/{{ $ad-&gt;id }}/ad_categories', {}).then((response) =&gt; {
                  console.log('response.data::')
                  console.log(response.data)
                  adCategories = response.data.categories
              }).catch((error) =&gt; {
                  console.error(error)
              })
  </code></pre>
  <p>And in the console I gor warning :</p>
  <pre><code>Alpine Error: &quot;ReferenceError: adCategories is not defined&quot;
  Expression: &quot;adCategories&quot;
  Element: &lt;template x-for=​&quot;nextCategory in adCategories&quot; :key=​&quot;nextCategory.id&quot;&gt;​…​&lt;/template&gt;​
  </code></pre>
  <p>But after this warning flow is continued and my listing is filled with data...
  I tried to change condition, like</p>
  <pre><code>  &lt;table x-show=&quot;typeof adCategories != 'undefined' &amp;&amp;  adCategories.length&quot;&gt;
        &lt;tbody&gt;
  </code></pre>
  <p>but it did not help and I got warning anyway... How to fix these warnings...</p>
  <p><strong>MODIFIED BLOCK :</strong>
  it does not work .
  I make :</p>
  <pre><code>loadAdCategories: function () {
      window.axios.get('/admin/ads/{{ $ad-&gt;id }}/ad_categories', {}).then((response) =&gt; {
          console.log('loadAdCategories response::')
          console.log(response)
          console.log('response.data::')
          console.log(response.data)
          console.log('this::')
          console.log(this)
          this.adCategories = response.data.categories
      }
  }
  </code></pre>
  <p>and in browser : <a href="https://prnt.sc/104pqie" rel="nofollow noreferrer">https://prnt.sc/104pqie</a></p>
  <p>and what I see in browser :
  2) I tried to define self:</p>
  <pre><code>function adminAdEditorComponent() {
      console.log('adminAdEditorComponent::')
  
      return {
          adCategories: [],
          ...
          loadAdCategories: function () {
              var self = this
              window.axios.get('/admin/ads/{{ $ad-&gt;id }}/ad_categories', {}).then((response) =&gt; {
                  console.log('loadAdCategories response::')
                  console.log(response)
                  console.log('response.data::')
                  console.log(response.data)
                  self.adCategories = response.data.categories
  </code></pre>
  <p>and a lot of messages :</p>
  <pre><code>alpine.min.js:7 Alpine Error: &quot;ReferenceError: adCategories is not defined&quot;
  </code></pre>
  <p>in the broswer : <a href="https://prnt.sc/104pm4a" rel="nofollow noreferrer">https://prnt.sc/104pm4a</a></p>
  <p>in both cases listing of categories is not filled.
  As I wrote in my case with:</p>
  <pre><code>   adCategories = response.data.categories
  </code></pre>
  <p>listing of categories is filled ok. Looks like at line :</p>
   Thanks!</p>