title: Vue.js how to fix the error: Uncaught TypeError: data.filter is not a function in my code?
body: <p>I have a structure in json this way:</p>
  
  <pre><code>    itens: {"countcats":2,"countsubcats":7,
              "catsubcatsdata":{
                  "15978738e6cd1e":{"title":"Test 1","description":"blablabla",
                      "subcats":{
                          "1597873b1653d9": {"codurl":"t01url","title":"Teste subiten 1","description":""},
                          "1597873bd76c80": {"codurl":"t01url2","title":"Testing sub two","description":""},
                          "1597873c9d4a81": {"codurl":"t01url3","title":"Test sub 3","description":"blablabla 01"},
                          }},
                  "15978745b32c1b":{"title":"Loren Ipsun","description":"lamet dectoid samet",
                      "subcats":{
                          "159787464bc887":{"codurl":"maecenas","title":"Maecenas pulvinar","description":"orci non volutpat varius"},
                          "159787472eb5e6":{"codurl":"donecorci ","title":"Donec hendrerit orci","description":""},
                          "15978748b89bca":{"codurl":"massadictum","title":"Nullam eu massa dictum", "description":""},
                          "159787495492f4":{"codurl":"ultricies","title":"Etiam massa arcu","description":"Donec ultricies porttitor augue quis dictum. Quisque efficitur nec sapien eu ultricies"}
                          }}
                  }}
  </code></pre>
  
  <p>I have the following code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  &lt;div id="v-for-sectors"&gt;
   &lt;input type="text" placeholder="Search" v-model="searchQuery"&gt;
  
    &lt;ul&gt;
      &lt;li v-for="(value, key) in filteredList"&gt;
            &lt;b&gt;{{ value.title }}&lt;/b&gt;&lt;br&gt;{{ value.description }}
     &lt;ul&gt;
       &lt;li v-for="(vsub, keysub) in value.subcats"&gt;&lt;a v-bind:href="'http://www.teste.com/'+vsub.codurl"&gt;{{ vsub.title }} - {{ vsub.description }}&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      new Vue({
          el: '#v-for-sectors',
          data: {
              searchQuery: '',
              itens: {"catsubcatsdata":{"15978738e6cd1e":{"title":"Test 1","description":"blablabla","subcats":{"1597873b1653d9":{"codurl":"t01url","title":"Teste subiten 1","description":""},"1597873bd76c80":{"codurl":"t01url2","title":"Testing sub two","description":""},"1597873c9d4a81":{"codurl":"t01url3","title":"Test sub 3","description":"blablabla 01"}}},"15978745b32c1b":{"title":"Loren Ipsun","description":"lamet dectoid samet","subcats":{"159787464bc887":{"codurl":"maecenas","title":"Maecenas pulvinar","description":"orci non volutpat varius"},"159787472eb5e6":{"codurl":"donecorci","title":"Donec hendrerit orci","description":""},"15978748b89bca":{"codurl":"massadictum","title":"Nullam eu massa dictum","description":""},"159787495492f4":{"codurl":"ultricies","title":"Etiam massa arcu","description":"Donec ultricies porttitor augue quis dictum."}}}}}
    },
          computed: {
              filteredList: function () {
                var filterKey = this.searchQuery &amp;&amp; this.searchQuery.toLowerCase()
                var data = this.itens.catsubcatsdata
      if (filterKey) {
       data = data.filter(function (row) {
                                return Object.keys(row).some(function (key) {
                                  return String(row[key]).toLowerCase().indexOf(filterKey) &gt; -1
                                })
         })
      }
                  return data
              }
          }
      });
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've tried to follow the logic of this example:
  <a href="https://br.vuejs.org/v2/examples/grid-component.html" rel="nofollow noreferrer">https://br.vuejs.org/v2/examples/grid-component.html</a></p>
  
  <p>But I do not understand why you are returning the following error
  <strong>data.filter is not a function"</strong></p>
  
  <p>I would like to do a search on all titles and descriptions of items and subitems.</p>
  
  <p>Could someone explain to me where I am wrong and what correct way to do ??</p>